Show a face pile on a space preview

res/css/_components.scss

@@ -111,12 +111,13 @@
 @import "./views/elements/_AddressSelector.scss";
 @import "./views/elements/_AddressTile.scss";
 @import "./views/elements/_DesktopBuildsNotice.scss";
-@import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_DesktopCapturerSourcePicker.scss";
+@import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_ErrorBoundary.scss";
 @import "./views/elements/_EventListSummary.scss";
+@import "./views/elements/_FacePile.scss";
 @import "./views/elements/_Field.scss";
 @import "./views/elements/_FormButton.scss";
 @import "./views/elements/_ImageView.scss";
@@ -217,7 +218,6 @@
 @import "./views/settings/_DevicesPanel.scss";
 @import "./views/settings/_E2eAdvancedPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
-@import "./views/settings/_SpellCheckLanguages.scss";
 @import "./views/settings/_IntegrationManager.scss";
 @import "./views/settings/_Notifications.scss";
 @import "./views/settings/_PhoneNumbers.scss";
@@ -225,6 +225,7 @@
 @import "./views/settings/_SecureBackupPanel.scss";
 @import "./views/settings/_SetIdServer.scss";
 @import "./views/settings/_SetIntegrationManager.scss";
+@import "./views/settings/_SpellCheckLanguages.scss";
 @import "./views/settings/_UpdateCheckButton.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";

res/css/views/elements/_FacePile.scss

@@ -0,0 +1,40 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_FacePile {
+    .mx_FacePile_faces {
+        display: inline-flex;
+        flex-direction: row-reverse;
+        vertical-align: middle;
+
+        .mx_BaseAvatar {
+            & + .mx_BaseAvatar {
+                margin-right: -10px;
+            }
+        }
+
+        .mx_BaseAvatar_image {
+            border: 1px solid $primary-bg-color;
+        }
+    }
+
+    > span {
+        margin-left: 12px;
+        font-size: $font-14px;
+        line-height: $font-24px;
+        color: $tertiary-fg-color;
+    }
+}

src/components/structures/SpaceRoomView.tsx

@@ -51,6 +51,7 @@ import AutoHideScrollbar from "./AutoHideScrollbar";
 import MemberAvatar from "../views/avatars/MemberAvatar";
 import {useStateToggle} from "../../hooks/useStateToggle";
 import SpaceStore from "../../stores/SpaceStore";
+import FacePile from "../views/elements/FacePile";
 
 interface IProps {
     space: Room;
@@ -158,8 +159,10 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         joinButtons = <InlineSpinner />;
     }
 
+    const joinRule = space.getJoinRule();
+
     let visibilitySection;
-    if (space.getJoinRule() === "public") {
+    if (joinRule === "public") {
         visibilitySection = <span className="mx_SpaceRoomView_preview_info_public">
             { _t("Public space") }
         </span>;
@@ -177,7 +180,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         </h1>
         <div className="mx_SpaceRoomView_preview_info">
             { visibilitySection }
-            <RoomMemberCount room={space}>
+            { joinRule === "public" && <RoomMemberCount room={space}>
                 {(count) => count > 0 ? (
                     <AccessibleButton
                         className="mx_SpaceRoomView_preview_memberCount"
@@ -193,7 +196,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
                         { _t("%(count)s members", { count }) }
                     </AccessibleButton>
                 ) : null}
-            </RoomMemberCount>
+            </RoomMemberCount> }
         </div>
         <RoomTopic room={space}>
             {(topic, ref) =>
@@ -202,6 +205,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
                 </div>
             }
         </RoomTopic>
+        { joinRule === "public" && <FacePile room={space} /> }
         <div className="mx_SpaceRoomView_preview_joinButtons">
             { joinButtons }
         </div>

src/components/views/elements/FacePile.tsx

@@ -0,0 +1,49 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+
+import MemberAvatar from "../avatars/MemberAvatar";
+import { _t } from "../../../languageHandler";
+import DMRoomMap from "../../../utils/DMRoomMap";
+
+const DEFAULT_NUM_FACES = 5;
+
+interface IProps {
+    room: Room;
+    numShown?: number;
+}
+
+const FacePile = ({ room, numShown = DEFAULT_NUM_FACES }: IProps) => {
+    const knownMembers = room.getJoinedMembers().filter(member => {
+        return !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
+    });
+
+    if (knownMembers.length < 1) return null;
+    const shownMembers = knownMembers.slice(0, numShown);
+
+    return <div className="mx_FacePile">
+        <div className="mx_FacePile_faces">
+            { shownMembers.map(member => <MemberAvatar key={member.userId} member={member} width={28} height={28} />) }
+        </div>
+        <span>
+            { _t("%(count)s people you know have already joined", { count: knownMembers.length }) }
+        </span>
+    </div>
+};
+
+export default FacePile;

src/i18n/strings/en_EN.json

@@ -1906,6 +1906,8 @@
     "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.": "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.",
     "collapse": "collapse",
     "expand": "expand",
+    "%(count)s people you know have already joined|other": "%(count)s people you know have already joined",
+    "%(count)s people you know have already joined|one": "%(count)s person you know has already joined",
     "You cannot delete this image. (%(code)s)": "You cannot delete this image. (%(code)s)",
     "Uploaded on %(date)s by %(user)s": "Uploaded on %(date)s by %(user)s",
     "Rotate Left": "Rotate Left",