diff --git a/package.json b/package.json index 3886b129818..7cda6fa5ace 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "@matrix-org/spec": "^1.7.0", "@sentry/browser": "^8.0.0", "@types/png-chunks-extract": "^1.0.2", - "@vector-im/compound-design-tokens": "^2.0.1", + "@vector-im/compound-design-tokens": "^2.1.0", "@vector-im/compound-web": "^7.5.0", "@vector-im/matrix-wysiwyg": "2.38.0", "@zxcvbn-ts/core": "^3.0.4", @@ -151,7 +151,9 @@ "temporal-polyfill": "^0.2.5", "ua-parser-js": "^1.0.2", "uuid": "^11.0.0", - "what-input": "^5.2.10" + "what-input": "^5.2.10", + "@types/react-virtualized": "^9.21.30", + "react-virtualized": "^9.22.5" }, "devDependencies": { "@action-validator/cli": "^0.6.0", diff --git a/playwright/e2e/crypto/dehydration.spec.ts b/playwright/e2e/crypto/dehydration.spec.ts index 7c1bbd7ac48..6d7b6c0c7e9 100644 --- a/playwright/e2e/crypto/dehydration.spec.ts +++ b/playwright/e2e/crypto/dehydration.spec.ts @@ -16,7 +16,7 @@ const ROOM_NAME = "Test room"; const NAME = "Alice"; function getMemberTileByName(page: Page, name: string): Locator { - return page.locator(`.mx_EntityTile, [title="${name}"]`); + return page.locator(`.mx_MemberTileView, [title="${name}"]`); } test.use({ @@ -88,7 +88,7 @@ test.describe("Dehydration", () => { await viewRoomSummaryByName(page, app, ROOM_NAME); await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click(); - await expect(page.locator(".mx_MemberList")).toBeVisible(); + await expect(page.locator(".mx_MemberListView")).toBeVisible(); await getMemberTileByName(page, NAME).click(); await page.locator(".mx_UserInfo_devices .mx_UserInfo_expand").click(); diff --git a/playwright/e2e/lazy-loading/lazy-loading.spec.ts b/playwright/e2e/lazy-loading/lazy-loading.spec.ts index 6c9457dfafb..ace6fdb7380 100644 --- a/playwright/e2e/lazy-loading/lazy-loading.spec.ts +++ b/playwright/e2e/lazy-loading/lazy-loading.spec.ts @@ -78,7 +78,7 @@ test.describe("Lazy Loading", () => { } function getMemberInMemberlist(page: Page, name: string): Locator { - return page.locator(".mx_MemberList .mx_EntityTile_name").filter({ hasText: name }); + return page.locator(".mx_MemberListView .mx_MemberTileView_name").filter({ hasText: name }); } async function checkMemberList(page: Page, charlies: Bot[]) { diff --git a/playwright/e2e/right-panel/memberlist.spec.ts b/playwright/e2e/right-panel/memberlist.spec.ts new file mode 100644 index 00000000000..1275e243b6a --- /dev/null +++ b/playwright/e2e/right-panel/memberlist.spec.ts @@ -0,0 +1,48 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { test, expect } from "../../element-web-test"; +import { Bot } from "../../pages/bot"; + +const ROOM_NAME = "Test room"; +const NAME = "Alice"; + +test.use({ + synapseConfigOptions: { + presence: { + enabled: false, + include_offline_users_on_sync: false, + }, + }, + displayName: NAME, + disablePresence: true, +}); + +test.describe("Memberlist", () => { + test.beforeEach(async ({ app, user, page, homeserver }, testInfo) => { + testInfo.setTimeout(testInfo.timeout + 30_000); + const id = await app.client.createRoom({ name: ROOM_NAME }); + const newBots: Bot[] = []; + const names = ["Bob", "Bob", "Susan"]; + for (let i = 0; i < 3; i++) { + const displayName = names[i]; + const autoAcceptInvites = displayName !== "Susan"; + const bot = new Bot(page, homeserver, { displayName, startClient: true, autoAcceptInvites }); + await bot.prepareClient(); + await app.client.inviteUser(id, bot.credentials?.userId); + newBots.push(bot); + } + }); + + test("Renders correctly", { tag: "@screenshot" }, async ({ page, app }) => { + await app.viewRoomByName(ROOM_NAME); + const memberlist = await app.toggleMemberlistPanel(); + await expect(memberlist.locator(".mx_MemberTileView")).toHaveCount(4); + await expect(memberlist.getByText("(Invited)")).toHaveCount(1); + await expect(page.locator(".mx_MemberListView")).toMatchScreenshot("with-four-members.png"); + }); +}); diff --git a/playwright/e2e/right-panel/right-panel.spec.ts b/playwright/e2e/right-panel/right-panel.spec.ts index 2f51f92587e..cb2a11ac002 100644 --- a/playwright/e2e/right-panel/right-panel.spec.ts +++ b/playwright/e2e/right-panel/right-panel.spec.ts @@ -24,7 +24,7 @@ const ROOM_ADDRESS_LONG = "loremIpsumDolorSitAmetConsecteturAdipisicingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliqua"; function getMemberTileByName(page: Page, name: string): Locator { - return page.locator(`.mx_EntityTile, [title="${name}"]`); + return page.locator(`.mx_MemberTileView, [title="${name}"]`); } test.describe("RightPanel", () => { @@ -107,14 +107,14 @@ test.describe("RightPanel", () => { await viewRoomSummaryByName(page, app, ROOM_NAME); await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click(); - await expect(page.locator(".mx_MemberList")).toBeVisible(); + await expect(page.locator(".mx_MemberListView")).toBeVisible(); await getMemberTileByName(page, NAME).click(); await expect(page.locator(".mx_UserInfo")).toBeVisible(); await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible(); await page.getByTestId("base-card-back-button").click(); - await expect(page.locator(".mx_MemberList")).toBeVisible(); + await expect(page.locator(".mx_MemberListView")).toBeVisible(); await page.getByLabel("Room info").nth(1).click(); await checkRoomSummaryCard(page, ROOM_NAME); @@ -130,14 +130,14 @@ test.describe("RightPanel", () => { .locator(".mx_RoomInfoLine_private") .getByRole("button", { name: /\d member/ }) .click(); - await expect(page.locator(".mx_MemberList")).toBeVisible(); + await expect(page.locator(".mx_MemberListView")).toBeVisible(); await getMemberTileByName(page, NAME).click(); await expect(page.locator(".mx_UserInfo")).toBeVisible(); await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible(); await page.getByTestId("base-card-back-button").click(); - await expect(page.locator(".mx_MemberList")).toBeVisible(); + await expect(page.locator(".mx_MemberListView")).toBeVisible(); }); }); }); diff --git a/playwright/element-web-test.ts b/playwright/element-web-test.ts index 0246bed537b..0c6392fdc21 100644 --- a/playwright/element-web-test.ts +++ b/playwright/element-web-test.ts @@ -99,6 +99,7 @@ export interface Fixtures { bot: Bot; labsFlags: string[]; webserver: Webserver; + disablePresence: boolean; } export const test = base.extend({ @@ -110,8 +111,9 @@ export const test = base.extend({ ); await use(context); }, + disablePresence: false, config: {}, // We merge this atop the default CONFIG_JSON in the page fixture to make extending it easier - page: async ({ homeserver, context, page, config, labsFlags }, use) => { + page: async ({ homeserver, context, page, config, labsFlags, disablePresence }, use) => { await context.route(`http://localhost:8080/config.json*`, async (route) => { const json = { ...CONFIG_JSON, @@ -131,6 +133,11 @@ export const test = base.extend({ return obj; }, {}), }; + if (disablePresence) { + json["enable_presence_by_hs_url"] = { + [homeserver.baseUrl]: false, + }; + } await route.fulfill({ json }); }); await use(page); diff --git a/playwright/pages/ElementAppPage.ts b/playwright/pages/ElementAppPage.ts index a02afd27bad..98d0bf30fba 100644 --- a/playwright/pages/ElementAppPage.ts +++ b/playwright/pages/ElementAppPage.ts @@ -177,6 +177,18 @@ export class ElementAppPage { return this.page.locator(".mx_RightPanel"); } + /** + * Opens/closes the memberlist panel + * @returns locator to the memberlist panel + */ + public async toggleMemberlistPanel(): Promise { + const locator = this.page.locator(".mx_FacePile"); + await locator.click(); + const memberlist = this.page.locator(".mx_MemberListView"); + await memberlist.waitFor(); + return memberlist; + } + /** * Get a locator for the tooltip associated with an element * @param e The element with the tooltip diff --git a/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png b/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png new file mode 100644 index 00000000000..f0e14ee55cf Binary files /dev/null and b/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png differ diff --git a/playwright/testcontainers/synapse.ts b/playwright/testcontainers/synapse.ts index 084ea480051..ecfe0db601a 100644 --- a/playwright/testcontainers/synapse.ts +++ b/playwright/testcontainers/synapse.ts @@ -132,6 +132,10 @@ const DEFAULT_CONFIG = { experimental_features: {}, oidc_providers: [], serve_server_wellknown: true, + presence: { + enabled: true, + include_offline_users_on_sync: true, + }, }; export type SynapseConfigOptions = Partial; diff --git a/res/css/_components.pcss b/res/css/_components.pcss index e9a53cd43cc..b966d62ddd1 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -278,9 +278,9 @@ @import "./views/rooms/_CallGuestLinkButton.pcss"; @import "./views/rooms/_DecryptionFailureBar.pcss"; @import "./views/rooms/_E2EIcon.pcss"; +@import "./views/rooms/_E2EIconView.pcss"; @import "./views/rooms/_EditMessageComposer.pcss"; @import "./views/rooms/_EmojiButton.pcss"; -@import "./views/rooms/_EntityTile.pcss"; @import "./views/rooms/_EventBubbleTile.pcss"; @import "./views/rooms/_EventPreview.pcss"; @import "./views/rooms/_EventTile.pcss"; @@ -290,13 +290,17 @@ @import "./views/rooms/_LinkPreviewGroup.pcss"; @import "./views/rooms/_LinkPreviewWidget.pcss"; @import "./views/rooms/_LiveContentSummary.pcss"; -@import "./views/rooms/_MemberList.pcss"; +@import "./views/rooms/_MemberListHeaderView.pcss"; +@import "./views/rooms/_MemberListView.pcss"; +@import "./views/rooms/_MemberTileView.pcss"; @import "./views/rooms/_MessageComposer.pcss"; @import "./views/rooms/_MessageComposerFormatBar.pcss"; @import "./views/rooms/_NewRoomIntro.pcss"; @import "./views/rooms/_NotificationBadge.pcss"; +@import "./views/rooms/_OverflowTile.pcss"; @import "./views/rooms/_PinnedEventTile.pcss"; @import "./views/rooms/_PinnedMessageBanner.pcss"; +@import "./views/rooms/_PresenceIconView.pcss"; @import "./views/rooms/_PresenceLabel.pcss"; @import "./views/rooms/_ReadReceiptGroup.pcss"; @import "./views/rooms/_ReplyPreview.pcss"; diff --git a/res/css/views/messages/_DisambiguatedProfile.pcss b/res/css/views/messages/_DisambiguatedProfile.pcss index c675ba99ed8..3f10c07abe3 100644 --- a/res/css/views/messages/_DisambiguatedProfile.pcss +++ b/res/css/views/messages/_DisambiguatedProfile.pcss @@ -21,8 +21,29 @@ Please see LICENSE files in the repository root for full details. } .mx_DisambiguatedProfile_mxid { - margin-inline-start: 5px; color: $secondary-content; font-size: var(--cpd-font-size-body-sm); + margin-inline-start: 5px; + } +} + +/** Disambiguated profile needs to have a different layout in the member tile */ +.mx_MemberTileView .mx_DisambiguatedProfile { + display: flex; + flex-direction: column; + + .mx_DisambiguatedProfile_mxid { + margin-inline-start: 0; + font: var(--cpd-font-body-sm-regular); + } + + span:not(.mx_DisambiguatedProfile_mxid) { + /** + In a member tile, this span element is a flex child and so + we need the following for text overflow to work. + **/ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } diff --git a/res/css/views/rooms/_E2EIconView.pcss b/res/css/views/rooms/_E2EIconView.pcss new file mode 100644 index 00000000000..3e2b1d95802 --- /dev/null +++ b/res/css/views/rooms/_E2EIconView.pcss @@ -0,0 +1,20 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +.mx_E2EIconView { + display: flex; + justify-content: center; + align-items: center; +} + +.mx_E2EIconView_warning { + color: var(--cpd-color-icon-critical-primary); +} + +.mx_E2EIconView_verified { + color: var(--cpd-color-icon-success-primary); +} diff --git a/res/css/views/rooms/_EntityTile.pcss b/res/css/views/rooms/_EntityTile.pcss deleted file mode 100644 index 43723dfb67e..00000000000 --- a/res/css/views/rooms/_EntityTile.pcss +++ /dev/null @@ -1,128 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2020 The Matrix.org Foundation C.I.C. -Copyright 2015, 2016 OpenMarket Ltd - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE files in the repository root for full details. -*/ - -.mx_EntityTile { - display: flex; - align-items: center; - color: $primary-content; - cursor: pointer; - - .mx_E2EIcon { - margin: 0; - position: absolute; - bottom: 2px; - right: 7px; - } -} - -.mx_EntityTile:hover { - padding-right: 30px; - position: relative; /* to keep the chevron aligned */ -} - -.mx_EntityTile:hover::before { - content: ""; - position: absolute; - top: calc(50% - 8px); /* center */ - right: -8px; - mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg"); - mask-repeat: no-repeat; - mask-position: center; - width: 16px; - height: 16px; - background-color: $header-panel-text-primary-color; -} - -.mx_EntityTile:not(.mx_EntityTile_unreachable) .mx_PresenceLabel { - display: none; -} - -.mx_EntityTile:hover .mx_PresenceLabel { - display: block; -} - -.mx_EntityTile_invite { - display: table-cell; - vertical-align: middle; - margin-left: 10px; - width: 26px; -} - -.mx_EntityTile_avatar { - padding-left: 3px; - padding-right: 12px; - padding-top: 4px; - padding-bottom: 4px; - position: relative; - line-height: 0; -} - -.mx_EntityTile_name { - flex: 1 1 0; - overflow: hidden; - font: var(--cpd-font-body-md-regular); - text-overflow: ellipsis; - white-space: nowrap; -} - -.mx_EntityTile_details { - overflow: hidden; - flex: 1; -} - -.mx_EntityTile_ellipsis .mx_EntityTile_name { - font-style: italic; - color: $primary-content; -} - -.mx_EntityTile_invitePlaceholder .mx_EntityTile_name { - font-style: italic; - color: $primary-content; -} - -.mx_EntityTile_unavailable .mx_EntityTile_avatar, -.mx_EntityTile_unavailable .mx_EntityTile_name, -.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar, -.mx_EntityTile_offline_beenactive .mx_EntityTile_name { - opacity: 0.5; -} - -.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar, -.mx_EntityTile_offline_neveractive .mx_EntityTile_name { - opacity: 0.25; -} - -.mx_EntityTile_unknown .mx_EntityTile_avatar, -.mx_EntityTile_unknown .mx_EntityTile_name, -.mx_EntityTile_unreachable .mx_EntityTile_avatar, -.mx_EntityTile_unreachable .mx_EntityTile_name { - opacity: 0.25; -} - -.mx_EntityTile_subtext { - font-size: $font-11px; - opacity: 0.5; - overflow: hidden; - white-space: nowrap; - text-overflow: clip; -} - -.mx_EntityTile_power { - padding-inline-start: 6px; - font-size: $font-10px; - color: $secondary-content; - max-width: 6em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.mx_EntityTile:hover .mx_EntityTile_power { - display: none; -} diff --git a/res/css/views/rooms/_MemberList.pcss b/res/css/views/rooms/_MemberList.pcss deleted file mode 100644 index 93d390f7574..00000000000 --- a/res/css/views/rooms/_MemberList.pcss +++ /dev/null @@ -1,69 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2015, 2016 OpenMarket Ltd - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE files in the repository root for full details. -*/ - -.mx_MemberList { - flex: 1; - display: flex; - flex-direction: column; - min-height: 0; - - .mx_Spinner { - flex: 1 0 auto; - } - - .mx_SearchBox { - margin-bottom: 5px; - } - - h2 { - text-transform: uppercase; - color: $h3-color; - font-weight: var(--cpd-font-weight-semibold); - font-size: $font-13px; - padding-left: 3px; - padding-right: 12px; - margin-top: 8px; - margin-bottom: 4px; - } - - .mx_AutoHideScrollbar { - flex: 1 1 0; - margin-top: var(--cpd-space-3x); - } -} - -.mx_MemberList_chevron { - position: absolute; - right: 35px; - margin-top: -15px; -} - -.mx_MemberList_border { - overflow-y: auto; - - order: 1; - flex: 1 1 0px; -} - -.mx_MemberList_query { - height: 16px; - - /* stricter rule to override the one in _common.pcss */ - &[type="text"] { - font-size: $font-12px; - } -} - -.mx_MemberList_wrapper { - padding: 10px; -} - -.mx_MemberList_invite { - margin: 0 var(--cpd-space-2x); - width: calc(100% - var(--cpd-space-4x)); -} diff --git a/res/css/views/rooms/_MemberListHeaderView.pcss b/res/css/views/rooms/_MemberListHeaderView.pcss new file mode 100644 index 00000000000..326cf84dd6c --- /dev/null +++ b/res/css/views/rooms/_MemberListHeaderView.pcss @@ -0,0 +1,37 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +.mx_MemberListHeaderView { + border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400); + max-height: 112px; + + .mx_MemberListHeaderView_container { + margin-top: var(--cpd-space-6x); + width: 100%; + } + + .mx_MemberListHeaderView_invite_small { + margin-left: var(--cpd-space-3x); + } + + .mx_MemberListHeaderView_invite_large { + width: 288px; + height: 36px; + } + + .mx_MemberListHeaderView_label { + padding: var(--cpd-space-6x) 0 var(--cpd-space-2x) var(--cpd-space-4x); + box-sizing: border-box; + width: 100%; + color: var(--cpd-color-text-secondary); + font: var(--cpd-font-body-sm-semibold); + } + + .mx_MemberListHeaderView_search { + width: 240px; + } +} diff --git a/res/css/views/rooms/_MemberListView.pcss b/res/css/views/rooms/_MemberListView.pcss new file mode 100644 index 00000000000..e13b17b226e --- /dev/null +++ b/res/css/views/rooms/_MemberListView.pcss @@ -0,0 +1,17 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +.mx_MemberListView { + flex: 1; + display: flex; + flex-direction: column; + min-height: 0; + + .mx_MemberListView_container { + height: 100%; + } +} diff --git a/res/css/views/rooms/_MemberTileView.pcss b/res/css/views/rooms/_MemberTileView.pcss new file mode 100644 index 00000000000..702edd8f9d2 --- /dev/null +++ b/res/css/views/rooms/_MemberTileView.pcss @@ -0,0 +1,58 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +.mx_MemberTileView { + display: flex; + padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-4x); + box-sizing: border-box; + height: 56px; + border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-300); + + .mx_MemberTileView_left, + .mx_MemberTileView_right { + display: flex; + align-items: center; + gap: var(--cpd-space-2x); + } + + .mx_MemberTileView_left { + flex-basis: 209px; + flex-grow: 1; + min-width: 0; + } + + .mx_MemberTileView_name { + font: var(--cpd-font-body-md-medium); + font-size: 15px; + min-width: 0; + } + + .mx_MemberTileView_user_label { + font: var(--cpd-font-body-sm-regular); + font-size: 13px; + } + + .mx_MemberTileView_avatar { + position: relative; + height: 32px; + width: 32px; + } + + .mx_E2EIconView { + display: flex; + justify-content: center; + align-items: center; + } + + .mx_E2EIconView_warning { + color: var(--cpd-color-icon-critical-primary); + } + + .mx_E2EIconView_verified { + color: var(--cpd-color-icon-success-primary); + } +} diff --git a/res/css/views/rooms/_OverflowTile.pcss b/res/css/views/rooms/_OverflowTile.pcss new file mode 100644 index 00000000000..a0ac5bb4f61 --- /dev/null +++ b/res/css/views/rooms/_OverflowTile.pcss @@ -0,0 +1,51 @@ +/* +Copyright 2024 New Vector Ltd. +Copyright 2020 The Matrix.org Foundation C.I.C. +Copyright 2015, 2016 OpenMarket Ltd + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +.mx_OverflowTileView { + display: flex; + align-items: center; + color: $primary-content; + cursor: pointer; +} + +.mx_OverflowTileView_text { + flex: 1 1 0; + overflow: hidden; + font: var(--cpd-font-body-md-regular); + text-overflow: ellipsis; + white-space: nowrap; + font-style: italic; +} + +.mx_OverflowTileView:hover { + padding-right: 30px; + position: relative; /* to keep the chevron aligned */ +} + +.mx_OverflowTileView:hover::before { + content: ""; + position: absolute; + top: calc(50% - 8px); /* center */ + right: -8px; + mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg"); + mask-repeat: no-repeat; + mask-position: center; + width: 16px; + height: 16px; + background-color: $header-panel-text-primary-color; +} + +.mx_OverflowTileView_icon { + padding-left: 3px; + padding-right: 12px; + padding-top: 4px; + padding-bottom: 4px; + position: relative; + line-height: 0; +} diff --git a/res/css/views/rooms/_PresenceIconView.pcss b/res/css/views/rooms/_PresenceIconView.pcss new file mode 100644 index 00000000000..e09fbdf2fa1 --- /dev/null +++ b/res/css/views/rooms/_PresenceIconView.pcss @@ -0,0 +1,32 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +.mx_PresenceIconView { + position: absolute; + top: 24px; + left: 24px; + width: 12px; + height: 12px; + display: flex; + justify-content: center; + align-items: center; + background: var(--cpd-color-bg-canvas-default); + border-radius: 100%; + + .mx_PresenceIconView_online { + color: var(--cpd-color-icon-accent-primary); + } + + .mx_PresenceIconView_offline, + .mx_PresenceIconView_dnd { + color: var(--cpd-color-icon-tertiary); + } + + .mx_PresenceIconView_unavailable { + color: var(--cpd-color-icon-quaternary); + } +} diff --git a/src/components/structures/MainSplit.tsx b/src/components/structures/MainSplit.tsx index 79ba7ab7dbf..540aec251f0 100644 --- a/src/components/structures/MainSplit.tsx +++ b/src/components/structures/MainSplit.tsx @@ -99,7 +99,7 @@ export default class MainSplit extends React.Component { ; interface IState { phase?: RightPanelPhases; - searchQuery: string; cardState?: IRightPanelCardState; } @@ -67,10 +66,6 @@ export default class RightPanel extends React.Component { public constructor(props: Props, context: React.ContextType) { super(props, context); - - this.state = { - searchQuery: "", - }; } private readonly delayedUpdate = throttle( @@ -147,10 +142,6 @@ export default class RightPanel extends React.Component { } }; - private onSearchQueryChanged = (searchQuery: string): void => { - this.setState({ searchQuery }); - }; - public render(): React.ReactNode { let card =
; const roomId = this.props.room?.roomId; @@ -159,15 +150,7 @@ export default class RightPanel extends React.Component { switch (phase) { case RightPanelPhases.MemberList: if (!!roomId) { - card = ( - - ); + card = ; } break; diff --git a/src/components/viewmodels/memberlist/MemberListViewModel.tsx b/src/components/viewmodels/memberlist/MemberListViewModel.tsx new file mode 100644 index 00000000000..4a1a2d59f19 --- /dev/null +++ b/src/components/viewmodels/memberlist/MemberListViewModel.tsx @@ -0,0 +1,263 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { + ClientEvent, + EventType, + MatrixEvent, + Room, + RoomEvent, + RoomMemberEvent, + RoomState, + RoomStateEvent, + RoomMember as SdkRoomMember, + User, + UserEvent, +} from "matrix-js-sdk/src/matrix"; +import { KnownMembership } from "matrix-js-sdk/src/types"; +import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; +import { throttle } from "lodash"; + +import { RoomMember } from "../../../models/rooms/RoomMember"; +import { mediaFromMxc } from "../../../customisations/Media"; +import UserIdentifierCustomisations from "../../../customisations/UserIdentifier"; +import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; +import { UIComponent } from "../../../settings/UIFeature"; +import { PresenceState } from "../../../models/rooms/PresenceState"; +import { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; +import { SDKContext } from "../../../contexts/SDKContext"; +import PosthogTrackers from "../../../PosthogTrackers"; +import { ButtonEvent } from "../../views/elements/AccessibleButton"; +import { inviteToRoom } from "../../../utils/room/inviteToRoom"; +import { canInviteTo } from "../../../utils/room/canInviteTo"; +import { isValid3pidInvite } from "../../../RoomInvite"; +import { ThreePIDInvite } from "../../../models/rooms/ThreePIDInvite"; +import { XOR } from "../../../@types/common"; +import { useTypedEventEmitter } from "../../../hooks/useEventEmitter"; + +type Member = XOR<{ member: RoomMember }, { threePidInvite: ThreePIDInvite }>; + +export function getPending3PidInvites(room: Room, searchQuery?: string): Member[] { + // include 3pid invites (m.room.third_party_invite) state events. + // The HS may have already converted these into m.room.member invites so + // we shouldn't add them if the 3pid invite state key (token) is in the + // member invite (content.third_party_invite.signed.token) + const inviteEvents = room.currentState.getStateEvents("m.room.third_party_invite").filter(function (e) { + if (!isValid3pidInvite(e)) return false; + if (searchQuery && !(e.getContent().display_name as string)?.includes(searchQuery)) return false; + + // discard all invites which have a m.room.member event since we've + // already added them. + const memberEvent = room.currentState.getInviteForThreePidToken(e.getStateKey()!); + if (memberEvent) return false; + return true; + }); + const invites: Member[] = inviteEvents.map((e) => { + return { + threePidInvite: { + event: e, + }, + }; + }); + return invites; +} + +export function sdkRoomMemberToRoomMember(member: SdkRoomMember): Member { + const displayUserId = + UserIdentifierCustomisations.getDisplayUserIdentifier(member.userId, { + roomId: member.roomId, + }) ?? member.userId; + + const mxcAvatarURL = member.getMxcAvatarUrl(); + const avatarThumbnailUrl = + (mxcAvatarURL && mediaFromMxc(mxcAvatarURL).getThumbnailOfSourceHttp(96, 96, "crop")) ?? undefined; + + const user = member.user; + let presenceState: PresenceState | undefined; + if (user) { + presenceState = (user.presence as PresenceState) || undefined; + } + + return { + member: { + roomId: member.roomId, + userId: member.userId, + displayUserId: displayUserId, + name: member.name, + rawDisplayName: member.rawDisplayName, + disambiguate: member.disambiguate, + avatarThumbnailUrl: avatarThumbnailUrl, + powerLevel: member.powerLevel, + lastModifiedTime: member.getLastModifiedTime(), + presenceState, + isInvite: member.membership === KnownMembership.Invite, + }, + }; +} + +export interface MemberListViewState { + members: Member[]; + search: (searchQuery: string) => void; + isPresenceEnabled: boolean; + shouldShowInvite: boolean; + shouldShowSearch: boolean; + isLoading: boolean; + canInvite: boolean; + onInviteButtonClick: (ev: ButtonEvent) => void; +} +export function useMemberListViewModel(roomId: string): MemberListViewState { + const cli = useMatrixClientContext(); + + const room = useMemo(() => cli.getRoom(roomId), [roomId, cli]); + if (!room) { + throw new Error(`Room with id ${roomId} does not exist!`); + } + + const sdkContext = useContext(SDKContext); + const [memberMap, setMemberMap] = useState>(new Map()); + const [isLoading, setIsLoading] = useState(true); + + // This is the last known total number of members in this room. + const totalMemberCount = useRef(0); + + const searchQuery = useRef(""); + + const loadMembers = useMemo( + () => + throttle( + async (): Promise => { + const { joined: joinedSdk, invited: invitedSdk } = await sdkContext.memberListStore.loadMemberList( + roomId, + searchQuery.current, + ); + const newMemberMap = new Map(); + // First add the invited room members + for (const member of invitedSdk) { + const roomMember = sdkRoomMemberToRoomMember(member); + newMemberMap.set(member.userId, roomMember); + } + // Then add the third party invites + const threePidInvited = getPending3PidInvites(room, searchQuery.current); + for (const invited of threePidInvited) { + const key = invited.threePidInvite!.event.getContent().display_name; + newMemberMap.set(key, invited); + } + // Finally add the joined room members + for (const member of joinedSdk) { + const roomMember = sdkRoomMemberToRoomMember(member); + newMemberMap.set(member.userId, roomMember); + } + setMemberMap(newMemberMap); + if (!searchQuery.current) { + /** + * Since searching for members only gives you the relevant + * members matching the query, do not update the totalMemberCount! + **/ + totalMemberCount.current = newMemberMap.size; + } + }, + 500, + { leading: true, trailing: true }, + ), + [roomId, sdkContext.memberListStore, room], + ); + + const search = useCallback( + (query: string) => { + searchQuery.current = query; + loadMembers(); + }, + [loadMembers], + ); + + const isPresenceEnabled = useMemo( + () => sdkContext.memberListStore.isPresenceEnabled(), + [sdkContext.memberListStore], + ); + + // Determines whether the rendered invite button is enabled or disabled + const getCanUserInviteToThisRoom = useCallback((): boolean => !!room && canInviteTo(room), [room]); + const [canInvite, setCanInvite] = useState(getCanUserInviteToThisRoom()); + + // Determines whether the invite button should be shown or not. + const getShouldShowInvite = useCallback( + (): boolean => room?.getMyMembership() === KnownMembership.Join && shouldShowComponent(UIComponent.InviteUsers), + [room], + ); + const [shouldShowInvite, setShouldShowInvite] = useState(getShouldShowInvite()); + + const onInviteButtonClick = (ev: ButtonEvent): void => { + PosthogTrackers.trackInteraction("WebRightPanelMemberListInviteButton", ev); + ev.preventDefault(); + inviteToRoom(room); + }; + + useTypedEventEmitter(cli, RoomStateEvent.Events, (event: MatrixEvent) => { + if (event.getRoomId() === roomId && event.getType() === EventType.RoomThirdPartyInvite) { + loadMembers(); + const newCanInvite = getCanUserInviteToThisRoom(); + setCanInvite(newCanInvite); + } + }); + + useTypedEventEmitter(cli, RoomStateEvent.Update, (state: RoomState) => { + if (state.roomId === roomId) loadMembers(); + }); + + useTypedEventEmitter(cli, RoomMemberEvent.Name, (_: MatrixEvent, member: SdkRoomMember) => { + if (member.roomId === roomId) loadMembers(); + }); + + useTypedEventEmitter(cli, ClientEvent.Room, (room: Room) => { + // We listen for room events because when we accept an invite + // we need to wait till the room is fully populated with state + // before refreshing the member list else we get a stale list. + if (room.roomId === roomId) loadMembers(); + }); + + useTypedEventEmitter(cli, RoomEvent.MyMembership, (room: Room, membership: string, oldMembership?: string) => { + if (room.roomId !== roomId) return; + if (membership === KnownMembership.Join && oldMembership !== KnownMembership.Join) { + // we just joined the room, load the member list + loadMembers(); + const newShouldShowInvite = getShouldShowInvite(); + setShouldShowInvite(newShouldShowInvite); + } + }); + + useTypedEventEmitter(cli, UserEvent.Presence, (_: MatrixEvent | undefined, user: User) => { + if (memberMap.has(user.userId)) loadMembers(); + }); + + useTypedEventEmitter(cli, UserEvent.CurrentlyActive, (_: MatrixEvent | undefined, user: User) => { + if (memberMap.has(user.userId)) loadMembers(); + }); + + // Initial load of the memberlist + useEffect(() => { + (async () => { + await loadMembers(); + /** + * isLoading is used to render a spinner on initial call. + * Further calls need not mutate this state since it's perfectly fine to + * show the existing memberlist until the new one loads. + */ + setIsLoading(false); + })(); + }, [loadMembers]); + + return { + members: Array.from(memberMap.values()), + search, + shouldShowInvite, + isPresenceEnabled, + isLoading, + onInviteButtonClick, + shouldShowSearch: totalMemberCount.current >= 20, + canInvite, + }; +} diff --git a/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx b/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx new file mode 100644 index 00000000000..ade40e9b97b --- /dev/null +++ b/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx @@ -0,0 +1,160 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import { useEffect, useMemo, useState } from "react"; +import { RoomStateEvent, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix"; +import { UserVerificationStatus, CryptoEvent } from "matrix-js-sdk/src/crypto-api"; + +import dis from "../../../../dispatcher/dispatcher"; +import { MatrixClientPeg } from "../../../../MatrixClientPeg"; +import { Action } from "../../../../dispatcher/actions"; +import { asyncSome } from "../../../../utils/arrays"; +import { getUserDeviceIds } from "../../../../utils/crypto/deviceInfo"; +import { RoomMember } from "../../../../models/rooms/RoomMember"; +import { E2EState } from "../../../views/rooms/E2EIcon"; +import { _t, _td, TranslationKey } from "../../../../languageHandler"; +import UserIdentifierCustomisations from "../../../../customisations/UserIdentifier"; + +interface MemberTileViewModelProps { + member: RoomMember; + showPresence?: boolean; +} + +export interface MemberTileViewState extends MemberTileViewModelProps { + e2eStatus?: E2EState; + name: string; + onClick: () => void; + title?: string; + userLabel?: string; +} + +export enum PowerStatus { + Admin = "admin", + Moderator = "moderator", +} + +const PowerLabel: Record = { + [PowerStatus.Admin]: _td("power_level|admin"), + [PowerStatus.Moderator]: _td("power_level|moderator"), +}; + +export function useMemberTileViewModel(props: MemberTileViewModelProps): MemberTileViewState { + const [e2eStatus, setE2eStatus] = useState(); + + useEffect(() => { + const cli = MatrixClientPeg.safeGet(); + + const updateE2EStatus = async (): Promise => { + const { userId } = props.member; + const isMe = userId === cli.getUserId(); + const userTrust = await cli.getCrypto()?.getUserVerificationStatus(userId); + if (!userTrust?.isCrossSigningVerified()) { + setE2eStatus(userTrust?.wasCrossSigningVerified() ? E2EState.Warning : E2EState.Normal); + return; + } + + const deviceIDs = await getUserDeviceIds(cli, userId); + const anyDeviceUnverified = await asyncSome(deviceIDs, async (deviceId) => { + // For your own devices, we use the stricter check of cross-signing + // verification to encourage everyone to trust their own devices via + // cross-signing so that other users can then safely trust you. + // For other people's devices, the more general verified check that + // includes locally verified devices can be used. + const deviceTrust = await cli.getCrypto()?.getDeviceVerificationStatus(userId, deviceId); + return !deviceTrust || (isMe ? !deviceTrust.crossSigningVerified : !deviceTrust.isVerified()); + }); + setE2eStatus(anyDeviceUnverified ? E2EState.Warning : E2EState.Verified); + }; + + const onRoomStateEvents = (ev: MatrixEvent): void => { + if (ev.getType() !== EventType.RoomEncryption) return; + const { roomId } = props.member; + if (ev.getRoomId() !== roomId) return; + + // The room is encrypted now. + cli.removeListener(RoomStateEvent.Events, onRoomStateEvents); + updateE2EStatus(); + }; + + const onUserTrustStatusChanged = (userId: string, trustStatus: UserVerificationStatus): void => { + if (userId !== props.member.userId) return; + updateE2EStatus(); + }; + + const { roomId } = props.member; + if (roomId) { + const isRoomEncrypted = cli.isRoomEncrypted(roomId); + if (isRoomEncrypted) { + cli.on(CryptoEvent.UserTrustStatusChanged, onUserTrustStatusChanged); + updateE2EStatus(); + } else { + // Listen for room to become encrypted + cli.on(RoomStateEvent.Events, onRoomStateEvents); + } + } + + return () => { + if (cli) { + cli.removeListener(RoomStateEvent.Events, onRoomStateEvents); + cli.removeListener(CryptoEvent.UserTrustStatusChanged, onUserTrustStatusChanged); + } + }; + }, [props.member]); + + const onClick = (): void => { + dis.dispatch({ + action: Action.ViewUser, + member: props.member, + push: true, + }); + }; + + const member = props.member; + const name = props.member.name; + + const powerStatusMap = new Map([ + [100, PowerStatus.Admin], + [50, PowerStatus.Moderator], + ]); + + // Find the nearest power level with a badge + let powerLevel = props.member.powerLevel; + for (const [pl] of powerStatusMap) { + if (props.member.powerLevel >= pl) { + powerLevel = pl; + break; + } + } + + const title = useMemo(() => { + return _t("member_list|power_label", { + userName: UserIdentifierCustomisations.getDisplayUserIdentifier(member.userId, { + roomId: member.roomId, + }), + powerLevelNumber: member.powerLevel, + }).trim(); + }, [member.powerLevel, member.roomId, member.userId]); + + let userLabel; + const powerStatus = powerStatusMap.get(powerLevel); + if (powerStatus) { + userLabel = _t(PowerLabel[powerStatus]); + } + if (props.member.isInvite) { + userLabel = `(${_t("member_list|invited_label")})`; + } + + return { + title, + member, + name, + onClick, + e2eStatus, + showPresence: props.showPresence, + userLabel, + }; +} diff --git a/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx b/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx new file mode 100644 index 00000000000..daeb8d899f4 --- /dev/null +++ b/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx @@ -0,0 +1,35 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import dis from "../../../../dispatcher/dispatcher"; +import { Action } from "../../../../dispatcher/actions"; +import { ThreePIDInvite } from "../../../../models/rooms/ThreePIDInvite"; + +interface ThreePidTileViewModelProps { + threePidInvite: ThreePIDInvite; +} + +export interface ThreePidTileViewState { + name: string; + onClick: () => void; +} + +export function useThreePidTileViewModel(props: ThreePidTileViewModelProps): ThreePidTileViewState { + const invite = props.threePidInvite; + const name = invite.event.getContent().display_name; + const onClick = (): void => { + dis.dispatch({ + action: Action.View3pidInvite, + event: invite.event, + }); + }; + + return { + name, + onClick, + }; +} diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index dc6186a868c..a831acc5d18 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/src/components/views/dialogs/ForwardDialog.tsx @@ -23,8 +23,6 @@ import { TimelineEvents, } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; -// eslint-disable-next-line no-restricted-imports -import OverflowHorizontalSvg from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"; import { _t } from "../../../languageHandler"; import dis from "../../../dispatcher/dispatcher"; @@ -42,8 +40,6 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm"; import QueryMatcher from "../../../autocomplete/QueryMatcher"; import TruncatedList from "../elements/TruncatedList"; -import EntityTile from "../rooms/EntityTile"; -import BaseAvatar from "../avatars/BaseAvatar"; import { Action } from "../../../dispatcher/actions"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; @@ -60,6 +56,7 @@ import { } from "../../../accessibility/RovingTabIndex"; import { getKeyBindingsManager } from "../../../KeyBindingsManager"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; +import { OverflowTileView } from "../rooms/OverflowTileView"; const AVATAR_SIZE = 30; @@ -275,17 +272,9 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr } const [truncateAt, setTruncateAt] = useState(20); + function overflowTile(overflowCount: number, totalCount: number): JSX.Element { - const text = _t("common|and_n_others", { count: overflowCount }); - return ( - } - name={text} - showPresence={false} - onClick={() => setTruncateAt(totalCount)} - /> - ); + return setTruncateAt(totalCount)} />; } const onKeyDown = (ev: React.KeyboardEvent, state: IState): void => { diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx index 4357ac73e0a..660a832d373 100644 --- a/src/components/views/messages/DisambiguatedProfile.tsx +++ b/src/components/views/messages/DisambiguatedProfile.tsx @@ -8,15 +8,21 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; -import { RoomMember } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; import { _t } from "../../../languageHandler"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; import UserIdentifier from "../../../customisations/UserIdentifier"; +interface MemberInfo { + userId: string; + roomId: string; + rawDisplayName?: string; + disambiguate: boolean; +} + interface IProps { - member?: RoomMember | null; + member?: MemberInfo | null; fallbackName: string; onClick?(): void; colored?: boolean; diff --git a/src/components/views/rooms/E2EIcon.tsx b/src/components/views/rooms/E2EIcon.tsx index 3eb789914ba..5366f7621cf 100644 --- a/src/components/views/rooms/E2EIcon.tsx +++ b/src/components/views/rooms/E2EIcon.tsx @@ -22,7 +22,7 @@ export enum E2EState { Normal = "normal", } -const crossSigningUserTitles: { [key in E2EState]?: TranslationKey } = { +export const crossSigningUserTitles: { [key in E2EState]?: TranslationKey } = { [E2EState.Warning]: _td("encryption|cross_signing_user_warning"), [E2EState.Normal]: _td("encryption|cross_signing_user_normal"), [E2EState.Verified]: _td("encryption|cross_signing_user_verified"), diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx deleted file mode 100644 index af4a265b72f..00000000000 --- a/src/components/views/rooms/EntityTile.tsx +++ /dev/null @@ -1,170 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2020 The Matrix.org Foundation C.I.C. -Copyright 2018 New Vector Ltd -Copyright 2015, 2016 OpenMarket Ltd - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE files in the repository root for full details. -*/ - -import React from "react"; -import classNames from "classnames"; - -import AccessibleButton from "../elements/AccessibleButton"; -import { _t, _td, TranslationKey } from "../../../languageHandler"; -import E2EIcon, { E2EState } from "./E2EIcon"; -import BaseAvatar from "../avatars/BaseAvatar"; -import PresenceLabel from "./PresenceLabel"; - -export enum PowerStatus { - Admin = "admin", - Moderator = "moderator", -} - -const PowerLabel: Record = { - [PowerStatus.Admin]: _td("power_level|admin"), - [PowerStatus.Moderator]: _td("power_level|mod"), -}; - -export type PresenceState = "offline" | "online" | "unavailable" | "io.element.unreachable"; - -const PRESENCE_CLASS: Record = { - "offline": "mx_EntityTile_offline", - "online": "mx_EntityTile_online", - "unavailable": "mx_EntityTile_unavailable", - "io.element.unreachable": "mx_EntityTile_unreachable", -}; - -function presenceClassForMember(presenceState?: PresenceState, lastActiveAgo?: number, showPresence?: boolean): string { - if (showPresence === false) { - return "mx_EntityTile_online_beenactive"; - } - - // offline is split into two categories depending on whether we have - // a last_active_ago for them. - if (presenceState === "offline") { - if (lastActiveAgo) { - return PRESENCE_CLASS["offline"] + "_beenactive"; - } else { - return PRESENCE_CLASS["offline"] + "_neveractive"; - } - } else if (presenceState) { - return PRESENCE_CLASS[presenceState]; - } else { - return PRESENCE_CLASS["offline"] + "_neveractive"; - } -} - -interface IProps { - name?: string; - nameJSX?: JSX.Element; - title?: string; - avatarJsx?: JSX.Element; // - className?: string; - presenceState: PresenceState; - presenceLastActiveAgo: number; - presenceLastTs: number; - presenceCurrentlyActive?: boolean; - onClick(): void; - showPresence: boolean; - subtextLabel?: string; - e2eStatus?: E2EState; - powerStatus?: PowerStatus; -} - -interface IState { - hover: boolean; -} - -export default class EntityTile extends React.PureComponent { - public static defaultProps = { - onClick: () => {}, - presenceState: "offline", - presenceLastActiveAgo: 0, - presenceLastTs: 0, - showInviteButton: false, - showPresence: true, - }; - - public constructor(props: IProps) { - super(props); - - this.state = { - hover: false, - }; - } - - /** - * Creates the PresenceLabel component if needed - * @returns The PresenceLabel component if we need to render it, undefined otherwise - */ - private getPresenceLabel(): JSX.Element | undefined { - if (!this.props.showPresence) return; - const activeAgo = this.props.presenceLastActiveAgo - ? Date.now() - (this.props.presenceLastTs - this.props.presenceLastActiveAgo) - : -1; - return ( - - ); - } - - public render(): React.ReactNode { - const mainClassNames: Record = { - mx_EntityTile: true, - }; - if (this.props.className) mainClassNames[this.props.className] = true; - - const presenceClass = presenceClassForMember( - this.props.presenceState, - this.props.presenceLastActiveAgo, - this.props.showPresence, - ); - mainClassNames[presenceClass] = true; - - const name = this.props.nameJSX || this.props.name; - const nameAndPresence = ( -
-
{name}
- {this.getPresenceLabel()} -
- ); - - let powerLabel; - const powerStatus = this.props.powerStatus; - if (powerStatus) { - const powerText = _t(PowerLabel[powerStatus]); - powerLabel =
{powerText}
; - } - - let e2eIcon; - const { e2eStatus } = this.props; - if (e2eStatus) { - e2eIcon = ; - } - - const av = this.props.avatarJsx ||