fix earpice flicker

src/state/CallViewModel/CallViewModel.ts

@@ -616,8 +616,13 @@ export function createCallViewModel$(
   const ringOverlay$ = scope.behavior(
     combineLatest([noUserToCallInRoom$, dmMember$, callPickupState$]).pipe(
       map(([noUserToCallInRoom, dmMember, callPickupState]) => {
-        // No overlay if not in ringing state
+        // No overlay if:
-        if (callPickupState !== "ringing" || noUserToCallInRoom) return null;
+        if (
+          callPickupState !== "ringing" ||
+          noUserToCallInRoom ||
+          dmMember === null
+        )
+          return null;
 
         const name = dmMember ? dmMember.rawDisplayName : matrixRoom.name;
         const id = dmMember ? dmMember.userId : matrixRoom.roomId;

src/state/CallViewModel/remoteMembers/MatrixMemberMetadata.ts

@@ -65,12 +65,12 @@ export function createDMMember$(
   RoomMember,
   "userId" | "getMxcAvatarUrl" | "rawDisplayName"
 > | null> {
-  // We cannot use the normal direct check from matrix since we do not have access to the account data.
+  // We cannot use the normal direct DM check from matrix since we do not have access to the account data.
   // use primitive member count === 2 check instead.
   return scope.behavior(
     roomMembers$.pipe(
       map((membersMap) => {
-        // primitive appraoch do to no access to account data.
+        // primitive approach due to no access to account data.
         const isDM = membersMap.size === 2;
         if (!isDM) return null;
         return matrixRoom.getMember(matrixRoom.guessDMUserId());

src/state/MediaDevices.ts

@@ -333,7 +333,22 @@ class ControlledAudioOutput implements MediaDevice<
         ),
       ],
       (available, preferredId) => {
-        const id = preferredId ?? available.keys().next().value;
+        // const preferredValid =
+        //   preferredId !== undefined && available.has(preferredId)
+        //     ? preferredId
+        //     : undefined;
+
+        // // Default to speaker to prohibit toggle (speaker->earpiece->speaker)
+        // //  - before we get `this.available$` we would use a non earpice (speaker)
+        // //  - once we receive the available devices, we call this method need to make sure to not select earpice.
+        // //  - the OS might select earpiece manually by calling `select` method
+        // const speakerId = [...available].find(
+        //   ([, label]) => label.type === "speaker",
+        // )?.[0];
+
+        // const id = preferredValid ?? speakerId ?? available.keys().next().value;
+        const id = preferredId;
+
         return id === undefined
           ? undefined
           : { id, virtualEarpiece: id === EARPIECE_CONFIG_ID };