Add custom audio renderer for iPhone earpiece and only render joined participants (#3249)

* Add custom audio renderer to only render joined participants & add ios earpice workaround

fix left right to match chromium + safari
(firefox is swapped)

earpice as setting

Simpler code and documentation
The doc explains, what this class actually does and why it is so complicated.

Signed-off-by: Timo K <toger5@hotmail.de>

use only one audioContext, remove (non working) standby fallback

* Add tests

* use optional audio context and effect to initiate it + review

src/room/InCallView.test.tsx

@@ -21,11 +21,7 @@ import { ConnectionState, type LocalParticipant } from "livekit-client";
 import { of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
-import {
-  RoomAudioRenderer,
-  RoomContext,
-  useLocalParticipant,
-} from "@livekit/components-react";
+import { RoomContext, useLocalParticipant } from "@livekit/components-react";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 
 import { type MuteStates } from "./MuteStates";
@@ -48,6 +44,7 @@ import {
 } from "../settings/settings";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer";
 
 // vi.hoisted(() => {
 //   localStorage = {} as unknown as Storage;
@@ -65,6 +62,7 @@ vi.mock("../tile/GridTile");
 vi.mock("../tile/SpotlightTile");
 vi.mock("@livekit/components-react");
 vi.mock("../e2ee/sharedKeyManagement");
+vi.mock("../livekit/MatrixAudioRenderer");
 vi.mock("react-use-measure", () => ({
   default: (): [() => void, object] => [(): void => {}, {}],
 }));
@@ -81,13 +79,15 @@ const roomMembers = new Map([carol].map((p) => [p.userId, p]));
 
 const roomId = "!foo:bar";
 let useRoomEncryptionSystemMock: MockedFunction<typeof useRoomEncryptionSystem>;
+
 beforeEach(() => {
   vi.clearAllMocks();
-  // RoomAudioRenderer is tested separately.
+
+  // MatrixAudioRenderer is tested separately.
   (
-    RoomAudioRenderer as MockedFunction<typeof RoomAudioRenderer>
+    MatrixAudioRenderer as MockedFunction<typeof MatrixAudioRenderer>
   ).mockImplementation((_props) => {
-    return <div>mocked: RoomAudioRenderer</div>;
+    return <div>mocked: MatrixAudioRenderer</div>;
   });
   (
     useLocalParticipant as MockedFunction<typeof useLocalParticipant>
@@ -98,7 +98,6 @@ beforeEach(() => {
         localParticipant: localRtcMember as unknown as LocalParticipant,
       }) as unknown as ReturnType<typeof useLocalParticipant>,
   );
-
   useRoomEncryptionSystemMock =
     useRoomEncryptionSystem as typeof useRoomEncryptionSystemMock;
   useRoomEncryptionSystemMock.mockReturnValue({ kind: E2eeType.NONE });