Merge branch 'livekit' into toger5/lib-ec-version

src/state/CallViewModel/CallViewModel.test.ts

@@ -502,6 +502,48 @@ describe("CallViewModel", () => {
     });
   });
 
+  test("layout reacts to window size", () => {
+    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+      const windowSizeInputMarbles = "abc";
+      const expectedLayoutMarbles = " abc";
+      withCallViewModel(
+        {
+          remoteParticipants$: constant([aliceParticipant]),
+          rtcMembers$: constant([localRtcMember, aliceRtcMember]),
+          windowSize$: behavior(windowSizeInputMarbles, {
+            a: { width: 300, height: 600 }, // Start very narrow, like a phone
+            b: { width: 1000, height: 800 }, // Go to normal desktop window size
+            c: { width: 200, height: 180 }, // Go to PiP size
+          }),
+        },
+        (vm) => {
+          expectObservable(summarizeLayout$(vm.layout$)).toBe(
+            expectedLayoutMarbles,
+            {
+              a: {
+                // This is the expected one-on-one layout for a narrow window
+                type: "spotlight-expanded",
+                spotlight: [`${aliceId}:0`],
+                pip: `${localId}:0`,
+              },
+              b: {
+                // In a larger window, expect the normal one-on-one layout
+                type: "one-on-one",
+                local: `${localId}:0`,
+                remote: `${aliceId}:0`,
+              },
+              c: {
+                // In a PiP-sized window, we of course expect a PiP layout
+                type: "pip",
+                spotlight: [`${aliceId}:0`],
+              },
+            },
+          );
+        },
+      );
+    });
+  });
+
   test("spotlight speakers swap places", () => {
     withTestScheduler(({ behavior, schedule, expectObservable }) => {
       // Go immediately into spotlight mode for the test

src/state/CallViewModel/CallViewModel.ts

@@ -16,7 +16,6 @@ import {
 } from "livekit-client";
 import { type Room as MatrixRoom } from "matrix-js-sdk";
 import {
-  BehaviorSubject,
   combineLatest,
   distinctUntilChanged,
   filter,
@@ -128,6 +127,7 @@ import {
 } from "./remoteMembers/MatrixMemberMetadata.ts";
 import { Publisher } from "./localMember/Publisher.ts";
 import { type Connection } from "./remoteMembers/Connection.ts";
+import { createLayoutModeSwitch } from "./LayoutSwitch.ts";
 
 const logger = rootLogger.getChild("[CallViewModel]");
 //TODO
@@ -149,6 +149,8 @@ export interface CallViewModelOptions {
   livekitRoomFactory?: (options?: RoomOptions) => LivekitRoom;
   /** Optional behavior overriding the local connection state, mainly for testing purposes. */
   connectionState$?: Behavior<ConnectionState>;
+  /** Optional behavior overriding the computed window size, mainly for testing purposes. */
+  windowSize$?: Behavior<{ width: number; height: number }>;
 }
 
 // Do not play any sounds if the participant count has exceeded this
@@ -368,6 +370,7 @@ export interface CallViewModel {
    */
   connectionState: LocalMemberConnectionState;
 }
+
 /**
  * A view model providing all the application logic needed to show the in-call
  * UI (may eventually be expanded to cover the lobby and feedback screens in the
@@ -438,6 +441,8 @@ export function createCallViewModel$(
     livekitKeyProvider,
     getUrlParams().controlledAudioDevices,
     options.livekitRoomFactory,
+    getUrlParams().echoCancellation,
+    getUrlParams().noiseSuppression,
   );
 
   const connectionManager = createConnectionManager$({
@@ -972,11 +977,19 @@ export function createCallViewModel$(
 
   const pipEnabled$ = scope.behavior(setPipEnabled$, false);
 
+  const windowSize$ =
+    options.windowSize$ ??
+    scope.behavior<{ width: number; height: number }>(
+      fromEvent(window, "resize").pipe(
+        startWith(null),
+        map(() => ({ width: window.innerWidth, height: window.innerHeight })),
+      ),
+    );
+
+  // A guess at what the window's mode should be based on its size and shape.
   const naturalWindowMode$ = scope.behavior<WindowMode>(
-    fromEvent(window, "resize").pipe(
-      map(() => {
-        const height = window.innerHeight;
-        const width = window.innerWidth;
+    windowSize$.pipe(
+      map(({ width, height }) => {
         if (height <= 400 && width <= 340) return "pip";
         // Our layouts for flat windows are better at adapting to a small width
         // than our layouts for narrow windows are at adapting to a small height,
@@ -986,7 +999,6 @@ export function createCallViewModel$(
         return "normal";
       }),
     ),
-    "normal",
   );
 
   /**
@@ -1003,49 +1015,11 @@ export function createCallViewModel$(
     spotlightExpandedToggle$.pipe(accumulate(false, (expanded) => !expanded)),
   );
 
-  const gridModeUserSelection$ = new BehaviorSubject<GridMode>("grid");
-
-  // Callback to set the grid mode desired by the user.
-  // Notice that this is only a preference, the actual grid mode can be overridden
-  // if there is a remote screen share active.
-  const setGridMode = (value: GridMode): void => {
-    gridModeUserSelection$.next(value);
-  };
-  /**
-   * The layout mode of the media tile grid.
-   */
-  const gridMode$ =
-    // If the user hasn't selected spotlight and somebody starts screen sharing,
-    // automatically switch to spotlight mode and reset when screen sharing ends
-    scope.behavior<GridMode>(
-      gridModeUserSelection$.pipe(
-        switchMap((userSelection): Observable<GridMode> => {
-          if (userSelection === "spotlight") {
-            // If already in spotlight mode, stay there
-            return of("spotlight");
-          } else {
-            // Otherwise, check if there is a remote screen share active
-            // as this could force us into spotlight mode.
-            return combineLatest([hasRemoteScreenShares$, windowMode$]).pipe(
-              map(([hasScreenShares, windowMode]): GridMode => {
-                const isFlatMode = windowMode === "flat";
-                if (hasScreenShares || isFlatMode) {
-                  logger.debug(
-                    `Forcing spotlight mode, hasScreenShares=${hasScreenShares} windowMode=${windowMode}`,
-                  );
-                  // override to spotlight mode
-                  return "spotlight";
-                } else {
-                  // respect user choice
-                  return "grid";
-                }
-              }),
-            );
-          }
-        }),
-      ),
-      "grid",
-    );
+  const { setGridMode, gridMode$ } = createLayoutModeSwitch(
+    scope,
+    windowMode$,
+    hasRemoteScreenShares$,
+  );
 
   const gridLayoutMedia$: Observable<GridLayoutMedia> = combineLatest(
     [grid$, spotlight$],

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -75,6 +75,7 @@ export interface CallViewModelInputs {
   speaking: Map<Participant, Observable<boolean>>;
   mediaDevices: MediaDevices;
   initialSyncState: SyncState;
+  windowSize$: Behavior<{ width: number; height: number }>;
 }
 
 const localParticipant = mockLocalParticipant({ identity: "" });
@@ -89,6 +90,7 @@ export function withCallViewModel(
     speaking = new Map(),
     mediaDevices = mockMediaDevices({}),
     initialSyncState = SyncState.Syncing,
+    windowSize$ = constant({ width: 1000, height: 800 }),
   }: Partial<CallViewModelInputs> = {},
   continuation: (
     vm: CallViewModel,
@@ -173,6 +175,7 @@ export function withCallViewModel(
           setE2EEEnabled: async () => Promise.resolve(),
         }),
       connectionState$,
+      windowSize$,
     },
     raisedHands$,
     reactions$,

src/state/CallViewModel/LayoutSwitch.test.ts

@@ -0,0 +1,202 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { firstValueFrom, of } from "rxjs";
+
+import { createLayoutModeSwitch } from "./LayoutSwitch";
+import { ObservableScope } from "../ObservableScope";
+import { constant } from "../Behavior";
+import { withTestScheduler } from "../../utils/test";
+
+let scope: ObservableScope;
+beforeEach(() => {
+  scope = new ObservableScope();
+});
+afterEach(() => {
+  scope.end();
+});
+
+describe("Default mode", () => {
+  test("Should be in grid layout by default", async () => {
+    const { gridMode$ } = createLayoutModeSwitch(
+      scope,
+      constant("normal"),
+      of(false),
+    );
+
+    const mode = await firstValueFrom(gridMode$);
+    expect(mode).toBe("grid");
+  });
+
+  test("Should switch to spotlight mode when window mode is flat", async () => {
+    const { gridMode$ } = createLayoutModeSwitch(
+      scope,
+      constant("flat"),
+      of(false),
+    );
+
+    const mode = await firstValueFrom(gridMode$);
+    expect(mode).toBe("spotlight");
+  });
+});
+
+test("Should allow switching modes manually", () => {
+  withTestScheduler(({ cold, behavior, expectObservable, schedule }): void => {
+    const { gridMode$, setGridMode } = createLayoutModeSwitch(
+      scope,
+      behavior("n", { n: "normal" }),
+      cold("f", { f: false, t: true }),
+    );
+
+    schedule("--sgs", {
+      s: () => setGridMode("spotlight"),
+      g: () => setGridMode("grid"),
+    });
+
+    expectObservable(gridMode$).toBe("g-sgs", {
+      g: "grid",
+      s: "spotlight",
+    });
+  });
+});
+
+test("Should switch to spotlight mode when there is a remote screen share", () => {
+  withTestScheduler(({ cold, behavior, expectObservable }): void => {
+    const shareMarble = "f--t";
+    const gridsMarble = "g--s";
+    const { gridMode$ } = createLayoutModeSwitch(
+      scope,
+      behavior("n", { n: "normal" }),
+      cold(shareMarble, { f: false, t: true }),
+    );
+
+    expectObservable(gridMode$).toBe(gridsMarble, {
+      g: "grid",
+      s: "spotlight",
+    });
+  });
+});
+
+test("Can manually force grid when there is a screenshare", () => {
+  withTestScheduler(({ cold, behavior, expectObservable, schedule }): void => {
+    const { gridMode$, setGridMode } = createLayoutModeSwitch(
+      scope,
+      behavior("n", { n: "normal" }),
+      cold("-ft", { f: false, t: true }),
+    );
+
+    schedule("---g", {
+      g: () => setGridMode("grid"),
+    });
+
+    expectObservable(gridMode$).toBe("ggsg", {
+      g: "grid",
+      s: "spotlight",
+    });
+  });
+});
+
+test("Should auto-switch after manually selected grid", () => {
+  withTestScheduler(({ cold, behavior, expectObservable, schedule }): void => {
+    const { gridMode$, setGridMode } = createLayoutModeSwitch(
+      scope,
+      behavior("n", { n: "normal" }),
+      // Two screenshares will happen in sequence
+      cold("-ft-ft", { f: false, t: true }),
+    );
+
+    // There was a screen-share that forced spotlight, then
+    // the user manually switch back to grid
+    schedule("---g", {
+      g: () => setGridMode("grid"),
+    });
+
+    // If we did want to respect manual selection, the expectation would be:
+    // const expectation = "ggsg";
+    const expectation = "ggsg-s";
+
+    expectObservable(gridMode$).toBe(expectation, {
+      g: "grid",
+      s: "spotlight",
+    });
+  });
+});
+
+test("Should switch back to grid mode when the remote screen share ends", () => {
+  withTestScheduler(({ cold, behavior, expectObservable }): void => {
+    const shareMarble = "f--t--f-";
+    const gridsMarble = "g--s--g-";
+    const { gridMode$ } = createLayoutModeSwitch(
+      scope,
+      behavior("n", { n: "normal" }),
+      cold(shareMarble, { f: false, t: true }),
+    );
+
+    expectObservable(gridMode$).toBe(gridsMarble, {
+      g: "grid",
+      s: "spotlight",
+    });
+  });
+});
+
+test("can auto-switch to spotlight again after first screen share ends", () => {
+  withTestScheduler(({ cold, behavior, expectObservable }): void => {
+    const shareMarble = "ftft";
+    const gridsMarble = "gsgs";
+    const { gridMode$ } = createLayoutModeSwitch(
+      scope,
+      behavior("n", { n: "normal" }),
+      cold(shareMarble, { f: false, t: true }),
+    );
+
+    expectObservable(gridMode$).toBe(gridsMarble, {
+      g: "grid",
+      s: "spotlight",
+    });
+  });
+});
+
+test("can switch manually to grid after screen share while manually in spotlight", () => {
+  withTestScheduler(({ cold, behavior, schedule, expectObservable }): void => {
+    // Initially, no one is sharing. Then the user manually switches to
+    // spotlight. After a screen share starts, the user manually switches to
+    // grid.
+    const shareMarbles = "  f-t-";
+    const setModeMarbles = "-s-g";
+    const expectation = "   gs-g";
+    const { gridMode$, setGridMode } = createLayoutModeSwitch(
+      scope,
+      behavior("n", { n: "normal" }),
+      cold(shareMarbles, { f: false, t: true }),
+    );
+    schedule(setModeMarbles, {
+      g: () => setGridMode("grid"),
+      s: () => setGridMode("spotlight"),
+    });
+
+    expectObservable(gridMode$).toBe(expectation, {
+      g: "grid",
+      s: "spotlight",
+    });
+  });
+});
+
+test("Should auto-switch to spotlight when in flat window mode", () => {
+  withTestScheduler(({ cold, behavior, expectObservable }): void => {
+    const { gridMode$ } = createLayoutModeSwitch(
+      scope,
+      behavior("naf", { n: "normal", a: "narrow", f: "flat" }),
+      cold("f", { f: false, t: true }),
+    );
+
+    expectObservable(gridMode$).toBe("g-s-", {
+      g: "grid",
+      s: "spotlight",
+    });
+  });
+});

src/state/CallViewModel/LayoutSwitch.ts

@@ -0,0 +1,130 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  BehaviorSubject,
+  combineLatest,
+  map,
+  type Observable,
+  scan,
+} from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import { type GridMode, type WindowMode } from "./CallViewModel.ts";
+import { type Behavior } from "../Behavior.ts";
+import { type ObservableScope } from "../ObservableScope.ts";
+
+/**
+ * Creates a layout mode switch that allows switching between grid and spotlight modes.
+ * The actual layout mode can be overridden to spotlight mode if there is a remote screen share active
+ * or if the window mode is flat.
+ *
+ * @param scope - The observable scope to manage subscriptions.
+ * @param windowMode$ - The current window mode observable.
+ * @param hasRemoteScreenShares$ - An observable indicating if there are remote screen shares active.
+ */
+export function createLayoutModeSwitch(
+  scope: ObservableScope,
+  windowMode$: Behavior<WindowMode>,
+  hasRemoteScreenShares$: Observable<boolean>,
+): {
+  gridMode$: Behavior<GridMode>;
+  setGridMode: (value: GridMode) => void;
+} {
+  const gridModeUserSelection$ = new BehaviorSubject<GridMode>("grid");
+
+  // Callback to set the grid mode desired by the user.
+  // Notice that this is only a preference, the actual grid mode can be overridden
+  // if there is a remote screen share active.
+  const setGridMode = (value: GridMode): void => {
+    gridModeUserSelection$.next(value);
+  };
+  /**
+   * The layout mode of the media tile grid.
+   */
+  const gridMode$ =
+    // If the user hasn't selected spotlight and somebody starts screen sharing,
+    // automatically switch to spotlight mode and reset when screen sharing ends
+    scope.behavior<GridMode>(
+      combineLatest([
+        gridModeUserSelection$,
+        hasRemoteScreenShares$,
+        windowMode$,
+      ]).pipe(
+        // Scan to keep track if we have auto-switched already or not.
+        // To allow the user to override the auto-switch by selecting grid mode again.
+        scan<
+          [GridMode, boolean, WindowMode],
+          {
+            mode: GridMode;
+            /** Remember if the change was user driven or not */
+            hasAutoSwitched: boolean;
+            /** To know if it is new screen share or an already handled */
+            hasScreenShares: boolean;
+          }
+        >(
+          (prev, [userSelection, hasScreenShares, windowMode]) => {
+            const isFlatMode = windowMode === "flat";
+
+            // Always force spotlight in flat mode, grid layout is not supported
+            // in that mode.
+            // TODO: strange that we do that for flat mode but not for other modes?
+            // TODO: Why is this not handled in layoutMedia$ like other window modes?
+            if (isFlatMode) {
+              logger.debug(`Forcing spotlight mode, windowMode=${windowMode}`);
+              return {
+                mode: "spotlight",
+                hasAutoSwitched: prev.hasAutoSwitched,
+                hasScreenShares,
+              };
+            }
+
+            // User explicitly chose spotlight.
+            // Respect that choice.
+            if (userSelection === "spotlight") {
+              return {
+                mode: "spotlight",
+                hasAutoSwitched: prev.hasAutoSwitched,
+                hasScreenShares,
+              };
+            }
+
+            // User has chosen grid mode. If a screen share starts, we will
+            // auto-switch to spotlight mode for better experience.
+            // But we only do it once, if the user switches back to grid mode,
+            // we respect that choice until they explicitly change it again.
+            const isNewShare = hasScreenShares && !prev.hasScreenShares;
+            if (isNewShare && !prev.hasAutoSwitched) {
+              return {
+                mode: "spotlight",
+                hasAutoSwitched: true,
+                hasScreenShares: true,
+              };
+            }
+
+            // Respect user's grid choice
+            // XXX If we want to forbid switching automatically again after we can
+            // return hasAutoSwitched: acc.hasAutoSwitched here instead of setting to false.
+            return {
+              mode: "grid",
+              hasAutoSwitched: false,
+              hasScreenShares,
+            };
+          },
+          // initial value
+          { mode: "grid", hasAutoSwitched: false, hasScreenShares: false },
+        ),
+        map(({ mode }) => mode),
+      ),
+      "grid",
+    );
+
+  return {
+    gridMode$,
+    setGridMode,
+  };
+}

src/state/CallViewModel/localMember/LocalMembership.ts

@@ -327,12 +327,14 @@ export const createLocalMembership$ = ({
   //  - overwrite current publisher
   scope.reconcile(localConnection$, async (connection) => {
     if (connection !== null) {
-      publisher$.next(createPublisherFactory(connection));
+      const publisher = createPublisherFactory(connection);
+      publisher$.next(publisher);
+      // Clean-up callback
+      return Promise.resolve(async (): Promise<void> => {
+        await publisher.stopPublishing();
+        publisher.stopTracks();
+      });
     }
-    return Promise.resolve(async (): Promise<void> => {
-      await publisher$?.value?.stopPublishing();
-      publisher$?.value?.stopTracks();
-    });
   });
 
   // Use reconcile here to not run concurrent createAndSetupTracks calls

src/state/CallViewModel/remoteMembers/ConnectionFactory.ts

@@ -7,10 +7,11 @@ Please see LICENSE in the repository root for full details.
 
 import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import {
-  type E2EEOptions,
   Room as LivekitRoom,
   type RoomOptions,
   type BaseKeyProvider,
+  type E2EEManagerOptions,
+  type BaseE2EEManager,
 } from "livekit-client";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 // imported as inline to support worker when loaded from a cdn (cross domain)
@@ -42,8 +43,10 @@ export class ECConnectionFactory implements ConnectionFactory {
    * @param client - The OpenID client parts for authentication, needed to get openID and JWT tokens.
    * @param devices - Used for video/audio out/in capture options.
    * @param processorState$ - Effects like background blur (only for publishing connection?)
-   * @param e2eeLivekitOptions - The E2EE options to use for the LiveKit Room.
+   * @param livekitKeyProvider
    * @param controlledAudioDevices - Option to indicate whether audio output device is controlled externally (native mobile app).
+   * @param echoCancellation - Whether to enable echo cancellation for audio capture.
+   * @param noiseSuppression - Whether to enable noise suppression for audio capture.
    * @param livekitRoomFactory - Optional factory function (for testing) to create LivekitRoom instances. If not provided, a default factory is used.
    */
   public constructor(
@@ -53,20 +56,24 @@ export class ECConnectionFactory implements ConnectionFactory {
     livekitKeyProvider: BaseKeyProvider | undefined,
     private controlledAudioDevices: boolean,
     livekitRoomFactory?: () => LivekitRoom,
+    echoCancellation: boolean = true,
+    noiseSuppression: boolean = true,
   ) {
     const defaultFactory = (): LivekitRoom =>
       new LivekitRoom(
-        generateRoomOption(
-          this.devices,
-          this.processorState$.value,
-          livekitKeyProvider && {
+        generateRoomOption({
+          devices: this.devices,
+          processorState: this.processorState$.value,
+          e2eeLivekitOptions: livekitKeyProvider && {
             keyProvider: livekitKeyProvider,
             // It's important that every room use a separate E2EE worker.
             // They get confused if given streams from multiple rooms.
             worker: new E2EEWorker(),
           },
-          this.controlledAudioDevices,
-        ),
+          controlledAudioDevices: this.controlledAudioDevices,
+          echoCancellation,
+          noiseSuppression,
+        }),
       );
     this.livekitRoomFactory = livekitRoomFactory ?? defaultFactory;
   }
@@ -91,12 +98,24 @@ export class ECConnectionFactory implements ConnectionFactory {
 /**
  *  Generate the initial LiveKit RoomOptions based on the current media devices and processor state.
  */
-function generateRoomOption(
-  devices: MediaDevices,
-  processorState: ProcessorState,
-  e2eeLivekitOptions: E2EEOptions | undefined,
-  controlledAudioDevices: boolean,
-): RoomOptions {
+function generateRoomOption({
+  devices,
+  processorState,
+  e2eeLivekitOptions,
+  controlledAudioDevices,
+  echoCancellation,
+  noiseSuppression,
+}: {
+  devices: MediaDevices;
+  processorState: ProcessorState;
+  e2eeLivekitOptions:
+    | E2EEManagerOptions
+    | { e2eeManager: BaseE2EEManager }
+    | undefined;
+  controlledAudioDevices: boolean;
+  echoCancellation: boolean;
+  noiseSuppression: boolean;
+}): RoomOptions {
   return {
     ...defaultLiveKitOptions,
     videoCaptureDefaults: {
@@ -107,6 +126,8 @@ function generateRoomOption(
     audioCaptureDefaults: {
       ...defaultLiveKitOptions.audioCaptureDefaults,
       deviceId: devices.audioInput.selected$.value?.id,
+      echoCancellation,
+      noiseSuppression,
     },
     audioOutput: {
       // When using controlled audio devices, we don't want to set the

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -10,7 +10,7 @@ import {
   type LivekitTransport,
   type ParticipantId,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, combineLatest, map, of, switchMap, tap } from "rxjs";
+import { combineLatest, map, of, switchMap, tap } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { type LocalParticipant, type RemoteParticipant } from "livekit-client";
 
@@ -123,9 +123,6 @@ export function createConnectionManager$({
   logger: parentLogger,
 }: Props): IConnectionManager {
   const logger = parentLogger.getChild("[ConnectionManager]");
-
-  const running$ = new BehaviorSubject(true);
-  scope.onEnd(() => running$.next(false));
   // TODO logger: only construct one logger from the client and make it compatible via a EC specific sing
 
   /**
@@ -137,10 +134,7 @@ export function createConnectionManager$({
    * externally this is modified via `registerTransports()`.
    */
   const transports$ = scope.behavior(
-    combineLatest([running$, inputTransports$]).pipe(
-      map(([running, transports]) =>
-        transports.mapInner((transport) => (running ? transport : [])),
-      ),
+    inputTransports$.pipe(
       map((transports) => transports.mapInner(removeDuplicateTransports)),
       tap(({ value: transports }) => {
         logger.trace(

src/state/CallViewModel/remoteMembers/ECConnectionFactory.test.ts

@@ -0,0 +1,133 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { Room as LivekitRoom } from "livekit-client";
+import { BehaviorSubject } from "rxjs";
+import fetchMock from "fetch-mock";
+import { logger } from "matrix-js-sdk/lib/logger";
+import EventEmitter from "events";
+
+import { ObservableScope } from "../../ObservableScope.ts";
+import { ECConnectionFactory } from "./ConnectionFactory.ts";
+import type { OpenIDClientParts } from "../../../livekit/openIDSFU.ts";
+import { exampleTransport, mockMediaDevices } from "../../../utils/test.ts";
+import type { ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
+import { constant } from "../../Behavior";
+
+// At the top of your test file, after imports
+vi.mock("livekit-client", async (importOriginal) => {
+  return {
+    ...(await importOriginal()),
+    Room: vi.fn().mockImplementation(function (this: LivekitRoom, options) {
+      const emitter = new EventEmitter();
+      return {
+        on: emitter.on.bind(emitter),
+        off: emitter.off.bind(emitter),
+        emit: emitter.emit.bind(emitter),
+        disconnect: vi.fn(),
+        remoteParticipants: new Map(),
+      } as unknown as LivekitRoom;
+    }),
+  };
+});
+
+let testScope: ObservableScope;
+let mockClient: OpenIDClientParts;
+
+beforeEach(() => {
+  testScope = new ObservableScope();
+  mockClient = {
+    getOpenIdToken: vi.fn().mockReturnValue(""),
+    getDeviceId: vi.fn().mockReturnValue("DEV000"),
+  };
+});
+
+describe("ECConnectionFactory - Audio inputs options", () => {
+  test.each([
+    { echo: true, noise: true },
+    { echo: true, noise: false },
+    { echo: false, noise: true },
+    { echo: false, noise: false },
+  ])(
+    "it sets echoCancellation=$echo and noiseSuppression=$noise based on constructor parameters",
+    ({ echo, noise }) => {
+      // test("it sets echoCancellation and noiseSuppression based on constructor parameters", () => {
+      const RoomConstructor = vi.mocked(LivekitRoom);
+
+      const ecConnectionFactory = new ECConnectionFactory(
+        mockClient,
+        mockMediaDevices({}),
+        new BehaviorSubject<ProcessorState>({
+          supported: true,
+          processor: undefined,
+        }),
+        undefined,
+        false,
+        undefined,
+        echo,
+        noise,
+      );
+      ecConnectionFactory.createConnection(exampleTransport, testScope, logger);
+
+      // Check if Room was constructed with expected options
+      expect(RoomConstructor).toHaveBeenCalledWith(
+        expect.objectContaining({
+          audioCaptureDefaults: expect.objectContaining({
+            echoCancellation: echo,
+            noiseSuppression: noise,
+          }),
+        }),
+      );
+    },
+  );
+});
+
+describe("ECConnectionFactory - ControlledAudioDevice", () => {
+  test.each([{ controlled: true }, { controlled: false }])(
+    "it sets controlledAudioDevice=$controlled then uses deviceId accordingly",
+    ({ controlled }) => {
+      // test("it sets echoCancellation and noiseSuppression based on constructor parameters", () => {
+      const RoomConstructor = vi.mocked(LivekitRoom);
+
+      const ecConnectionFactory = new ECConnectionFactory(
+        mockClient,
+        mockMediaDevices({
+          audioOutput: {
+            available$: constant(new Map<never, never>()),
+            selected$: constant({ id: "DEV00", virtualEarpiece: false }),
+            select: () => {},
+          },
+        }),
+        new BehaviorSubject<ProcessorState>({
+          supported: true,
+          processor: undefined,
+        }),
+        undefined,
+        controlled,
+        undefined,
+        false,
+        false,
+      );
+      ecConnectionFactory.createConnection(exampleTransport, testScope, logger);
+
+      // Check if Room was constructed with expected options
+      expect(RoomConstructor).toHaveBeenCalledWith(
+        expect.objectContaining({
+          audioOutput: expect.objectContaining({
+            deviceId: controlled ? undefined : "DEV00",
+          }),
+        }),
+      );
+    },
+  );
+});
+
+afterEach(() => {
+  testScope.end();
+  fetchMock.reset();
+});

src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts

@@ -108,7 +108,7 @@ export function createMatrixLivekitMembers$({
         // Each update where the key of the generator array do not change will result in updates to the `data$` observable in the factory.
         (scope, data$, participantId, userId) => {
           logger.debug(
-            `Updating data$ for participantId: ${participantId}, userId: ${userId}`,
+            `Generating member for participantId: ${participantId}, userId: ${userId}`,
           );
           // will only get called once per `participantId, userId` pair.
           // updates to data$ and as a result to displayName$ and mxcAvatarUrl$ are more frequent.