Merge pull request #3856 from element-hq/toger5/move-settings-out-of-bottom-bar

Move settings button out of the button bar (space for loud-speaker button)

playwright/mobile/create-call-mobile.spec.ts

@@ -98,7 +98,9 @@ mobileTest(
 
     // Open settings to select earpiece
     await guestPage.getByRole("button", { name: "Settings" }).click();
-    await guestPage.getByText("Handset", { exact: true }).click();
+    await guestPage
+      .getByRole("radio", { name: "Handset", exact: true })
+      .click();
 
     // dismiss settings
     await guestPage.locator("#root").getByLabel("Settings").press("Escape");

src/AppBar.tsx

@@ -68,8 +68,8 @@ export const AppBar: FC<Props> = ({ children }) => {
         >
           <LeftNav>
             <Tooltip label={t("common.back")}>
-              <IconButton onClick={onBackClick}>
+              <IconButton size="24px" onClick={onBackClick}>
-                <CollapseIcon />
+                <CollapseIcon aria-hidden />
               </IconButton>
             </Tooltip>
           </LeftNav>

src/__snapshots__/AppBar.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`AppBar > renders 1`] = `
           class="_icon-button_1215g_8"
           data-kind="primary"
           role="button"
-          style="--cpd-icon-button-size: 32px;"
+          style="--cpd-icon-button-size: 24px;"
           tabindex="0"
         >
           <div
@@ -25,6 +25,7 @@ exports[`AppBar > renders 1`] = `
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"

src/button/Button.tsx

@@ -8,7 +8,11 @@ Please see LICENSE in the repository root for full details.
 import { type ComponentPropsWithoutRef, type FC } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
-import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
+import {
+  Button as CpdButton,
+  IconButton,
+  Tooltip,
+} from "@vector-im/compound-web";
 import {
   MicOnSolidIcon,
   MicOffSolidIcon,
@@ -16,10 +20,12 @@ import {
   VideoCallOffSolidIcon,
   EndCallIcon,
   ShareScreenSolidIcon,
-  SettingsSolidIcon,
+  OverflowHorizontalIcon,
+  OverflowVerticalIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
+import { platform } from "../Platform";
 
 interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
@@ -124,20 +130,32 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
   );
 };
 
-interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
+interface SettingsIconButtonProps extends ComponentPropsWithoutRef<"button"> {
-  size?: "sm" | "lg";
+  kind?: "secondary" | "primary";
 }
-export const SettingsButton: FC<SettingsButtonProps> = (props) => {
+export const SettingsIconButton: FC<SettingsIconButtonProps> = (props) => {
   const { t } = useTranslation();
-
+  const Icon =
+    platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
   return (
     <Tooltip label={t("common.settings")}>
-      <CpdButton
+      <IconButton {...props}>
-        iconOnly
+        <Icon aria-hidden />
-        Icon={SettingsSolidIcon}
+      </IconButton>
-        kind="secondary"
-        {...props}
-      />
     </Tooltip>
   );
 };
+
+// interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
+//   size?: "sm" | "lg";
+// }
+// const SettingsButton: FC<SettingsButtonProps> = (props) => {
+//   const { t } = useTranslation();
+//   const Icon =
+//     platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
+//   return (
+//     <Tooltip label={t("common.settings")}>
+//       <CpdButton iconOnly Icon={Icon} kind="secondary" {...props} />
+//     </Tooltip>
+//   );
+// };

src/room/CallEventAudioRenderer.test.tsx

@@ -123,6 +123,7 @@ test("does not play a sound before the call is successful", () => {
   const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment(
     [local, alice],
     [localRtcMember],
+    undefined,
     { waitForCallPickup: true },
   );
   render(<CallEventAudioRenderer vm={vm} />);

src/room/InCallView.module.css

@@ -36,13 +36,11 @@ Please see LICENSE in the repository root for full details.
   inset-block-end: 0;
   z-index: var(--call-view-header-footer-layer);
   display: grid;
-  grid-template-columns:
+  grid-template-columns: 1fr auto 1fr;
-    minmax(0, var(--inline-content-inset))
+  grid-template-areas: ". buttons layout";
-    1fr auto 1fr minmax(0, var(--inline-content-inset));
-  grid-template-areas: ". logo buttons layout .";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding-block: var(--cpd-space-10x);
+  padding: var(--cpd-space-10x) var(--cpd-space-6x);
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -77,8 +75,14 @@ Please see LICENSE in the repository root for full details.
   pointer-events: initial;
 }
 
+.settingsLogoContainer {
+  display: flex;
+  gap: var(--cpd-space-4x);
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
 .logo {
-  grid-area: logo;
   justify-self: start;
   display: flex;
   align-items: center;
@@ -98,14 +102,25 @@ Please see LICENSE in the repository root for full details.
   justify-self: end;
 }
 
-@media (max-width: 660px) {
+/*First hide the logo*/
-  .footer {
+@media (max-width: 750px) {
-    grid-template-areas: ". buttons buttons buttons .";
-  }
-
   .logo {
     display: none;
   }
+}
+
+/*
+With the logo hidden >500px is enough space to show overflow, buttons, layout.
+Once we exceed 500 we hide everything except the buttons.
+*/
+@media (max-width: 500px) {
+  .footer {
+    grid-template-areas: "buttons buttons buttons";
+  }
+
+  /*.settingsLogoContainer {
+    display: none;
+  }*/
 
   .layout {
     display: none !important;

src/room/InCallView.test.tsx

@@ -15,20 +15,17 @@ import {
   vi,
 } from "vitest";
 import { render, type RenderResult } from "@testing-library/react";
-import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
-import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
 import { type LocalParticipant } from "livekit-client";
-import { of } from "rxjs";
+import { BehaviorSubject, of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { RoomContext, useLocalParticipant } from "@livekit/components-react";
+import userEvent from "@testing-library/user-event";
 
 import { InCallView } from "./InCallView";
 import {
   mockLivekitRoom,
   mockLocalParticipant,
-  mockMatrixRoom,
-  mockMatrixRoomMember,
   mockMediaDevices,
   mockMuteStates,
   mockRemoteParticipant,
@@ -43,7 +40,9 @@ import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { HeaderStyle } from "../UrlParams";
+import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
 import { initializeWidget } from "../widget";
+
 initializeWidget();
 vi.hoisted(
   () =>
@@ -71,10 +70,7 @@ const localParticipant = mockLocalParticipant({
 const remoteParticipant = mockRemoteParticipant({
   identity: "@alice:example.org:AAAAAA",
 });
-const carol = mockMatrixRoomMember(localRtcMember);
-const roomMembers = new Map([carol].map((p) => [p.userId, p]));
 
-const roomId = "!foo:bar";
 let useRoomEncryptionSystemMock: MockedFunction<typeof useRoomEncryptionSystem>;
 
 beforeEach(() => {
@@ -99,36 +95,13 @@ beforeEach(() => {
     useRoomEncryptionSystem as typeof useRoomEncryptionSystemMock;
   useRoomEncryptionSystemMock.mockReturnValue({ kind: E2eeType.NONE });
 });
-
+interface CreateInCallViewArgs {
-function createInCallView(): RenderResult & {
+  mediaDevices?: ECMediaDevices;
+}
+function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   rtcSession: MockRTCSession;
 } {
-  const client = {
+  const mediaDevices = args.mediaDevices ?? mockMediaDevices({});
-    getUser: () => null,
-    getUserId: () => localRtcMember.userId,
-    getDeviceId: () => localRtcMember.deviceId,
-    getRoom: (rId) => (rId === roomId ? room : null),
-    getDomain: () => "example.com",
-  } as Partial<MatrixClient> as MatrixClient;
-  const room = mockMatrixRoom({
-    relations: {
-      getChildEventsForEvent: () =>
-        vi.mocked({
-          getRelations: () => [],
-        }),
-    } as unknown as RelationsContainer,
-    client,
-    roomId,
-    // getMember: (userId) => roomMembers.get(userId) ?? null,
-    getMembers: () => Array.from(roomMembers.values()),
-    getMxcAvatarUrl: () => null,
-    hasEncryptionStateEvent: vi.fn().mockReturnValue(true),
-    getCanonicalAlias: () => null,
-    currentState: {
-      getJoinRule: () => JoinRule.Invite,
-    } as Partial<RoomState> as RoomState,
-  });
-
   const muteState = mockMuteStates();
   const livekitRoom = mockLivekitRoom(
     {
@@ -138,12 +111,19 @@ function createInCallView(): RenderResult & {
       remoteParticipants$: of([remoteParticipant]),
     },
   );
-  const { vm, rtcSession } = getBasicCallViewModelEnvironment([local, alice]);
+  const { vm, rtcSession } = getBasicCallViewModelEnvironment(
+    [local, alice],
+    undefined,
+    mediaDevices,
+    {},
+  );
 
   rtcSession.joined = true;
+  const room = rtcSession.room;
+  const client = room.client;
   const renderResult = render(
     <BrowserRouter>
-      <MediaDevicesContext value={mockMediaDevices({})}>
+      <MediaDevicesContext value={mediaDevices}>
         <ReactionsSenderProvider
           vm={vm}
           rtcSession={rtcSession.asMockedSession()}
@@ -190,4 +170,41 @@ describe("InCallView", () => {
       expect(container).toMatchSnapshot();
     });
   });
+  describe("audioOutputSwitcher", () => {
+    it("is visible and can be clicked", async () => {
+      const user = userEvent.setup();
+      const switchFn = vi.fn();
+      // Create mediaDevices with a speaker and an earpiece available,
+      // with the speaker currently selected.
+      // This is needed so that the audio switcher button is visible
+      const available$ = new BehaviorSubject(
+        new Map<string, { type: "speaker" } | { type: "earpiece" }>([
+          ["speaker-id", { type: "speaker" }],
+          ["earpiece-id", { type: "earpiece" }],
+        ]),
+      );
+      const selected$ = new BehaviorSubject<
+        { id: string; virtualEarpiece: boolean } | undefined
+      >({ id: "speaker-id", virtualEarpiece: false });
+
+      const mediaDevices = mockMediaDevices({
+        audioOutput: {
+          available$,
+          selected$,
+          select: switchFn,
+        },
+      });
+
+      const { getByRole } = createInCallView({ mediaDevices });
+      // The button should be visible. When current output is "speaker",
+      // the switcher targets "earpiece", so the tooltip label is "Handset".
+      const audioOutputBtn = getByRole("button", { name: "Handset" });
+      expect(audioOutputBtn).toBeVisible();
+
+      await user.click(audioOutputBtn);
+
+      // Clicking the button should call select -> switchFn with the earpiece device id
+      expect(switchFn).toHaveBeenCalledWith("earpiece-id");
+    });
+  });
 });

src/room/InCallView.tsx

@@ -38,11 +38,11 @@ import {
   MicButton,
   VideoButton,
   ShareScreenButton,
-  SettingsButton,
   ReactionToggleButton,
+  SettingsIconButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { type HeaderStyle, useUrlParams } from "../UrlParams";
+import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { widget } from "../widget";
 import styles from "./InCallView.module.css";
@@ -373,30 +373,6 @@ export const InCallView: FC<InCallViewProps> = ({
     [vm],
   );
 
-  useAppBarSecondaryButton(
-    useMemo(() => {
-      if (audioOutputSwitcher === null) return null;
-      const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
-      const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
-      const label = isEarpieceTarget
-        ? t("settings.devices.handset")
-        : t("settings.devices.loudspeaker");
-
-      return (
-        <Tooltip label={label}>
-          <IconButton
-            onClick={(e) => {
-              e.preventDefault();
-              audioOutputSwitcher.switch();
-            }}
-          >
-            <Icon />
-          </IconButton>
-        </Tooltip>
-      );
-    }, [t, audioOutputSwitcher]),
-  );
-
   useAppBarHidden(!showHeader);
 
   let header: ReactNode = null;
@@ -643,13 +619,33 @@ export const InCallView: FC<InCallViewProps> = ({
       />,
     );
   }
-  if (layout.type !== "pip")
+
-    buttons.push(
+  // In this PR we just move the button ot the bottom bar. We do not yet update its apperance
-      <SettingsButton
+  const audioOutputButton = useMemo(() => {
-        size={buttonSize}
+    if (audioOutputSwitcher === null) return null;
-        key="settings"
+    const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
-        onClick={openSettings}
+    const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
-      />,
+    const label = isEarpieceTarget
+      ? t("settings.devices.handset")
+      : t("settings.devices.loudspeaker");
+
+    return (
+      <Tooltip label={label}>
+        <IconButton
+          key="audio_output_switcher"
+          onClick={(e) => {
+            audioOutputSwitcher.switch();
+          }}
+        >
+          <Icon />
+        </IconButton>
+      </Tooltip>
+    );
+  }, [t, audioOutputSwitcher]);
+  if (audioOutputButton) buttons.push(audioOutputButton);
+
+  useAppBarSecondaryButton(
+    <SettingsIconButton key="settings" onClick={openSettings} />,
   );
 
   buttons.push(
@@ -662,6 +658,20 @@ export const InCallView: FC<InCallViewProps> = ({
       data-testid="incall_leave"
     />,
   );
+
+  const logo = (
+    <div className={styles.logo}>
+      <LogoMark width={24} height={24} aria-hidden />
+      <LogoType
+        width={80}
+        height={11}
+        aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+      />
+      {/* Don't mind this odd placement, it's just a little debug label */}
+      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
+    </div>
+  );
+
   const footer = (
     <div
       ref={footerRef}
@@ -671,20 +681,21 @@ export const InCallView: FC<InCallViewProps> = ({
           !showFooter || (!showControls && headerStyle === "none"),
       })}
     >
-      {headerStyle !== "none" && (
+      <div className={styles.settingsLogoContainer}>
-        <div className={styles.logo}>
+        {showControls &&
-          <LogoMark width={24} height={24} aria-hidden />
+          // Settings button is also shown in the app bar if present
-          <LogoType
+          headerStyle !== HeaderStyle.AppBar &&
-            width={80}
+          layout.type !== "pip" && (
-            height={11}
+            <SettingsIconButton
-            aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+              kind="secondary"
+              key="settings"
+              onClick={openSettings}
             />
-          {/* Don't mind this odd placement, it's just a little debug label */}
-          {debugTileLayout
-            ? `Tiles generation: ${tileStoreGeneration}`
-            : undefined}
-        </div>
           )}
+
+        {headerStyle !== "none" && logo}
+      </div>
+
       {showControls && <div className={styles.buttons}>{buttons}</div>}
       {showControls && (
         <LayoutToggle

src/room/LobbyView.tsx

@@ -36,7 +36,7 @@ import { InviteButton } from "../button/InviteButton";
 import {
   EndCallButton,
   MicButton,
-  SettingsButton,
+  SettingsIconButton,
   VideoButton,
 } from "../button/Button";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -228,6 +228,7 @@ export const LobbyView: FC<Props> = ({
         </div>
         <div className={inCallStyles.footer}>
           {recentsButtonInFooter && recentsButton}
+          <SettingsIconButton kind="secondary" onClick={openSettings} />
           <div className={inCallStyles.buttons}>
             <MicButton
               enabled={audioEnabled}
@@ -239,7 +240,6 @@ export const LobbyView: FC<Props> = ({
               onClick={toggleVideo ?? undefined}
               disabled={toggleVideo === null}
             />
-            <SettingsButton onClick={openSettings} />
             {!confineToRoom && <EndCallButton onClick={onLeaveClick} />}
           </div>
         </div>

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

@@ -165,6 +165,35 @@ exports[`InCallView > rendering > renders 1`] = `
     <div
       class="footer"
     >
+      <div
+        class="settingsLogoContainer"
+      >
+        <button
+          aria-labelledby="_r_8_"
+          class="_icon-button_1215g_8"
+          data-kind="secondary"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              />
+            </svg>
+          </div>
+        </button>
         <div
           class="logo"
         >
@@ -269,13 +298,14 @@ exports[`InCallView > rendering > renders 1`] = `
             </g>
           </svg>
         </div>
+      </div>
       <div
         class="buttons"
       >
         <button
           aria-checked="false"
           aria-disabled="true"
-          aria-labelledby="_r_8_"
+          aria-labelledby="_r_d_"
           class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
           data-kind="secondary"
           data-size="lg"
@@ -299,7 +329,7 @@ exports[`InCallView > rendering > renders 1`] = `
         <button
           aria-checked="false"
           aria-disabled="true"
-          aria-labelledby="_r_d_"
+          aria-labelledby="_r_i_"
           class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
           data-kind="secondary"
           data-size="lg"
@@ -320,27 +350,6 @@ exports[`InCallView > rendering > renders 1`] = `
             />
           </svg>
         </button>
-        <button
-          aria-labelledby="_r_i_"
-          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
-          data-kind="secondary"
-          data-size="lg"
-          role="button"
-          tabindex="0"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286q.128.052.253.106c.531.23 1.162.16 1.572-.25a1.27 1.27 0 0 1 1.794 0l1.034 1.035a1.27 1.27 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572l.105.253c.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935q-.05.128-.104.253c-.232.531-.161 1.162.248 1.572a1.27 1.27 0 0 1 0 1.794l-1.034 1.034a1.27 1.27 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a8 8 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a8 8 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.27 1.27 0 0 1-1.794 0l-1.034-1.034a1.27 1.27 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a8 8 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935q.052-.128.106-.253c.23-.531.16-1.162-.25-1.572a1.27 1.27 0 0 1 0-1.794l1.035-1.034a1.27 1.27 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a8 8 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
-            />
-          </svg>
-        </button>
         <button
           aria-labelledby="_r_n_"
           class="_button_13vu4_8 endCall _has-icon_13vu4_60 _icon-only_13vu4_53 _destructive_13vu4_110"

src/utils/test-viewmodel.ts

@@ -34,6 +34,7 @@ import {
   MockRTCSession,
   testScope,
 } from "./test";
+import { type MediaDevices } from "../state/MediaDevices";
 import { aliceRtcMember, localRtcMember } from "./test-fixtures";
 import { type RaisedHandInfo, type ReactionInfo } from "../reactions";
 import { constant } from "../state/Behavior";
@@ -63,6 +64,7 @@ export function getBasicRTCSession(
       getDeviceId: () => localRtcMember.deviceId,
       getSyncState: () => SyncState.Syncing,
       getDomain: () => null,
+      getAccessToken: () => "fake-token",
       sendEvent: vitest.fn().mockResolvedValue({ event_id: "$fake:event" }),
       redactEvent: vitest.fn().mockResolvedValue({ event_id: "$fake:event" }),
       decryptEventIfNeeded: vitest.fn().mockResolvedValue(undefined),
@@ -130,6 +132,7 @@ export function getBasicRTCSession(
 export function getBasicCallViewModelEnvironment(
   members: RoomMember[],
   initialRtcMemberships: CallMembership[] = [localRtcMember, aliceRtcMember],
+  mediaDevicesOverride?: MediaDevices,
   callViewModelOptions: Partial<CallViewModelOptions> = {},
 ): {
   vm: CallViewModel;
@@ -145,13 +148,11 @@ export function getBasicCallViewModelEnvironment(
   const handRaisedSubject$ = new BehaviorSubject({});
   const reactionsSubject$ = new BehaviorSubject({});
 
-  // const remoteParticipants$ = of([aliceParticipant]);
-
   const vm = createCallViewModel$(
     testScope(),
     rtcSession.asMockedSession(),
     matrixRoom,
-    mockMediaDevices({}),
+    mediaDevicesOverride ?? mockMediaDevices({}),
     mockMuteStates(),
     {
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },