Add sound effect for call joined / left (#2794)

* Add renderer for call joined / left

* lint

* Add new sounds

* Updates sounds in renderer

* lint

* move import

* pad sounds with silence

* lint

* tidy

* Drop autoplay since we now subscribe correctly.

* Comitting test files I am going to be going to lunch so will tidy up in a little while.

* finish up tests

* Add support for multiple channels per sound.

* lint

src/utils/test.ts

@@ -14,7 +14,9 @@ import {
   RemoteParticipant,
   RemoteTrackPublication,
   Room as LivekitRoom,
+  RoomEvent,
 } from "livekit-client";
+import { EventEmitter } from "stream";
 
 import {
   LocalUserMediaViewModel,
@@ -109,6 +111,33 @@ 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>,
   {
@@ -206,3 +235,12 @@ export function mockConfig(config: Partial<ResolvedConfigOptions> = {}): void {
     ...config,
   });
 }
+
+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;
+}