feat(settings): wire up button sounds (#729)

Satellite-im · Oct 18, 2024 · 84b6843 · 84b6843
1 parent 7de7e50
commit 84b6843
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>