Add facepile to homepage

src/ConferenceCallManagerHooks.js

@@ -285,15 +285,26 @@ export function useGroupCallRooms(client) {
       const groupCalls = client.groupCallEventHandler.groupCalls.values();
       const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
       const sortedRooms = sortRooms(client, rooms);
-      setRooms(sortedRooms);
+      const items = sortedRooms.map((room) => {
+        const groupCall = client.getGroupCallForRoom(room.roomId);
+
+        return {
+          room,
+          groupCall,
+          participants: [...groupCall.participants],
+        };
+      });
+      setRooms(items);
     }
 
     updateRooms();
 
     client.on("GroupCall.incoming", updateRooms);
+    client.on("GroupCall.participants", updateRooms);
 
     return () => {
       client.removeListener("GroupCall.incoming", updateRooms);
+      client.removeListener("GroupCall.participants", updateRooms);
     };
   }, []);
 

src/Facepile.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styles from "./Facepile.module.css";
+import ColorHash from "color-hash";
+
+const colorHash = new ColorHash({ lightness: 0.3 });
+
+export function Facepile({ participants }) {
+  console.log(participants);
+  return (
+    <div
+      className={styles.facepile}
+      title={participants.map((member) => member.name).join(", ")}
+    >
+      {participants.map((member) => (
+        <div
+          className={styles.avatar}
+          style={{ backgroundColor: colorHash.hex(member.name) }}
+        >
+          <span>{member.name.slice(0, 1).toUpperCase()}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

src/Facepile.module.css

@@ -0,0 +1,25 @@
+.facepile {
+  margin: 0 16px;
+}
+
+.facepile .avatar {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+}
+
+.facepile .avatar > * {
+  position: absolute;
+  left: 0;
+  color: #fff;
+  text-align: center;
+  pointer-events: none;
+  font-weight: 600;
+}
+
+.facepile .avatar span {
+  font-size: 14px;
+  width: 20px;
+  line-height: 20px;
+}

src/Home.jsx

@@ -29,6 +29,7 @@ import {
   GroupCallIntent,
   GroupCallType,
 } from "matrix-js-sdk/src/browser-index";
+import { Facepile } from "./Facepile";
 
 const colorHash = new ColorHash({ lightness: 0.3 });
 
@@ -171,7 +172,7 @@ export function Home({ client, onLogout }) {
             <section>
               <h3>Recent Rooms</h3>
               <div className={styles.roomList}>
-                {rooms.map((room) => (
+                {rooms.map(({ room, participants }) => (
                   <Link
                     className={styles.roomListItem}
                     key={room.roomId}
@@ -184,6 +185,7 @@ export function Home({ client, onLogout }) {
                       <span>{room.name.slice(0, 1)}</span>
                     </div>
                     <div className={styles.roomName}>{room.name}</div>
+                    <Facepile participants={participants} />
                   </Link>
                 ))}
               </div>