hook up footer select actions

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 {

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();

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}
           >