From 84b684343f3a914fcf91f55943534452d1136b16 Mon Sep 17 00:00:00 2001
From: Flemmli97 <34157027+Flemmli97@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:37:37 +0200
Subject: [PATCH] feat(settings): wire up button sounds (#729)

---
 src/lib/components/calling/CallControls.svelte |  2 ++
 src/lib/components/calling/CallScreen.svelte   |  3 +++
 src/lib/elements/Button.svelte                 | 10 ++++++++++
 src/lib/elements/Switch.svelte                 |  7 +++++++
 4 files changed, 22 insertions(+)

diff --git a/src/lib/components/calling/CallControls.svelte b/src/lib/components/calling/CallControls.svelte
index c4ec549ef..2d44d20aa 100644
--- a/src/lib/components/calling/CallControls.svelte
+++ b/src/lib/components/calling/CallControls.svelte
@@ -97,6 +97,7 @@
                     appearance={muted ? Appearance.Error : Appearance.Alt}
                     tooltip={$_("call.mute")}
                     loading={loading}
+                    soundSource={undefined}
                     on:click={_ => {
                         Store.updateMuted(!muted)
                     }}>
@@ -108,6 +109,7 @@
                     appearance={deafened ? Appearance.Error : Appearance.Alt}
                     tooltip={$_("call.deafen")}
                     loading={loading}
+                    soundSource={undefined}
                     on:click={_ => {
                         Store.updateDeafened(!deafened)
                     }}>
diff --git a/src/lib/components/calling/CallScreen.svelte b/src/lib/components/calling/CallScreen.svelte
index 05ce8b388..856430bed 100644
--- a/src/lib/components/calling/CallScreen.svelte
+++ b/src/lib/components/calling/CallScreen.svelte
@@ -329,6 +329,7 @@
                 icon
                 appearance={muted ? Appearance.Error : Appearance.Alt}
                 tooltip={muted ? $_("call.unmute") : $_("call.mute")}
+                soundSource={undefined}
                 on:click={_ => {
                     Store.updateMuted(!muted)
                 }}>
@@ -339,6 +340,7 @@
                 icon
                 appearance={deafened ? Appearance.Error : Appearance.Alt}
                 tooltip={$_("call.deafen")}
+                soundSource={undefined}
                 on:click={_ => {
                     Store.updateDeafened(!deafened)
                     // VoiceRTCInstance.turnOnOffDeafened()
@@ -353,6 +355,7 @@
                 appearance={cameraEnabled ? Appearance.Alt : Appearance.Error}
                 icon
                 tooltip={cameraEnabled ? $_("call.disable_video") : $_("call.enable_video")}
+                soundSource={undefined}
                 on:click={_ => {
                     Store.updateCameraEnabled(!cameraEnabled)
                 }}>
diff --git a/src/lib/elements/Button.svelte b/src/lib/elements/Button.svelte
index 51051d6e7..5b68668c4 100644
--- a/src/lib/elements/Button.svelte
+++ b/src/lib/elements/Button.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
+    import { SettingsStore } from "$lib/state"
+    import { derived } from "svelte/store"
     import { Appearance, TooltipPosition } from "../enums/index"
 
     import { Loader, Text } from "./"
+    import { playSound, Sounds } from "$lib/components/utils/SoundHandler"
 
     export let tooltip: string | null = ""
     export let tooltipPosition: TooltipPosition = TooltipPosition.MIDDLE
@@ -18,11 +21,13 @@
     export let hideTextOnMobile: boolean = false
     export let color: string = ""
     export let badge: number = 0
+    export let soundSource: Sounds | undefined = Sounds.Press
 
     // Allow parent to override / add classes
     let clazz = ""
     export { clazz as class }
     let buttonElement: HTMLElement
+    $: sound = derived(SettingsStore.state, s => s.audio.interfaceSounds)
 
     function tooltipPositionClass(button: HTMLElement) {
         const rect = button.getBoundingClientRect()
@@ -57,6 +62,11 @@
     data-cy={hook}
     data-tooltip={tooltip}
     disabled={disabled || loading}
+    on:click={_ => {
+        if ($sound && soundSource) {
+            playSound(soundSource)
+        }
+    }}
     on:click
     on:contextmenu>
     {#if badge > 0}
diff --git a/src/lib/elements/Switch.svelte b/src/lib/elements/Switch.svelte
index 0e30876f3..bdc3a3778 100644
--- a/src/lib/elements/Switch.svelte
+++ b/src/lib/elements/Switch.svelte
@@ -1,16 +1,23 @@
 <script lang="ts">
+    import { playSound, Sounds } from "$lib/components/utils/SoundHandler"
+    import { SettingsStore } from "$lib/state"
     import { createEventDispatcher } from "svelte"
+    import { derived } from "svelte/store"
 
     export let on: boolean = false
     export let small: boolean = false
     export let hook: string = ""
     export let disabled: boolean = false
+    $: sound = derived(SettingsStore.state, s => s.audio.interfaceSounds)
 
     // Create an event dispatcher
     const dispatch = createEventDispatcher()
 
     // Function to dispatch a 'click' event
     function onToggle(_: Event) {
+        if ($sound) {
+            playSound(on ? Sounds.On : Sounds.Off)
+        }
         dispatch("toggle", on)
     }
 </script>