fix logic for earpiece quick switcher to be based on switching target

(also show quick switcher if headphones are connected)

src/room/InCallView.tsx

@@ -312,7 +312,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const showHeader = useObservableEagerState(vm.showHeader$);
   const showFooter = useObservableEagerState(vm.showFooter$);
   const earpieceMode = useObservableEagerState(vm.earpieceMode$);
-  const toggleEarpieceMode = useObservableEagerState(vm.toggleEarpieceMode$);
+  const audioOutputSwitcher = useObservableEagerState(vm.audioOutputSwitcher$);
   const switchCamera = useSwitchCamera(vm.localVideo$);
 
   // Ideally we could detect taps by listening for click events and checking
@@ -457,27 +457,26 @@ export const InCallView: FC<InCallViewProps> = ({
 
   useAppBarSecondaryButton(
     useMemo(() => {
-      if (toggleEarpieceMode === null) return null;
+      if (audioOutputSwitcher === null) return null;
-      const Icon = earpieceMode ? VolumeOnSolidIcon : EarpieceIcon;
+      const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
-      return (
+      const Icon = isEarpieceTarget ? EarpieceIcon : VolumeOnSolidIcon;
-        <Tooltip
+      const label = isEarpieceTarget
-          label={
-            earpieceMode
         ? t("settings.devices.earpiece")
-              : t("settings.devices.loudspeaker")
+        : t("settings.devices.loudspeaker");
-          }
+
-        >
+      return (
+        <Tooltip label={label}>
           <IconButton
             onClick={(e) => {
               e.preventDefault();
-              toggleEarpieceMode();
+              audioOutputSwitcher.switch();
             }}
           >
             <Icon />
           </IconButton>
         </Tooltip>
       );
-    }, [t, earpieceMode, toggleEarpieceMode]),
+    }, [t, audioOutputSwitcher]),
   );
 
   useAppBarHidden(!showHeader);
@@ -789,7 +788,7 @@ export const InCallView: FC<InCallViewProps> = ({
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
       <EarpieceOverlay
         show={earpieceMode}
-        onBackToVideoPressed={toggleEarpieceMode}
+        onBackToVideoPressed={audioOutputSwitcher?.switch}
       />
       <ReactionsOverlay vm={vm} />
       {footer}

src/state/CallViewModel.ts

@@ -1261,18 +1261,22 @@ export class CallViewModel extends ViewModel {
 
   /**
    * Callback to toggle between the earpiece and the loudspeaker.
+   *
+   * This will be `null` in case the target does not exist in the list
+   * of available audio outputs.
    */
-  public readonly toggleEarpieceMode$: Observable<(() => void) | null> =
+  public readonly audioOutputSwitcher$: Observable<{
-    combineLatest(
+    targetOutput: "earpiece" | "speaker";
+    switch: () => void;
+  } | null> = combineLatest(
     [
       this.mediaDevices.audioOutput.available$,
       this.mediaDevices.audioOutput.selected$,
     ],
     (available, selected) => {
       const selectionType = selected && available.get(selected.id)?.type;
-        if (!(selectionType === "speaker" || selectionType === "earpiece"))
-          return null;
 
+      // If we are in any output mode other than spaeker switch to speaker.
       const newSelectionType =
         selectionType === "speaker" ? "earpiece" : "speaker";
       const newSelection = [...available].find(
@@ -1281,7 +1285,10 @@ export class CallViewModel extends ViewModel {
       if (newSelection === undefined) return null;
 
       const [id] = newSelection;
-        return () => this.mediaDevices.audioOutput.select(id);
+      return {
+        targetOutput: newSelectionType,
+        switch: () => this.mediaDevices.audioOutput.select(id),
+      };
     },
   );