Request full device names when device switchers are open

2026-06-06 11:45:53 +00:00 · 2026-06-02 10:36:57 +02:00
parent 164765cd27
commit 5fed562db2
3 changed files with 139 additions and 94 deletions
--- 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;
--- 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
--- 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({