fix loudspeaker confusion and icons

src/components/CallFooter.stories.tsx

@@ -54,6 +54,8 @@ export const Default: Story = {
   args: {
     hideLogo: true,
     layoutMode: "grid",
+    audioEnabled: true,
+    videoEnabled: true,
     setLayoutMode: fn(),
     openSettings: fn(),
     toggleAudio: fn(),
@@ -73,8 +75,8 @@ export const Default: Story = {
       mapping: {
         NoOutputCallback: undefined,
         // This is inverersed (speaker<->earpice) because the switcher object stores the target output, not the current one.
-        speaker: { targetOutput: "speaker", switch: fn() },
-        earpiece: { targetOutput: "earpiece", switch: fn() },
+        speaker: { targetOutput: "earpiece", switch: fn() },
+        earpiece: { targetOutput: "speaker", switch: fn() },
       },
     },
     toggleScreenSharing: fnArgType,
@@ -102,7 +104,16 @@ export const AudioVideoEnabled: Story = {
     videoEnabled: true,
   },
 };
-export const WithAudioOutput: Story = {
+
+export const WithAudioOutputSpeaker: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    audioOutputSwitcher: { targetOutput: "earpiece", switch: fn() },
+  },
+};
+
+export const WithAudioOutputEarpiece: Story = {
   ...Default,
   args: {
     ...Default.args,

src/components/CallFooter.tsx

@@ -35,6 +35,14 @@ export interface FooterProps {
   ref?: Ref<HTMLDivElement>;
   /** Children will only be visible if the component is wider than 5*/
   children?: JSX.Element | JSX.Element[] | false;
+
+  audioEnabled: boolean;
+  /** Also controls if the audioMute button is disabled */
+  toggleAudio: (() => void) | undefined;
+  videoEnabled: boolean;
+  /** Also controls if the videoMute button is disabled */
+  toggleVideo: (() => void) | undefined;
+
   /* This is needed for WindowMode = "flat" */
   hideControls?: boolean;
   /** hide the entire footer*/
@@ -49,13 +57,6 @@ export interface FooterProps {
   /** Also controls if the layout button is visible */
   setLayoutMode?: (mode: GridMode) => void;
 
-  audioEnabled?: boolean;
-  /** Also controls if the audioMute button is disabled */
-  toggleAudio?: () => void;
-  videoEnabled?: boolean;
-  /** Also controls if the videoMute button is disabled */
-  toggleVideo?: () => void;
-
   sharingScreen?: boolean;
   toggleScreenSharing?: () => void;
 
@@ -175,7 +176,7 @@ export const CallFooter: FC<FooterProps> = ({
       <LoudspeakerButton
         size={buttonSize}
         onClick={() => audioOutputSwitcher.switch()}
-        isEarpieceTarget={audioOutputSwitcher.targetOutput === "earpiece"}
+        loudspeakerModeEnabled={audioOutputSwitcher.targetOutput === "earpiece"}
       />
     );
   }, [audioOutputSwitcher, buttonSize]);