From d7e044411732a7ea02c171aea0fe2e134cd564a2 Mon Sep 17 00:00:00 2001
From: fkwp <github-fkwp@w4ve.de>
Date: Thu, 17 Sep 2026 11:51:32 +0200
Subject: [PATCH] Write the mute button once instead of twice per kind
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Both arms of the switch were the same eleven lines of click, disabled, busy
  and enabled wiring; only the component and the test id differed.
- Two copies that had to be kept in sync by hand, for nothing.
- `toggles` becomes an expression rather than a `let` mutated in a switch,
  which makes the optional chaining downstream dead.
- The labels switch stays: i18n extraction needs literal `t("…")` keys, and it
  gives exhaustiveness checking on the union.
---
 src/components/MediaMuteAndSwitchButton.tsx | 69 +++++++++------------
 1 file changed, 28 insertions(+), 41 deletions(-)

diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index a01a879bf..46b338fc7 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -256,49 +256,36 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
   }, [menuOpen, devices]);
 
-  let button;
-  let toggles: { label: string; enabled: boolean; id: string }[] = [];
-  switch (iconsAndLabels) {
-    case "video":
-      button = (
-        <VideoButton
-          enabled={enabled ?? false}
-          busy={isBusy}
-          onClick={(e) => {
-            onMuteClick?.();
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          disabled={isBusy || onMuteClick === undefined}
-          data-testid="incall_videomute"
-        />
-      );
-      if (videoBlurToggleClick !== undefined) {
-        toggles = [
+  // The mute control differs between the two only in which button it is and
+  // what it is called; how it behaves is the same, and was worth saying once.
+  const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton;
+  const button = (
+    <MuteButton
+      enabled={enabled ?? false}
+      busy={isBusy}
+      onClick={(e) => {
+        onMuteClick?.();
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      disabled={isBusy || onMuteClick === undefined}
+      data-testid={
+        iconsAndLabels === "audio" ? "incall_mute" : "incall_videomute"
+      }
+    />
+  );
+
+  // Only the camera menu carries a toggle, and only when the caller offers one.
+  const toggles =
+    iconsAndLabels === "video" && videoBlurToggleClick !== undefined
+      ? [
           {
             label: t("action.blur_background"),
             enabled: videoBlurEnabled ?? false,
             id: BLUR_ID,
           },
-        ];
-      }
-      break;
-    case "audio":
-      button = (
-        <MicButton
-          enabled={enabled ?? false}
-          busy={isBusy}
-          onClick={(e) => {
-            onMuteClick?.();
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          disabled={isBusy || onMuteClick === undefined}
-          data-testid="incall_mute"
-        />
-      );
-      break;
-  }
+        ]
+      : [];
 
   let optionsButtonLabel: string;
   let defaultMenuTitle: string;
@@ -518,15 +505,15 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
             </div>
           </div>
         </div>
-        {(toggles?.length ?? 0) > 0 && <hr />}
-        {toggles?.map((toggle) => (
+        {toggles.length > 0 && <hr />}
+        {toggles.map((toggle) => (
           <ToggleMenuItem
             label={toggle.label}
             onSelect={(e) => {
               videoBlurToggleClick?.();
               e.preventDefault();
             }}
-            checked={toggle.enabled ?? false}
+            checked={toggle.enabled}
             key={toggle.id}
           />
         ))}