Display call member speaking status on bottom bar (#2742)

* add mutation observer hok

* add hook to read speaking member by observing iframe content

* display speaking member name in call status bar and improve layout

* fix shrining

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

@@ -12,6 +12,8 @@ import { MemberGlance } from './MemberGlance';
 import { StatusDivider } from './components';
 import { CallEmbed } from '../../plugins/call/CallEmbed';
 import { useCallJoined } from '../../hooks/useCallEmbed';
+import { useCallSpeakers } from '../../hooks/useCallSpeakers';
+import { MemberSpeaking } from './MemberSpeaking';
 
 type CallStatusProps = {
   callEmbed: CallEmbed;
@@ -23,28 +25,51 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
   const callMembers = useCallMembers(room, callSession);
   const screenSize = useScreenSize();
   const callJoined = useCallJoined(callEmbed);
+  const speakers = useCallSpeakers(callEmbed);
+
+  const compact = screenSize === ScreenSize.Mobile;
+
+  const memberVisible = callJoined && callMembers.length > 0;
 
   return (
     <Box
       className={classNames(css.CallStatus, ContainerColor({ variant: 'Background' }))}
       shrink="No"
       gap="400"
-      alignItems="Center"
-      direction={screenSize === ScreenSize.Mobile ? 'Column' : 'Row'}
+      alignItems={compact ? undefined : 'Center'}
+      direction={compact ? 'Column' : 'Row'}
     >
-      <Box grow="Yes" alignItems="Inherit" gap="200">
-        {callJoined && callMembers.length > 0 ? (
-          <Box shrink="No" gap="Inherit" alignItems="Inherit">
-            <MemberGlance room={room} members={callMembers} />
+      <Box grow="Yes" alignItems="Center" gap="200">
+        {memberVisible ? (
+          <Box shrink="No">
             <LiveChip count={callMembers.length} room={room} members={callMembers} />
           </Box>
         ) : (
           <Spinner variant="Secondary" size="200" />
         )}
-        <StatusDivider />
-        <CallRoomName room={room} />
+        <Box
+          grow="Yes"
+          alignItems="Center"
+          gap="Inherit"
+          justifyContent={compact ? 'Center' : undefined}
+        >
+          <CallRoomName room={room} />
+          {speakers.size > 0 && !compact && (
+            <>
+              <StatusDivider />
+              <span data-spacing-node />
+              <MemberSpeaking room={room} speakers={speakers} />
+            </>
+          )}
+        </Box>
+        {memberVisible && (
+          <Box shrink="No">
+            <MemberGlance room={room} members={callMembers} speakers={speakers} />
+          </Box>
+        )}
       </Box>
-      <Box shrink="No" alignItems="Inherit" gap="Inherit">
+      {memberVisible && !compact && <StatusDivider />}
+      <Box shrink="No" alignItems="Center" justifyContent="Center" gap="Inherit">
         <CallControl callEmbed={callEmbed} />
       </Box>
     </Box>