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/room/InCallView.tsx

@@ -19,7 +19,6 @@ import {
   TouchEvent,
   forwardRef,
   useCallback,
-  useDeferredValue,
   useEffect,
   useMemo,
   useRef,
@@ -81,11 +80,8 @@ import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
 import { GridTileViewModel, TileViewModel } from "../state/TileViewModel";
 import { ReactionsProvider, useReactions } from "../useReactions";
-import handSoundOgg from "../sound/raise_hand.ogg?url";
-import handSoundMp3 from "../sound/raise_hand.mp3?url";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { useSwitchCamera } from "./useSwitchCamera";
-import { soundEffectVolumeSetting, useSetting } from "../settings/settings";
 import { ReactionsOverlay } from "./ReactionsOverlay";
 import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
 
@@ -178,14 +174,7 @@ export const InCallView: FC<InCallViewProps> = ({
   connState,
   onShareClick,
 }) => {
-  const [soundEffectVolume] = useSetting(soundEffectVolumeSetting);
-  const { supportsReactions, raisedHands, sendReaction, toggleRaisedHand } =
-    useReactions();
-  const raisedHandCount = useMemo(
-    () => Object.keys(raisedHands).length,
-    [raisedHands],
-  );
-  const previousRaisedHandCount = useDeferredValue(raisedHandCount);
+  const { supportsReactions, sendReaction, toggleRaisedHand } = useReactions();
 
   useWakeLock();
 
@@ -335,25 +324,6 @@ export const InCallView: FC<InCallViewProps> = ({
     [vm],
   );
 
-  // Play a sound when the raised hand count increases.
-  const handRaisePlayer = useRef<HTMLAudioElement>(null);
-  useEffect(() => {
-    if (!handRaisePlayer.current) {
-      return;
-    }
-    if (previousRaisedHandCount < raisedHandCount) {
-      handRaisePlayer.current.volume = soundEffectVolume;
-      handRaisePlayer.current.play().catch((ex) => {
-        logger.warn("Failed to play raise hand sound", ex);
-      });
-    }
-  }, [
-    raisedHandCount,
-    handRaisePlayer,
-    previousRaisedHandCount,
-    soundEffectVolume,
-  ]);
-
   useEffect(() => {
     widget?.api.transport
       .send(
@@ -667,10 +637,6 @@ export const InCallView: FC<InCallViewProps> = ({
       <RoomAudioRenderer />
       {renderContent()}
       <CallEventAudioRenderer vm={vm} />
-      <audio ref={handRaisePlayer} preload="auto" hidden>
-        <source src={handSoundOgg} type="audio/ogg; codecs=vorbis" />
-        <source src={handSoundMp3} type="audio/mpeg" />
-      </audio>
       <ReactionsAudioRenderer />
       <ReactionsOverlay />
       {footer}