translation fixes

2026-05-31 11:34:38 +00:00 · 2026-05-18 19:13:29 +02:00
parent d5bebcc3a5
commit 68a487c9de
9 changed files with 116 additions and 118 deletions
--- a/src/components/CallFooter.stories.tsx
+++ b/src/components/CallFooter.stories.tsx
@@ -98,7 +98,6 @@ export const Default: Story = {
    selectedVideo: undefined,
    selectAudioButtonOption: undefined,
    selectVideoButtonOption: undefined,
-    videoToggles: [],
  },
  parameters: {
    layout: "fullscreen",
@@ -135,12 +134,12 @@ export const WithAudioAndVideoOptions: Story = {
    audioEnabled: false,
    videoEnabled: true,
    audioOptions: [
-      { label: "Microphone 1", id: "1" },
-      { label: "Microphone 2", id: "2" },
+      { label: { type: "name", name: "Microphone 1" }, id: "1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "2" },
    ],
    videoOptions: [
-      { label: "Camera 1", id: "1" },
-      { label: "Camera 2", id: "2" },
+      { label: { type: "name", name: "Camera 1" }, id: "1" },
+      { label: { type: "name", name: "Camera 2" }, id: "2" },
    ],
    selectedAudio: "2",
    selectedVideo: "1",
--- a/src/components/CallFooterViewModel.test.ts
+++ b/src/components/CallFooterViewModel.test.ts
@@ -123,11 +123,29 @@ describe("createCallFooterViewModel", () => {
      );

      expect(vm.audioOptions$?.value).toEqual([
-        { id: "mic1", label: "Audio Device 1" },
-        { id: "mic2", label: "Microphone 2" },
+        {
+          id: "mic1",
+          label: {
+            number: 1,
+            type: "number",
+          },
+        },
+        {
+          id: "mic2",
+          label: {
+            name: "Microphone 2",
+            type: "name",
+          },
+        },
      ]);
      expect(vm.videoOptions$?.value).toEqual([
-        { id: "cam1", label: "Camera 1" },
+        {
+          id: "cam1",
+          label: {
+            name: "Camera 1",
+            type: "name",
+          },
+        },
      ]);
    });
  });
--- a/src/components/CallFooterViewModel.tsx
+++ b/src/components/CallFooterViewModel.tsx
@@ -11,7 +11,6 @@ import { supportsBackgroundProcessors } from "@livekit/track-processors";
 import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { type MenuOptions } from "./MediaMuteAndSwitchButton";
 import { type MediaDevices } from "../state/MediaDevices";
-import { mediaDeviceLabelToString } from "../settings/DeviceSelection";
 import {
  backgroundBlur as backgroundBlurSettings,
  debugTileLayout as debugTileLayoutSetting,
@@ -77,10 +76,7 @@ function buildDeviceBehaviors(
                map((available) =>
                  [...available.entries()].map(([id, label]) => ({
                    id,
-                    label: mediaDeviceLabelToString(
-                      label,
-                      (n) => "Audio Device " + n,
-                    ),
+                    label,
                  })),
                ),
              ),
@@ -100,10 +96,7 @@ function buildDeviceBehaviors(
                map((available) =>
                  [...available.entries()].map(([id, label]) => ({
                    id,
-                    label: mediaDeviceLabelToString(
-                      label,
-                      (n) => "Camera " + n,
-                    ),
+                    label,
                  })),
                ),
              ),
--- a/src/components/MediaMuteAndSwitchButton.stories.tsx
+++ b/src/components/MediaMuteAndSwitchButton.stories.tsx
@@ -23,8 +23,8 @@ export const Default: Story = {
    iconsAndLabels: "audio",
    enabled: true,
    options: [
-      { label: "option 1", id: "1" },
-      { label: "option 2", id: "2" },
+      { label: { type: "name", name: "Option 1" }, id: "1" },
+      { label: { type: "name", name: "Option 2" }, id: "2" },
    ],
    selectedOption: "1",
    onMuteClick: fn(),
@@ -39,16 +39,11 @@ export const AudioMute: Story = {
    iconsAndLabels: "audio",
    enabled: false,
    options: [
-      { label: "Microphone 1", id: "1" },
-      { label: "Microphone 2", id: "2" },
-    ],
-    toggles: [
-      {
-        label: "example toggle",
-        id: "t0",
-        enabled: true,
-      },
+      { label: { type: "name", name: "Microphone 1" }, id: "1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "2" },
    ],
+    videoBlurEnabled: true,
+    backgroundBlurToggleClick: fn(),
    selectedOption: "2",
  },
  play: async ({ args, canvasElement }) => {
@@ -67,10 +62,10 @@ export const AudioUnmute: Story = {
    iconsAndLabels: "audio",
    enabled: true,
    options: [
-      { label: "Microphone 1", id: "1" },
-      { label: "Microphone 2", id: "2" },
+      { label: { type: "name", name: "Microphone 1" }, id: "1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "2" },
    ],
-    toggles: [],
+
    selectedOption: "2",
  },
 };
@@ -81,10 +76,10 @@ export const VideoMute: Story = {
    iconsAndLabels: "video",
    enabled: false,
    options: [
-      { label: "Camera 1", id: "1" },
-      { label: "Camera 2", id: "2" },
+      { label: { type: "name", name: "Camera 1" }, id: "1" },
+      { label: { type: "name", name: "Camera 2" }, id: "2" },
    ],
-    toggles: [],
+
    selectedOption: "1",
  },
 };
@@ -95,16 +90,11 @@ export const VideoUnmute: Story = {
    iconsAndLabels: "video",
    enabled: true,
    options: [
-      { label: "Camera 1", id: "1" },
-      { label: "Camera 2", id: "2" },
-    ],
-    toggles: [
-      {
-        label: "Background blur",
-        id: "background_blurring",
-        enabled: false,
-      },
+      { label: { type: "name", name: "Camera 1" }, id: "1" },
+      { label: { type: "name", name: "Camera 2" }, id: "2" },
    ],
+    videoBlurEnabled: true,
+    backgroundBlurToggleClick: fn(),
    selectedOption: "2",
  },
 };
--- a/src/components/MediaMuteAndSwitchButton.test.tsx
+++ b/src/components/MediaMuteAndSwitchButton.test.tsx
@@ -86,8 +86,8 @@ describe("MediaMuteAndSwitchButton", () => {
          iconsAndLabels="audio"
          enabled={true}
          options={[
-            { label: "Microphone 1", id: "mic1" },
-            { label: "Microphone 2", id: "mic2" },
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
          ]}
          selectedOption="mic1"
          onSelect={onSelect}
@@ -110,8 +110,8 @@ describe("MediaMuteAndSwitchButton", () => {
          iconsAndLabels="audio"
          enabled={true}
          options={[
-            { label: "Microphone 1", id: "mic1" },
-            { label: "Microphone 2", id: "mic2" },
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
          ]}
          selectedOption="mic1"
          onSelect={onSelect}
@@ -139,8 +139,8 @@ describe("MediaMuteAndSwitchButton", () => {
            iconsAndLabels="audio"
            enabled={true}
            options={[
-              { label: "Microphone 1", id: "mic1" },
-              { label: "Microphone 2", id: "mic2" },
+              { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+              { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
            ]}
            selectedOption={selectedOption}
            onSelect={(id) => {
@@ -222,8 +222,8 @@ describe("MediaMuteAndSwitchButton", () => {
          iconsAndLabels="audio"
          enabled={true}
          options={[
-            { label: "Microphone 1", id: "mic1" },
-            { label: "Microphone 2", id: "mic2" },
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
          ]}
          selectedOption="mic2"
        />
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -12,7 +12,6 @@ import {
  MenuItem,
  ToggleMenuItem,
 } from "@vector-im/compound-web";
-import { t } from "i18next";
 import {
  CheckIcon,
  ChevronUpIcon,
@@ -22,12 +21,14 @@ import {
  VideoCallIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";

 import styles from "./MediaMuteAndSwitchButton.module.css";
 import { MicButton, VideoButton } from "../button";
+import { type DeviceLabel } from "../state/MediaDevices";

 export interface MenuOptions {
-  label: string;
+  label: DeviceLabel;
  id: string;
 }

@@ -67,7 +68,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
 }) => {
  const [plannedSelection, setPlannedSelection] = useState<string | null>(null);
  const [menuOpen, setMenuOpen] = useState(false);
-
+  const { t } = useTranslation();
  let button;
  let toggles =
    backgroundBlurToggleClick === undefined
@@ -152,35 +153,45 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
          />
        }
      >
-        {options?.map((option) => (
-          <MenuItem
-            hideChevron
-            label={option.label}
-            Icon={
-              IconOptions && (
-                <IconOptions
-                  width={24}
-                  height={24}
-                  className={styles.itemIcon}
-                />
-              )
+        {options?.map(({ label, id }) => {
+          const labelText = ((): string => {
+            switch (label.type) {
+              case "name":
+                return label.name;
+              case "number":
+                return t("settings.devices.default_numbered", {
+                  n: label.number,
+                });
            }
-            onSelect={(e) => {
-              e.preventDefault();
-              if (option.id === selectedOption) return;
-              setPlannedSelection(option.id);
-              onSelect?.(option.id);
-            }}
-            key={option.id}
-          >
-            {selectedOption === option.id && (
-              <CheckIcon width={24} height={24} />
-            )}
-            {selectedOption !== option.id && plannedSelection === option.id && (
-              <SpinnerIcon width={24} height={24} className={styles.rotate} />
-            )}
-          </MenuItem>
-        ))}
+          })();
+          return (
+            <MenuItem
+              hideChevron
+              label={labelText}
+              Icon={
+                IconOptions && (
+                  <IconOptions
+                    width={24}
+                    height={24}
+                    className={styles.itemIcon}
+                  />
+                )
+              }
+              onSelect={(e) => {
+                e.preventDefault();
+                if (id === selectedOption) return;
+                setPlannedSelection(id);
+                onSelect?.(id);
+              }}
+              key={id}
+            >
+              {selectedOption === id && <CheckIcon width={24} height={24} />}
+              {selectedOption !== id && plannedSelection === id && (
+                <SpinnerIcon width={24} height={24} className={styles.rotate} />
+              )}
+            </MenuItem>
+          );
+        })}
        {(toggles?.length ?? 0) > 0 && <hr />}
        {toggles?.map((toggle) => (
          <ToggleMenuItem