feat: add CallParticipantsIndicator component to display active call participants

fix: silently ignore OIDC configuration errors in ServerConfigsLoader fix: handle loadPreview errors in UrlPreviewCard component fix: silently ignore errors in notification tap listener setup in tauri
2026-02-22 03:17:36 +11:00
parent a713141420
commit f5ba778e46
6 changed files with 227 additions and 61 deletions
--- a/src/app/features/room-nav/CallParticipantsIndicator.tsx
+++ b/src/app/features/room-nav/CallParticipantsIndicator.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { Avatar, Box, Text, Icon, Icons, config } from 'folds';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useRoomCallMembers } from '../call/useRoomCallMembers';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { mxcUrlToHttp, getMxIdLocalPart } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { nameInitials } from '../../utils/common';
+import { useCall } from '../call/useCall';
+
+const MAX_VISIBLE_PARTICIPANTS = 8;
+
+type CallParticipantsIndicatorProps = {
+  roomId: string;
+};
+
+export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = mx.getRoom(roomId);
+  const { callMembers, isCallActive } = useRoomCallMembers(roomId);
+  const { activeCall } = useCall();
+
+  if (!isCallActive || callMembers.length === 0 || !room) {
+    return null;
+  }
+
+  const visibleMembers = callMembers.slice(0, MAX_VISIBLE_PARTICIPANTS);
+  const remainingCount = callMembers.length - MAX_VISIBLE_PARTICIPANTS;
+
+  const getParticipantAvatar = (userId: string): string | undefined => {
+    const mxcUrl = getMemberAvatarMxc(room, userId);
+    if (!mxcUrl) return undefined;
+    return mxcUrlToHttp(mx, mxcUrl, useAuthentication, 48, 48, 'crop') ?? undefined;
+  };
+
+  const getParticipantName = (userId: string): string => {
+    return getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+  };
+
+  const isParticipantMuted = (userId: string): boolean => {
+    if (!activeCall) return false;
+    
+    // For local user, check activeCall.isMuted
+    if (userId === mx.getUserId()) return activeCall.isMuted;
+    
+    // For remote users, mutedParticipants contains LiveKit identities (deviceId_timestamp)
+    // We need to find the deviceId for this user and check if any matching identity is muted
+    const member = callMembers.find((m) => m.userId === userId);
+    if (!member) return false;
+    
+    // Check if any muted participant has this user's deviceId
+    return Array.from(activeCall.mutedParticipants).some((mutedId) => {
+      const underscoreIndex = mutedId.lastIndexOf('_');
+      const deviceId = underscoreIndex > 0 ? mutedId.substring(0, underscoreIndex) : mutedId;
+      return deviceId === member.deviceId;
+    });
+  };
+
+  return (
+    <Box
+      direction="Column"
+      gap="200"
+      style={{
+        paddingLeft: config.space.S500,
+        paddingTop: config.space.S200,
+        width: '100%',
+      }}
+    >
+      {visibleMembers.map((member) => (
+        <Box
+          key={member.userId}
+          alignItems="Center"
+          gap="100"
+          style={{
+            opacity: config.opacity.P300,
+          }}
+        >
+          <Avatar size="200" radii="Pill">
+            {getParticipantAvatar(member.userId) ? (
+              <img
+                src={getParticipantAvatar(member.userId)}
+                alt={getParticipantName(member.userId)}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                  borderRadius: 'inherit',
+                }}
+              />
+            ) : (
+              <Text as="span" size="H6">
+                {nameInitials(getParticipantName(member.userId))}
+              </Text>
+            )}
+          </Avatar>
+          <Box alignItems="Center" gap="100" grow="Yes">
+            <Icon 
+              src={isParticipantMuted(member.userId) ? Icons.MicMute : Icons.Mic} 
+              size="50" 
+              style={{ opacity: config.opacity.P500 }} 
+            />
+            <Text as="span" size="T200" truncate>
+              {getParticipantName(member.userId)}
+            </Text>
+          </Box>
+        </Box>
+      ))}
+      {remainingCount > 0 && (
+        <Box
+          alignItems="Center"
+          gap="200"
+          style={{
+            opacity: config.opacity.P300,
+            paddingLeft: config.space.S300,
+          }}
+        >
+          <Text as="span" size="T200">
+            +{remainingCount} more
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}