Make toast show avatars of group call participants

Author: robintown

apps/web/res/css/views/toasts/_IncomingCallToast.pcss

@@ -40,6 +40,11 @@ Please see LICENSE files in the repository root for full details.
             }
         }
 
+        .mx_IncomingCallToast_avatars {
+            display: inline-block;
+            vertical-align: top;
+        }
+
         .mx_IncomingCallToast_buttons {
             display: flex;
             gap: var(--cpd-space-2x);

apps/web/src/components/views/rooms/LiveContentSummary.tsx

@@ -8,13 +8,12 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type FC } from "react";
 import classNames from "classnames";
-import { GroupIcon, VideoCallSolidIcon, VoiceCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { GroupIcon, VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 
 export enum LiveContentType {
     Video,
-    Voice,
 }
 
 interface Props {
@@ -27,14 +26,14 @@ interface Props {
 /**
  * Summary line used to call out live, interactive content such as calls.
  */
-export const LiveContentSummary: FC<Props> = ({ type, text, active, participantCount }) => (
+export const LiveContentSummary: FC<Props> = ({ text, active, participantCount }) => (
     <span className="mx_LiveContentSummary">
         <span
             className={classNames("mx_LiveContentSummary_text", {
                 mx_LiveContentSummary_text_active: active,
             })}
         >
-            {type === LiveContentType.Video ? <VideoCallSolidIcon /> : <VoiceCallSolidIcon />}
+            <VideoCallSolidIcon />
             {text}
         </span>
         {participantCount > 0 && (

apps/web/src/hooks/useCall.ts

@@ -50,15 +50,7 @@ export const useParticipantCount = (call: Call | null): number => {
     }, [participants]);
 };
 
-export const useParticipatingMembers = (call: Call): RoomMember[] => {
+export const useParticipatingMembers = (call: Call | null): RoomMember[] => {
     const participants = useParticipants(call);
-
-    return useMemo(() => {
-        const members: RoomMember[] = [];
-        for (const [member, devices] of participants) {
-            // Repeat the member for as many devices as they're using
-            for (let i = 0; i < devices.size; i++) members.push(member);
-        }
-        return members;
-    }, [participants]);
+    return useMemo(() => [...participants.keys()], [participants]);
 };

apps/web/src/i18n/strings/en_EN.json

@@ -3891,6 +3891,16 @@
         "call_held": "%(peerName)s held the call",
         "call_held_resume": "You held the call <a>Resume</a>",
         "call_held_switch": "You held the call <a>Switch</a>",
+        "call_members": {
+            "exhaustive": {
+                "one": "<avatars/> on the call",
+                "other": "<avatars/> on the call"
+            },
+            "overflow": {
+                "one": "<avatars/> +%(overflowCount)s on the call",
+                "other": "<avatars/> +%(overflowCount)s on the call"
+            }
+        },
         "call_toast_unknown_room": "Unknown room",
         "camera_disabled": "Your camera is turned off",
         "camera_enabled": "Your camera is still enabled",

apps/web/src/toasts/IncomingCallToast.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, useCallback, useEffect, useRef, useState, useId } from "react";
+import React, { type JSX, type ReactNode, useCallback, useEffect, useRef, useState, useId } from "react";
 import {
     type Room,
     type MatrixEvent,
@@ -15,7 +15,7 @@ import {
     EventType,
     MatrixEventEvent,
 } from "matrix-js-sdk/src/matrix";
-import { Button, Form, Heading, InlineField, Label, ToggleInput, Tooltip } from "@vector-im/compound-web";
+import { AvatarStack, Button, Form, Heading, InlineField, Label, ToggleInput, Tooltip } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
 import {
@@ -34,8 +34,7 @@ import defaultDispatcher from "../dispatcher/dispatcher";
 import { type ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../dispatcher/actions";
 import ToastStore from "../stores/ToastStore";
-import { LiveContentSummary, LiveContentType } from "../components/views/rooms/LiveContentSummary";
-import { useCall, useParticipantCount } from "../hooks/useCall";
+import { useCall, useParticipatingMembers } from "../hooks/useCall";
 import AccessibleButton, { type ButtonEvent } from "../components/views/elements/AccessibleButton";
 import { useDispatcher } from "../hooks/useDispatcher";
 import { type ActionPayload } from "../dispatcher/payloads";
@@ -44,6 +43,7 @@ import LegacyCallHandler, { AudioID } from "../LegacyCallHandler";
 import { useEventEmitter, useTypedEventEmitter } from "../hooks/useEventEmitter";
 import { CallStore, CallStoreEvent } from "../stores/CallStore";
 import DMRoomMap from "../utils/DMRoomMap";
+import MemberAvatar from "../components/views/avatars/MemberAvatar";
 
 /**
  * Get the key for the incoming call toast. A combination of the call ID and room ID.
@@ -279,19 +279,30 @@ export function IncomingCallToast({ notificationEvent, toastKey }: Props): JSX.E
     useEventEmitter(CallStore.instance, CallStoreEvent.Call, onCall);
     useEventEmitter(call ?? undefined, CallEvent.Participants, onParticipantChange);
     useEventEmitter(room, RoomEvent.Timeline, onTimelineChange);
+
     const otherUserId = DMRoomMap.shared().getUserIdForRoomId(roomId);
-    const participantCount = useParticipantCount(call);
-    const detailsInformation =
-        notificationContent.notification_type === "ring" ? (
-            <span>{otherUserId}</span>
-        ) : (
-            <LiveContentSummary
-                type={isVoice ? LiveContentType.Voice : LiveContentType.Video}
-                text={isVoice ? _t("common|voice") : _t("common|video")}
-                active={false}
-                participantCount={participantCount}
-            />
-        );
+    const members = useParticipatingMembers(call);
+    const avatars = (): ReactNode => (
+        <AvatarStack className="mx_IncomingCallToast_avatars">
+            {members.slice(0, 3).map((m) => (
+                <MemberAvatar key={m.userId} size="20px" member={m} aria-label={m.name} />
+            ))}
+        </AvatarStack>
+    );
+
+    let detailsInformation: ReactNode;
+    if (notificationContent.notification_type === "ring") {
+        detailsInformation = <span>{otherUserId}</span>;
+    } else if (members.length > 0) {
+        detailsInformation =
+            members.length > 3
+                ? _t(
+                      "voip|call_members|overflow",
+                      { count: members.length, overflowCount: members.length - 3 },
+                      { avatars },
+                  )
+                : _t("voip|call_members|exhaustive", { count: members.length }, { avatars });
+    }
 
     const Icon = isVoice ? VoiceCallSolidIcon : VideoCallSolidIcon;
     const iconLabel = isVoice ? _t("voip|voice_call") : _t("voip|video_call");

apps/web/test/unit-tests/toasts/IncomingCallToast-test.tsx

@@ -154,8 +154,9 @@ describe("IncomingCallToast", () => {
         renderToast();
 
         screen.getByText("Group call started");
-        screen.getByText("Video");
-        screen.getByLabelText("3 people joined");
+        screen.getByLabelText("Video call");
+        screen.getByLabelText("@alice:example.org");
+        screen.getByLabelText("@bob:example.org");
 
         screen.getByRole("button", { name: "Join" });
         screen.getByRole("button", { name: "Ignore" });
@@ -178,7 +179,7 @@ describe("IncomingCallToast", () => {
         renderToast();
 
         screen.getByText("Group call started");
-        screen.getByText("Video");
+        screen.getByLabelText("Video call");
 
         screen.getByRole("button", { name: "Join" });
         screen.getByRole("button", { name: "Ignore" });