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/utils/test.ts

@@ -27,9 +27,7 @@ import {
   RemoteParticipant,
   RemoteTrackPublication,
   Room as LivekitRoom,
-  RoomEvent,
 } from "livekit-client";
-import { EventEmitter } from "stream";
 
 import {
   LocalUserMediaViewModel,
@@ -153,33 +151,6 @@ export function mockMatrixRoom(room: Partial<MatrixRoom>): MatrixRoom {
   return { ...mockEmitter(), ...room } as Partial<MatrixRoom> as MatrixRoom;
 }
 
-/**
- * A mock of a Livekit Room that can emit events.
- */
-export class EmittableMockLivekitRoom extends EventEmitter {
-  public localParticipant?: LocalParticipant;
-  public remoteParticipants: Map<string, RemoteParticipant>;
-
-  public constructor(room: {
-    localParticipant?: LocalParticipant;
-    remoteParticipants: Map<string, RemoteParticipant>;
-  }) {
-    super();
-    this.localParticipant = room.localParticipant;
-    this.remoteParticipants = room.remoteParticipants ?? new Map();
-  }
-
-  public addParticipant(remoteParticipant: RemoteParticipant): void {
-    this.remoteParticipants.set(remoteParticipant.identity, remoteParticipant);
-    this.emit(RoomEvent.ParticipantConnected, remoteParticipant);
-  }
-
-  public removeParticipant(remoteParticipant: RemoteParticipant): void {
-    this.remoteParticipants.delete(remoteParticipant.identity);
-    this.emit(RoomEvent.ParticipantDisconnected, remoteParticipant);
-  }
-}
-
 export function mockLivekitRoom(
   room: Partial<LivekitRoom>,
   {
@@ -280,15 +251,6 @@ export function mockConfig(config: Partial<ResolvedConfigOptions> = {}): void {
   });
 }
 
-export function mockMediaPlay(): string[] {
-  const audioIsPlaying: string[] = [];
-  window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
-    audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
-    return Promise.resolve();
-  };
-  return audioIsPlaying;
-}
-
 export class MockRTCSession extends TypedEventEmitter<
   MatrixRTCSessionEvent,
   MatrixRTCSessionEventHandlerMap

src/utils/testReactions.tsx

@@ -32,7 +32,7 @@ export const TestReactionsWrapper = ({
   rtcSession,
   children,
 }: PropsWithChildren<{
-  rtcSession: MockRTCSession;
+  rtcSession: MockRTCSession | MatrixRTCSession;
 }>): ReactNode => {
   return (
     <ReactionsProvider rtcSession={rtcSession as unknown as MatrixRTCSession}>
@@ -203,4 +203,12 @@ export class MockRoom extends EventEmitter {
     });
     return evt.getId()!;
   }
+
+  public getMember(): void {
+    return;
+  }
+
+  public testGetAsMatrixRoom(): Room {
+    return this as unknown as Room;
+  }
 }