From 15801a01ba6b5d8957a546df6832894b7e92be6a Mon Sep 17 00:00:00 2001
From: Joseph Campuzano <campuzanojoseph@gmail.com>
Date: Sat, 24 Jan 2026 12:16:53 -0600
Subject: fix: add state to pause existing audio for demo menus, add support
 fo… (#10428)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/src/components/settings-general.tsx | 32 +++++++++++++++++++-----
 1 file changed, 26 insertions(+), 6 deletions(-)

(limited to 'packages/app/src/components')

diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx
index 75acf4f74..272aeb314 100644
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -7,6 +7,26 @@ import { useSettings, monoFontFamily } from "@/context/settings"
 import { playSound, SOUND_OPTIONS } from "@/utils/sound"
 import { Link } from "./link"
 
+
+let demoSoundState = {
+  cleanup: undefined as (() => void) | undefined,
+  timeout: undefined as NodeJS.Timeout | undefined,
+}
+
+// To prevent audio from overlapping/playing very quickly when navigating the settings menus, 
+// delay the playback by 100ms during quick selection changes and pause existing sounds.
+const playDemoSound = (src: string) => {
+  if (demoSoundState.cleanup) {
+    demoSoundState.cleanup();
+  }
+
+  clearTimeout(demoSoundState.timeout)
+
+  demoSoundState.timeout = setTimeout(() => {
+    demoSoundState.cleanup = playSound(src)
+  }, 100)
+}
+
 export const SettingsGeneral: Component = () => {
   const theme = useTheme()
   const language = useLanguage()
@@ -211,12 +231,12 @@ export const SettingsGeneral: Component = () => {
                 label={(o) => language.t(o.label)}
                 onHighlight={(option) => {
                   if (!option) return
-                  playSound(option.src)
+                  playDemoSound(option.src)
                 }}
                 onSelect={(option) => {
                   if (!option) return
                   settings.sounds.setAgent(option.id)
-                  playSound(option.src)
+                  playDemoSound(option.src)
                 }}
                 variant="secondary"
                 size="small"
@@ -235,12 +255,12 @@ export const SettingsGeneral: Component = () => {
                 label={(o) => language.t(o.label)}
                 onHighlight={(option) => {
                   if (!option) return
-                  playSound(option.src)
+                  playDemoSound(option.src)
                 }}
                 onSelect={(option) => {
                   if (!option) return
                   settings.sounds.setPermissions(option.id)
-                  playSound(option.src)
+                  playDemoSound(option.src)
                 }}
                 variant="secondary"
                 size="small"
@@ -259,12 +279,12 @@ export const SettingsGeneral: Component = () => {
                 label={(o) => language.t(o.label)}
                 onHighlight={(option) => {
                   if (!option) return
-                  playSound(option.src)
+                  playDemoSound(option.src)
                 }}
                 onSelect={(option) => {
                   if (!option) return
                   settings.sounds.setErrors(option.id)
-                  playSound(option.src)
+                  playDemoSound(option.src)
                 }}
                 variant="secondary"
                 size="small"
-- 
cgit v1.2.3