From 8213612135ff672aea31aa12ed432c134b2d9f93 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Tue, 5 May 2026 16:31:32 +0200
Subject: [PATCH] hook up footer select actions

---
 src/components/CallFooter.tsx                 |  6 +++++
 .../MediaMuteAndSwitchButton.test.tsx         | 22 +++++++++++++++++++
 src/components/MediaMuteAndSwitchButton.tsx   |  3 ++-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/CallFooter.tsx b/src/components/CallFooter.tsx
index 4c556f44..af4ad478 100644
--- a/src/components/CallFooter.tsx
+++ b/src/components/CallFooter.tsx
@@ -83,6 +83,8 @@ export interface FooterProps {
   videoOptions?: MenuOptions[];
   selectedAudio?: string;
   selectedVideo?: string;
+  selectAudioDevice?: (deviceId: string) => void;
+  selectVideoDevice?: (deviceId: string) => void;
 }
 
 export const CallFooter: FC<FooterProps> = ({
@@ -113,6 +115,8 @@ export const CallFooter: FC<FooterProps> = ({
   videoOptions,
   selectedAudio,
   selectedVideo,
+  selectAudioDevice,
+  selectVideoDevice,
 }) => {
   const buttons: JSX.Element[] = [];
   const buttonSize = asPip ? "md" : "lg";
@@ -145,6 +149,7 @@ export const CallFooter: FC<FooterProps> = ({
         data-testid="incall_mute"
         options={audioOptions}
         selectedOption={selectedAudio}
+        onSelect={selectAudioDevice}
       />,
     );
   } else {
@@ -170,6 +175,7 @@ export const CallFooter: FC<FooterProps> = ({
         data-testid="incall_mute"
         options={videoOptions}
         selectedOption={selectedVideo}
+        onSelect={selectVideoDevice}
       />,
     );
   } else {
diff --git a/src/components/MediaMuteAndSwitchButton.test.tsx b/src/components/MediaMuteAndSwitchButton.test.tsx
index a3a9cf2c..42a8d970 100644
--- a/src/components/MediaMuteAndSwitchButton.test.tsx
+++ b/src/components/MediaMuteAndSwitchButton.test.tsx
@@ -91,6 +91,28 @@ describe("MediaMuteAndSwitchButton", () => {
 
     expect(onSelect).toHaveBeenCalledWith("mic2");
   });
+  test("does not call select callback on already selected menu click", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    const { getByRole } = render(
+      <MediaMuteAndSwitchButton
+        title="Switcher"
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: "Microphone 1", id: "mic1" },
+          { label: "Microphone 2", id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={onSelect}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(screen.getByRole("menuitem", { name: "Microphone 1" }));
+
+    expect(onSelect).not.toHaveBeenCalled();
+  });
 
   test("renders menu spinner until selection updates for the component", async () => {
     const user = userEvent.setup();
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index 05a1b257..7e38c7c6 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -197,9 +197,10 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
               )
             }
             onSelect={(e) => {
+              e.preventDefault();
+              if (option.id === selectedOption) return;
               setPlannedSelection(option.id);
               onSelect?.(option.id);
-              e.preventDefault();
             }}
             key={option.id}
           >