bring speaking member in glance

src/app/features/call-status/CallRoomName.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Chip, Icon, Icons, Text } from 'folds';
+import { Chip, Icon, Icons, Text, toRem } from 'folds';
 import { useAtomValue } from 'jotai';
 import { RoomIcon } from '../../components/room-avatar';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
@@ -45,6 +45,7 @@ export function CallRoomName({ roomId }: CallRoomNameProps) {
     <Chip
       variant="Background"
       radii="Pill"
+      style={{ maxWidth: toRem(296) }}
       before={
         dm ? (
           <Icon size="200" src={Icons.VolumeHigh} filled />

src/app/features/call-status/CallStatus.tsx

@@ -56,28 +56,24 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
           {!compact && (
             <>
               <CallRoomName roomId={roomId} />
-              {speakers.size > 0 && (
-                <>
-                  <StatusDivider />
-                  <span data-spacing-node />
-                  <MemberSpeaking membersAPI={membersAPI} speakers={speakers} />
-                </>
+              <StatusDivider />
+              <span data-spacing-node />
+              {memberVisible && (
+                <MemberGlance
+                  roomId={roomId}
+                  users={users}
+                  membersAPI={membersAPI}
+                  speakers={speakers}
+                />
               )}
+              {speakers.size > 0 && <MemberSpeaking membersAPI={membersAPI} speakers={speakers} />}
             </>
           )}
         </Box>
-        {memberVisible && (
-          <Box shrink="No">
-            <MemberGlance
-              roomId={roomId}
-              users={users}
-              membersAPI={membersAPI}
-              speakers={speakers}
-            />
-          </Box>
+        {compact && memberVisible && (
+          <MemberGlance roomId={roomId} users={users} membersAPI={membersAPI} speakers={speakers} />
         )}
       </Box>
-      {memberVisible && !compact && <StatusDivider />}
       <Box shrink="No" alignItems="Center" gap="Inherit">
         {compact && (
           <Box grow="Yes">

src/app/features/call-status/MemberGlance.tsx

@@ -22,16 +22,35 @@ export function MemberGlance({ roomId, users, membersAPI, speakers, max = 6 }: M
   const useAuthentication = useMediaAuthentication();
   const openUserProfile = useOpenUserRoomProfile();
 
-  const visibleMembers = useMemo(
-    () =>
-      Array.from(users)
-        .sort((a, b) => {
-          if (speakers.has(a) === speakers.has(b)) return 0;
-          return speakers.has(a) ? -1 : 1;
-        })
-        .slice(0, max),
-    [users, speakers, max]
-  );
+  const visibleMembers = useMemo(() => {
+    const members = Array.from(users);
+    const visible = members.slice(0, max);
+
+    const visibleSpeakers = members.filter(
+      (member) => speakers.has(member) && !visible.includes(member)
+    );
+
+    for (let i = 0; i < visibleSpeakers.length; i += 1) {
+      const speaker = visibleSpeakers[i];
+      let replaceIndex = -1;
+
+      for (let j = visible.length - 1; j >= 0; j -= 1) {
+        if (!speakers.has(visible[j])) {
+          replaceIndex = j;
+          break;
+        }
+      }
+
+      if (replaceIndex === -1) break;
+
+      visible[replaceIndex] = speaker;
+    }
+
+    // Restore the original order of the visible members
+    const memberOrder = new Map(members.map((member, index) => [member, index]));
+
+    return visible.sort((a, b) => (memberOrder.get(a) ?? 0) - (memberOrder.get(b) ?? 0));
+  }, [users, speakers, max]);
   const remainingCount = max && users.length > max ? users.length - max : 0;
 
   return (