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 });

src/room/InCallView.tsx

@@ -5,11 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  RoomAudioRenderer,
-  RoomContext,
-  useLocalParticipant,
-} from "@livekit/components-react";
+import { RoomContext, useLocalParticipant } from "@livekit/components-react";
 import { Text } from "@vector-im/compound-web";
 import { ConnectionState, type Room } from "livekit-client";
 import { type MatrixClient } from "matrix-js-sdk";
@@ -107,6 +103,7 @@ import {
 import { ReactionsReader } from "../reactions/ReactionsReader";
 import { ConnectionLostError } from "../utils/errors.ts";
 import { useTypedEventEmitter } from "../useEvents.ts";
+import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -726,7 +723,10 @@ export const InCallView: FC<InCallViewProps> = ({
           </Text>
         )
       }
-      <RoomAudioRenderer muted={muteAllAudio} />
+      <MatrixAudioRenderer
+        members={rtcSession.memberships}
+        muted={muteAllAudio}
+      />
       {renderContent()}
       <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />

src/room/MuteStates.test.tsx

@@ -79,6 +79,7 @@ function mockDevices(available: Map<string, DeviceLabel>): MediaDevice {
     selectedId: "",
     selectedGroupId: "",
     select: (): void => {},
+    useAsEarpiece: false,
   };
 }
 

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`InCallView > rendering > renders 1`] = `
       class="header filler"
     />
     <div>
-      mocked: RoomAudioRenderer
+      mocked: MatrixAudioRenderer
     </div>
     <div
       class="scrollingGrid grid"