From 5fed562db23346632aaa4172ae498861c1ae8ce9 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 2 Jun 2026 10:36:57 +0200
Subject: [PATCH] Request full device names when device switchers are open

---
 .../MediaMuteAndSwitchButton.stories.tsx      |  13 ++
 .../MediaMuteAndSwitchButton.test.tsx         | 210 ++++++++++--------
 src/components/MediaMuteAndSwitchButton.tsx   |  10 +-
 3 files changed, 139 insertions(+), 94 deletions(-)

diff --git a/src/components/MediaMuteAndSwitchButton.stories.tsx b/src/components/MediaMuteAndSwitchButton.stories.tsx
index b014cf9b..89c12392 100644
--- a/src/components/MediaMuteAndSwitchButton.stories.tsx
+++ b/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;
diff --git a/src/components/MediaMuteAndSwitchButton.test.tsx b/src/components/MediaMuteAndSwitchButton.test.tsx
index 60be336a..ac6540e0 100644
--- a/src/components/MediaMuteAndSwitchButton.test.tsx
+++ b/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,10 +93,27 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(onMute).toHaveBeenCalled();
   });
 
+  test("requests device names when opened", async () => {
+    const user = userEvent.setup();
+    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();
-    render(
-      <TooltipProvider>
+    renderComponent(
+      <>
         <MediaMuteAndSwitchButton
           title="Switcher"
           iconsAndLabels="audio"
@@ -100,7 +134,7 @@ describe("MediaMuteAndSwitchButton", () => {
           ]}
           selectedOption="cam1"
         />
-      </TooltipProvider>,
+      </>,
     );
 
     await user.click(screen.getByRole("button", { name: "Microphone" }));
@@ -115,20 +149,18 @@ describe("MediaMuteAndSwitchButton", () => {
   test("calls select callback on 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" }));
@@ -139,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" }));
@@ -169,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" }));
@@ -224,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" }));
@@ -251,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
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index 80cb02a3..b5c07b94 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/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();
+  }, [menuOpen, devices]);
+
   let button;
   let toggles: { label: string; enabled: boolean; id: string }[] = [];
   switch (iconsAndLabels) {
@@ -128,6 +135,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         t("settings.devices.microphone_numbered", { n });
       break;
   }
+
   return (
     <div
       className={classNames({