Fix footer stories

Update all non-major dependencies

embedded/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.5-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

locales/en/app.json

@@ -238,7 +238,6 @@
   "stop_video_button_label": "Stop video",
   "submitting": "Submitting…",
   "switch_camera": "Switch camera",
-  "technical_details": "Technical details",
   "unauthenticated_view_body": "Not registered yet? <2>Create an account</2>",
   "unauthenticated_view_login_button": "Login to your account",
   "unauthenticated_view_ssla_caption": "By clicking \"Go\", you agree to our <2>Software and Services License Agreement (SSLA)</2>",

package.json

@@ -88,7 +88,7 @@
     "@vitejs/plugin-react": "^4.0.1",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.0.18",
-    "@vitest/ui": "4.1.5",
+    "@vitest/ui": "4.1.7",
     "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
@@ -142,7 +142,7 @@
     "vite": "^8.0.0",
     "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
-    "vite-plugin-node-polyfills": "^0.26.0",
+    "vite-plugin-node-polyfills": "^0.28.0",
     "vite-plugin-node-stdlib-browser": "^0.2.1",
     "vite-plugin-svgr": "^4.0.0",
     "vite-plugin-wasm": "^3.6.0",

src/ErrorView.module.css

@@ -20,21 +20,3 @@
   color: var(--cpd-color-text-secondary);
   text-align: center;
 }
-
-.technicalDetails {
-  margin-top: var(--cpd-space-1x);
-}
-
-.technicalDetailsSummary {
-  cursor: pointer;
-  font-weight: bold;
-}
-
-.technicalDetailsPre {
-  margin-top: var(--cpd-space-2x);
-  padding: var(--cpd-space-2x);
-  background-color: var(--cpd-color-bg-subtle-secondary);
-  overflow: auto;
-  font-size: var(--cpd-font-size-body-sm);
-  white-space: pre-wrap;
-}

src/components/CallFooter.stories.tsx

@@ -17,6 +17,9 @@ import { useStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
 import { type GridMode } from "../state/CallViewModel/CallViewModel";
+import { MediaDevicesContext } from "../MediaDevicesContext";
+import { MediaDevices } from "../state/MediaDevices";
+import { globalScope } from "../state/ObservableScope";
 // consts for tests
 const reactionIdentifier = "@user:example.com:DEVICE";
 const reactionData = {
@@ -24,6 +27,8 @@ const reactionData = {
   reactions$: new BehaviorSubject({}),
 };
 
+const mediaDevices = new MediaDevices(globalScope);
+
 /**
  * A wrapper component that is used for:
  *  - exposing the snapshot via props so the storybook documents the snapshot properties (basically unpack them form the vm)
@@ -41,17 +46,19 @@ function CallFooterStoryWrapper({
 }): ReactNode {
   const vm = useStaticViewModel(vmSnapshot);
   return (
-    <div className={inCallViewStyles.inRoom}>
-      <ReactionsSenderContext
-        value={{
-          supportsReactions: false,
-          toggleRaisedHand: async () => Promise.resolve(),
-          sendReaction: async (reaction: ReactionOption) => Promise.resolve(),
-        }}
-      >
-        <CallFooter vm={vm} />
-      </ReactionsSenderContext>
-    </div>
+    <MediaDevicesContext value={mediaDevices}>
+      <div className={inCallViewStyles.inRoom}>
+        <ReactionsSenderContext
+          value={{
+            supportsReactions: false,
+            toggleRaisedHand: async () => Promise.resolve(),
+            sendReaction: async (reaction: ReactionOption) => Promise.resolve(),
+          }}
+        >
+          <CallFooter vm={vm} />
+        </ReactionsSenderContext>
+      </div>
+    </MediaDevicesContext>
   );
 }
 

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -6,12 +6,25 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { fn, userEvent, within, expect } from "storybook/test";
+import { type JSX } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
+import { MediaDevicesContext } from "../MediaDevicesContext";
+import { MediaDevices } from "../state/MediaDevices";
+import { globalScope } from "../state/ObservableScope";
+
+const mediaDevices = new MediaDevices(globalScope);
 
 const meta = {
   component: MediaMuteAndSwitchButton,
+  decorators: [
+    (Story): JSX.Element => (
+      <MediaDevicesContext value={mediaDevices}>
+        <Story />
+      </MediaDevicesContext>
+    ),
+  ],
 } satisfies Meta<typeof MediaMuteAndSwitchButton>;
 
 export default meta;

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -8,14 +8,35 @@ Please see LICENSE in the repository root for full details.
 import { describe, expect, test, vi } from "vitest";
 import { act, render, screen, type RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { type JSX, useState } from "react";
+import { type JSX, useState, type ReactNode } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
 import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
+import { MediaDevicesContext } from "../MediaDevicesContext";
+import { type MediaDevices } from "../state/MediaDevices";
+
+interface RenderOptions {
+  requestDeviceNames: () => void;
+}
+
+function renderComponent(
+  component: ReactNode,
+  { requestDeviceNames = (): void => {} }: Partial<RenderOptions> = {},
+): RenderResult {
+  return render(
+    <TooltipProvider>
+      <MediaDevicesContext
+        value={{ requestDeviceNames } as unknown as MediaDevices}
+      >
+        {component}
+      </MediaDevicesContext>
+    </TooltipProvider>,
+  );
+}
 
 describe("MediaMuteAndSwitchButton", () => {
   test("renders", () => {
-    const { container } = render(
+    const { container } = renderComponent(
       <TooltipProvider>
         <MediaMuteAndSwitchButton title={"Switcher"} iconsAndLabels={"audio"} />
       </TooltipProvider>,
@@ -28,14 +49,12 @@ describe("MediaMuteAndSwitchButton", () => {
       type: "video" | "audio",
       enabled: boolean,
     ): RenderResult => {
-      return render(
-        <TooltipProvider>
-          <MediaMuteAndSwitchButton
-            title={"Switcher"}
-            iconsAndLabels={type}
-            enabled={enabled}
-          />
-        </TooltipProvider>,
+      return renderComponent(
+        <MediaMuteAndSwitchButton
+          title={"Switcher"}
+          iconsAndLabels={type}
+          enabled={enabled}
+        />,
       );
     };
     const renderAudioEndabled = renderLabels("audio", true);
@@ -60,15 +79,13 @@ describe("MediaMuteAndSwitchButton", () => {
   test("calls mute on mute press", async () => {
     const user = userEvent.setup();
     const onMute = vi.fn();
-    const { getByRole } = render(
-      <TooltipProvider>
-        <MediaMuteAndSwitchButton
-          title={"Switcher"}
-          onMuteClick={onMute}
-          iconsAndLabels="audio"
-          enabled={true}
-        />
-      </TooltipProvider>,
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        title={"Switcher"}
+        onMuteClick={onMute}
+        iconsAndLabels="audio"
+        enabled={true}
+      />,
     );
 
     await user.click(getByRole("switch", { name: "Mute microphone" }));
@@ -76,23 +93,74 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(onMute).toHaveBeenCalled();
   });
 
-  test("calls select callback on menu click", async () => {
+  test("requests device names when opened", async () => {
     const user = userEvent.setup();
-    const onSelect = vi.fn();
-    const { getByRole } = render(
-      <TooltipProvider>
+    const requestDeviceNames = vi.fn();
+    renderComponent(
+      <MediaMuteAndSwitchButton
+        title="Switcher"
+        iconsAndLabels="audio"
+        enabled
+      />,
+      { requestDeviceNames },
+    );
+
+    expect(requestDeviceNames).not.toHaveBeenCalled();
+    await user.click(screen.getByRole("button", { name: "Microphone" }));
+    expect(requestDeviceNames).toHaveBeenCalled();
+  });
+
+  test("shows numbered devices correctly", async () => {
+    const user = userEvent.setup();
+    renderComponent(
+      <>
         <MediaMuteAndSwitchButton
           title="Switcher"
           iconsAndLabels="audio"
-          enabled={true}
+          enabled
           options={[
-            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+            { label: { type: "number", number: 1 }, id: "mic1" },
+            { label: { type: "number", number: 2 }, id: "mic2" },
           ]}
           selectedOption="mic1"
-          onSelect={onSelect}
         />
-      </TooltipProvider>,
+        <MediaMuteAndSwitchButton
+          title="Switcher"
+          iconsAndLabels="video"
+          enabled
+          options={[
+            { label: { type: "number", number: 1 }, id: "cam1" },
+            { label: { type: "number", number: 2 }, id: "cam2" },
+          ]}
+          selectedOption="cam1"
+        />
+      </>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Microphone" }));
+    screen.getByRole("menuitem", { name: "Microphone 1" });
+    screen.getByRole("menuitem", { name: "Microphone 2" });
+    await user.keyboard("[Escape]");
+    await user.click(screen.getByRole("button", { name: "Camera" }));
+    screen.getByRole("menuitem", { name: "Camera 1" });
+    screen.getByRole("menuitem", { name: "Camera 2" });
+  });
+
+  test("calls select callback on menu click", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        title="Switcher"
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={onSelect}
+      />,
     );
 
     await user.click(getByRole("button", { name: "Microphone" }));
@@ -103,20 +171,18 @@ describe("MediaMuteAndSwitchButton", () => {
   test("does not call select callback on already selected menu click", async () => {
     const user = userEvent.setup();
     const onSelect = vi.fn();
-    const { getByRole } = render(
-      <TooltipProvider>
-        <MediaMuteAndSwitchButton
-          title="Switcher"
-          iconsAndLabels="audio"
-          enabled={true}
-          options={[
-            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-          ]}
-          selectedOption="mic1"
-          onSelect={onSelect}
-        />
-      </TooltipProvider>,
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        title="Switcher"
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={onSelect}
+      />,
     );
 
     await user.click(getByRole("button", { name: "Microphone" }));
@@ -133,29 +199,27 @@ describe("MediaMuteAndSwitchButton", () => {
     function Wrapper(): JSX.Element {
       const [selectedOption, setSelectedOption] = useState("mic1");
       return (
-        <TooltipProvider>
-          <MediaMuteAndSwitchButton
-            title="Switcher"
-            iconsAndLabels="audio"
-            enabled={true}
-            options={[
-              { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-              { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-            ]}
-            selectedOption={selectedOption}
-            onSelect={(id) => {
-              onSelectPressed();
-              void promise.then(() => {
-                setSelectedOption(id);
-                onOptionUpdated();
-              });
-            }}
-          />
-        </TooltipProvider>
+        <MediaMuteAndSwitchButton
+          title="Switcher"
+          iconsAndLabels="audio"
+          enabled={true}
+          options={[
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+          ]}
+          selectedOption={selectedOption}
+          onSelect={(id) => {
+            onSelectPressed();
+            void promise.then(() => {
+              setSelectedOption(id);
+              onOptionUpdated();
+            });
+          }}
+        />
       );
     }
 
-    const { getByRole } = render(<Wrapper />);
+    const { getByRole } = renderComponent(<Wrapper />);
 
     await user.click(getByRole("button", { name: "Microphone" }));
     await user.click(screen.getByRole("menuitem", { name: "Microphone 2" }));
@@ -188,16 +252,14 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const onSelect = vi.fn();
     const onVideoBlurToggle = vi.fn();
-    const { getByRole } = render(
-      <TooltipProvider>
-        <MediaMuteAndSwitchButton
-          title="Switcher"
-          iconsAndLabels="video"
-          enabled={true}
-          videoBlurToggleClick={onVideoBlurToggle}
-          onSelect={onSelect}
-        />
-      </TooltipProvider>,
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        title="Switcher"
+        iconsAndLabels="video"
+        enabled={true}
+        videoBlurToggleClick={onVideoBlurToggle}
+        onSelect={onSelect}
+      />,
     );
 
     await user.click(getByRole("button", { name: "Camera" }));
@@ -215,19 +277,17 @@ describe("MediaMuteAndSwitchButton", () => {
 
   test("renders check icon to mark the selected menu item", async () => {
     const user = userEvent.setup();
-    const { getByRole } = render(
-      <TooltipProvider>
-        <MediaMuteAndSwitchButton
-          title="Switcher"
-          iconsAndLabels="audio"
-          enabled={true}
-          options={[
-            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-          ]}
-          selectedOption="mic2"
-        />
-      </TooltipProvider>,
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        title="Switcher"
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic2"
+      />,
     );
 
     // open menu

src/components/MediaMuteAndSwitchButton.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentType, useState, type FC } from "react";
+import { type ComponentType, useState, type FC, useEffect } from "react";
 import {
   Button,
   Menu,
@@ -26,6 +26,7 @@ import { useTranslation } from "react-i18next";
 import styles from "./MediaMuteAndSwitchButton.module.css";
 import { MicButton, VideoButton } from "../button";
 import { type DeviceLabel } from "../state/MediaDevices";
+import { useMediaDevices } from "../MediaDevicesContext";
 
 export interface MenuOptions {
   label: DeviceLabel;
@@ -69,6 +70,12 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
   const [plannedSelection, setPlannedSelection] = useState<string | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
   const { t } = useTranslation();
+  const devices = useMediaDevices();
+
+  useEffect(() => {
+    if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
+  }, [menuOpen, devices]);
+
   let button;
   let toggles: { label: string; enabled: boolean; id: string }[] = [];
   switch (iconsAndLabels) {
@@ -119,15 +126,16 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
       IconOptions = VideoCallIcon;
       optionsButtonLabel = t("settings.devices.camera");
       numberedLabel = (n): string =>
-        t("settings.devices.microphone_numbered", { n });
+        t("settings.devices.camera_numbered", { n });
       break;
     case "audio":
       IconOptions = MicOnIcon;
       optionsButtonLabel = t("settings.devices.microphone");
       numberedLabel = (n): string =>
-        t("settings.devices.camera_numbered", { n });
+        t("settings.devices.microphone_numbered", { n });
       break;
   }
+
   return (
     <div
       className={classNames({

src/livekit/openIDSFU.test.ts

@@ -15,7 +15,6 @@ import {
   vitest,
 } from "vitest";
 import fetchMock from "fetch-mock";
-import { MatrixError } from "matrix-js-sdk";
 
 import { getSFUConfigWithOpenID, type OpenIDClientParts } from "./openIDSFU";
 import { testJWTToken } from "../utils/test-fixtures";
@@ -64,10 +63,7 @@ describe("getSFUConfigWithOpenID", () => {
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
       return {
         status: 500,
-        body: {
-          errcode: "M_LOOKUP_FAILED",
-          error: "Failed to look up user info from homeserver",
-        },
+        body: { error: "Test failure" },
       };
     });
     try {
@@ -79,12 +75,9 @@ describe("getSFUConfigWithOpenID", () => {
       );
     } catch (ex: unknown) {
       expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
-      expect((ex as FailToGetOpenIdToken).cause).toBeInstanceOf(MatrixError);
-      const mxError = (ex as Error).cause as MatrixError;
-      expect(mxError.message).toEqual(
-        "MatrixError: [500] Failed to look up user info from homeserver",
+      expect((ex as FailToGetOpenIdToken).cause).toEqual(
+        new Error("SFU Config fetch failed with status code 500"),
       );
-
       void (await fetchMock.flush());
       return;
     }
@@ -188,19 +181,13 @@ describe("getSFUConfigWithOpenID", () => {
     fetchMock.post("https://sfu.example.org/get_token", () => {
       return {
         status: 500,
-        body: {
-          errcode: "M_LOOKUP_FAILED",
-          error: "Failed to look up user info from homeserver",
-        },
+        body: { error: "Test failure" },
       };
     });
     fetchMock.post("https://sfu.example.org/sfu/get", () => {
       return {
         status: 500,
-        body: {
-          errcode: "M_LOOKUP_FAILED",
-          error: "Failed to look up user info from homeserver",
-        },
+        body: { error: "Test failure" },
       };
     });
     try {
@@ -216,10 +203,8 @@ describe("getSFUConfigWithOpenID", () => {
       );
     } catch (ex) {
       expect(ex).toBeInstanceOf(FailToGetOpenIdToken);
-      expect((ex as FailToGetOpenIdToken).cause).toBeInstanceOf(MatrixError);
-      const mxError = (ex as Error).cause as MatrixError;
-      expect(mxError.message).toEqual(
-        "MatrixError: [500] Failed to look up user info from homeserver",
+      expect((ex as FailToGetOpenIdToken).cause).toEqual(
+        new Error("SFU Config fetch failed with status code 500"),
       );
       void (await fetchMock.flush());
     }

src/livekit/openIDSFU.ts

@@ -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 {
-  type IOpenIDToken,
-  type MatrixClient,
-  parseErrorResponse,
-} from "matrix-js-sdk";
+import { type IOpenIDToken, type MatrixClient } from "matrix-js-sdk";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 
@@ -252,7 +248,7 @@ async function getLiveKitJWT(
   });
 
   if (!res.ok) {
-    throw parseErrorResponse(res, await res.text());
+    throw new Error("SFU Config fetch failed with status code " + res.status);
   }
   return await res.json();
 }
@@ -312,7 +308,7 @@ export async function getLiveKitJWTWithDelayDelegation(
     if (res.status === 404) {
       throw new NotSupportedError(msg);
     } else {
-      throw parseErrorResponse(res, await res.text());
+      throw new Error(msg);
     }
   }
   return await res.json();

src/room/GroupCallErrorBoundary.test.tsx

@@ -16,7 +16,6 @@ import {
 } from "react";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
-import { MatrixError } from "matrix-js-sdk";
 
 import {
   type CallErrorRecoveryAction,
@@ -26,7 +25,6 @@ import {
   ConnectionLostError,
   E2EENotSupportedError,
   type ElementCallError,
-  FailToGetOpenIdToken,
   InsufficientCapacityError,
   MatrixRTCTransportMissingError,
   UnknownCallError,
@@ -254,69 +252,3 @@ test("should have a close button in widget mode", async () => {
   );
   expect(mockWidget.api.transport.stop).toHaveBeenCalled();
 });
-
-test("should show technical details when error has a matrixError cause", async () => {
-  const underlyingError = new MatrixError(
-    {
-      errcode: "M_LOOKUP_FAILED",
-      error: "Failed to look up user info from homeserver",
-    },
-    500,
-    "https://matrix-rtc.m.localhost/livekit/jwt/sfu/get",
-  );
-  const error = new FailToGetOpenIdToken(underlyingError);
-
-  const TestComponent = (): ReactNode => {
-    throw error;
-  };
-
-  render(
-    <BrowserRouter>
-      <GroupCallErrorBoundary
-        onError={vi.fn()}
-        recoveryActionHandler={vi.fn()}
-        widget={null}
-      >
-        <TestComponent />
-      </GroupCallErrorBoundary>
-    </BrowserRouter>,
-  );
-
-  await screen.findByText("Something went wrong");
-
-  // Technical details should be present
-  const detailsElement = screen.getByText("Technical details");
-  expect(detailsElement).toBeInTheDocument();
-
-  // Verify error details are shown
-  expect(
-    screen.getByText(/Failed to look up user info from homeserver/i, {
-      selector: "pre",
-    }),
-  ).toBeInTheDocument();
-});
-
-test("should not show technical details when error has no matrix error cause", async () => {
-  const error = new ConnectionLostError();
-
-  const TestComponent = (): ReactNode => {
-    throw error;
-  };
-
-  render(
-    <BrowserRouter>
-      <GroupCallErrorBoundary
-        onError={vi.fn()}
-        recoveryActionHandler={vi.fn()}
-        widget={null}
-      >
-        <TestComponent />
-      </GroupCallErrorBoundary>
-    </BrowserRouter>,
-  );
-
-  await screen.findByText("Connection lost");
-
-  // Technical details should not be present (ConnectionLostError has no cause)
-  expect(screen.queryByText("Technical details")).not.toBeInTheDocument();
-});

src/room/GroupCallErrorBoundary.tsx

@@ -23,7 +23,6 @@ import {
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { Button } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { MatrixError } from "matrix-js-sdk";
 
 import {
   ConnectionLostError,
@@ -35,7 +34,6 @@ import {
 import { FullScreenView } from "../FullScreenView.tsx";
 import { ErrorView } from "../ErrorView.tsx";
 import { type WidgetHelpers } from "../widget.ts";
-import styles from "../ErrorView.module.css";
 
 export type CallErrorRecoveryAction = "reconnect"; // | "retry" ;
 
@@ -80,9 +78,6 @@ const ErrorPage: FC<ErrorPageProps> = ({
     });
   }
 
-  const technicalError =
-    error.cause instanceof MatrixError ? error.cause : null;
-
   return (
     <FullScreenView>
       <ErrorView
@@ -100,16 +95,6 @@ const ErrorPage: FC<ErrorPageProps> = ({
             />
           )}
         </p>
-        {technicalError ? (
-          <details className={styles.technicalDetails}>
-            <summary className={styles.technicalDetailsSummary}>
-              {t("technical_details")}
-            </summary>
-            <pre className={styles.technicalDetailsPre}>
-              {technicalError.message}
-            </pre>
-          </details>
-        ) : null}
         {actions &&
           actions.map((action, index) => (
             <Button

src/room/GroupCallView.test.tsx

@@ -63,7 +63,10 @@ vi.mock("react-use-measure", () => ({
 
 vi.hoisted(
   () =>
-    (global.ImageData = class MockImageData {
+    // Use globalThis rather than global because vite-plugin-node-polyfills seems
+    // to rewrite global into an import which then interferes with vitest's hoisting
+    // which runs before imports.
+    (globalThis.ImageData = class MockImageData {
       public data: number[] = [];
     } as unknown as typeof ImageData),
 );

src/room/InCallView.test.tsx

@@ -57,7 +57,10 @@ import { initializeWidget } from "../widget";
 initializeWidget();
 vi.hoisted(
   () =>
-    (global.ImageData = class MockImageData {
+    // Use globalThis rather than global because vite-plugin-node-polyfills seems
+    // to rewrite global into an import which then interferes with vitest's hoisting
+    // which runs before imports.
+    (globalThis.ImageData = class MockImageData {
       public data: number[] = [];
     } as unknown as typeof ImageData),
 );

src/settings/SettingsModal.tsx

@@ -100,7 +100,7 @@ export const SettingsModal: FC<Props> = ({
 
   const devices = useMediaDevices();
   useEffect(() => {
-    if (open) devices.requestDeviceNames();
+    if (open) devices.requestDeviceNames(); // No-op after the first call
   }, [open, devices]);
 
   const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);

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

@@ -260,10 +260,7 @@ describe("Start connection states", () => {
       await deferredSFU.promise;
       return {
         status: 500,
-        body: {
-          errcode: "M_LOOKUP_FAILED",
-          error: "Failed to look up user info from homeserver",
-        },
+        body: "Internal Server Error",
       };
     });
 
@@ -285,7 +282,7 @@ describe("Start connection states", () => {
       capturedState.cause instanceof Error
     ) {
       expect(capturedState.cause.message).toContain(
-        "Failed to look up user info from homeserver",
+        "SFU Config fetch failed with status code 500",
       );
       expect(connection.transport.livekit_alias).toEqual(
         livekitFocus.livekit_alias,