Additional in-room PTT styling

src/Facepile.jsx

@@ -4,35 +4,55 @@ import classNames from "classnames";
 import { Avatar } from "./Avatar";
 import { getAvatarUrl } from "./matrix-utils";
 
-export function Facepile({ className, client, participants, ...rest }) {
+export function Facepile({
+  className,
+  client,
+  participants,
+  max,
+  size,
+  ...rest
+}) {
+  const _size = size === "md" ? 36 : 24;
+  const _overlap = size === "md" ? 8 : 2;
+
   return (
     <div
-      className={classNames(styles.facepile, className)}
+      className={classNames(
+        styles.facepile,
+        { [styles.md]: size === "md" },
+        className
+      )}
       title={participants.map((member) => member.name).join(", ")}
+      style={{ width: participants.length * _size + _overlap }}
       {...rest}
     >
-      {participants.slice(0, 3).map((member, i) => {
+      {participants.slice(0, max).map((member, i) => {
         const avatarUrl = member.user?.avatarUrl;
         return (
           <Avatar
             key={member.userId}
-            size="xs"
-            src={avatarUrl && getAvatarUrl(client, avatarUrl, 22)}
+            size={size}
+            src={avatarUrl && getAvatarUrl(client, avatarUrl, _size)}
             fallback={member.name.slice(0, 1).toUpperCase()}
             className={styles.avatar}
-            style={{ left: i * 22 }}
+            style={{ left: i * (_size - _overlap) }}
           />
         );
       })}
-      {participants.length > 3 && (
+      {participants.length > max && (
         <Avatar
           key="additional"
-          size="xs"
-          fallback={`+${participants.length - 3}`}
+          size={size}
+          fallback={`+${participants.length - max}`}
           className={styles.avatar}
-          style={{ left: 3 * 22 }}
+          style={{ left: max * (_size - _overlap) }}
         />
       )}
     </div>
   );
 }
+
+Facepile.defaultProps = {
+  max: 3,
+  size: "xs",
+};