Ensure call sound effects are played over the correct sink (#2863)

* Refactor to use AudioContext

* Remove unused audio format.

* Reduce update frequency for volume

* Port to useAudioContext

* Port reactionaudiorenderer to useAudioContext

* Integrate raise hand sound into call event renderer.

* Simplify reaction sounds

* only play one sound per reaction type

* Start to build out tests

* fixup tests / comments

* Fix reaction sound

* remove console line

* Remove another debug line.

* fix lint

* Use testing library click

* lint

* fix a few things

* Change the way we as unknown the mock RTC session.

* Lint

* Fix types for MockRTCSession

* value change should always be set

* Update volume slider description.

* Only load reaction sound effects if enabled.

* cache improvements

* lowercase soundMap

* lint

* move prefetch sounds to fix hot reload

* correct docs

* add a header

* Wording change

---------

Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>

src/settings/SettingsModal.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ChangeEvent, FC, useCallback } from "react";
+import { ChangeEvent, FC, useCallback, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Root as Form, Text } from "@vector-im/compound-web";
@@ -83,8 +83,8 @@ export const SettingsModal: FC<Props> = ({
 
   const devices = useMediaDevices();
   useMediaDeviceNames(devices, open);
-
   const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
+  const [soundVolumeRaw, setSoundVolumeRaw] = useState(soundVolume);
 
   const audioTab: Tab<SettingsTab> = {
     key: "audio",
@@ -107,8 +107,9 @@ export const SettingsModal: FC<Props> = ({
             <p>{t("settings.audio_tab.effect_volume_description")}</p>
             <Slider
               label={t("video_tile.volume")}
-              value={soundVolume}
-              onValueChange={setSoundVolume}
+              value={soundVolumeRaw}
+              onValueChange={setSoundVolumeRaw}
+              onValueCommit={setSoundVolume}
               min={0}
               max={1}
               step={0.01}