feat: show call participants in room list (Discord-style)

2026-05-10 14:25:35 +02:00
parent b797925316
commit 3da363517f
4610 changed files with 827237 additions and 1 deletions
@@ -0,0 +1,65 @@
+/*
+Copyright 2026 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";
+
+test.describe("Message links", () => {
+    test.use({
+        displayName: "Alice",
+        room: async ({ user, app, bot }, use) => {
+            const roomId = await app.client.createRoom({ name: "Test room" });
+            await use({ roomId });
+        },
+    });
+    for (const link of ["https://example.org", "ftp://example.org"]) {
+        test(`should linkify a regular link '${link}'`, async ({ page, user, app, room }) => {
+            await page.goto(`#/room/${room.roomId}`);
+            // Needs to be unformatted so we test linkifing
+            await app.client.sendMessage(room.roomId, `Check out ${link}`);
+            const linkElement = page.locator(".mx_EventTile_last").getByRole("link", { name: link });
+            await app.timeline.scrollToBottom();
+            await expect(linkElement).toBeVisible();
+        });
+    }
+    test("should NOT linkify a bare domain", async ({ page, user, app, room }) => {
+        await page.goto(`#/room/${room.roomId}`);
+        // Needs to be unformatted so we test linkifing
+        await app.client.sendMessage(room.roomId, `Check out example.org`);
+        const linkElement = page.locator(".mx_EventTile_last").getByRole("link", { name: "example.org" });
+        await expect(linkElement).not.toBeVisible();
+    });
+    test("should linkify a User ID", async ({ page, user, app, room }) => {
+        await page.goto(`#/room/${room.roomId}`);
+        // Needs to be unformatted so we test linkifing
+        await app.client.sendMessage(room.roomId, `Check out @bob:example.org`);
+        const linkElement = page.locator(".mx_EventTile_last").getByRole("link", { name: "@bob:example.org" });
+        await expect(linkElement).toHaveAttribute("href", `https://matrix.to/#/@bob:example.org`);
+    });
+    test("should linkify a Room alias", async ({ page, user, app, room }) => {
+        await page.goto(`#/room/${room.roomId}`);
+        // Needs to be unformatted so we test linkifing
+        await app.client.sendMessage(room.roomId, "Check out #aroom:example.org");
+        const linkElement = page.locator(".mx_EventTile_last").getByRole("link", { name: "#aroom:example.org" });
+        await expect(linkElement).toHaveAttribute("href", "https://matrix.to/#/#aroom:example.org");
+    });
+    test("should linkify text inside a URL preview", async ({ page, user, app, room }) => {
+        await page.route(/.*\/_matrix\/(client\/v1\/media|media\/v3)\/preview_url.*/, (route, request) => {
+            const requestedPage = new URL(request.url()).searchParams.get("url");
+            expect(requestedPage).toEqual("https://example.org/");
+            return route.fulfill({
+                json: {
+                    "og:title": "A simple site",
+                    "og:description": "And with a brief description containing https://example.org/another-link",
+                },
+            });
+        });
+        await page.goto(`#/room/${room.roomId}`);
+        await app.client.sendMessage(room.roomId, "Check out https://example.org/");
+        await expect(
+            page.locator(".mx_EventTile_last").getByRole("link", { name: "https://example.org/another-link" }),
+        ).toBeVisible();
+    });
+});
@@ -0,0 +1,152 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+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 type { Locator } from "@playwright/test";
+import { test, expect } from "../../element-web-test";
+import { Bot } from "../../pages/bot";
+
+const room1Name = "Room 1";
+const room2Name = "Room 2";
+const unknownRoomAlias = "#unknownroom:example.com";
+const permalinkPrefix = "https://matrix.to/#/";
+
+const getPill = (locator: Locator, label: string) => {
+    return locator.locator(".mx_Pill_text", { hasText: new RegExp("^" + label + "$", "g") });
+};
+
+test.describe("permalinks", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("shoud render permalinks as expected", { tag: "@screenshot" }, async ({ page, app, user, homeserver }) => {
+        const bob = new Bot(page, homeserver, { displayName: "Bob" });
+        const charlotte = new Bot(page, homeserver, { displayName: "Charlotte" });
+        await bob.prepareClient();
+        await charlotte.prepareClient();
+
+        // We don't use a bot for danielle as we want a stable MXID.
+        const danielleId = `@danielle:${user.homeServer}`;
+
+        const room1Id = await app.client.createRoom({ name: room1Name });
+        const room2Id = await app.client.createRoom({ name: room2Name });
+
+        await app.viewRoomByName(room1Name);
+
+        await app.client.inviteUser(room1Id, bob.credentials.userId);
+        await app.client.inviteUser(room2Id, charlotte.credentials.userId);
+
+        await app.client.sendMessage(room1Id, "At room mention: @room");
+
+        await app.client.sendMessage(room1Id, `Permalink to Room 2: ${permalinkPrefix}${room2Id}`);
+        await app.client.sendMessage(
+            room1Id,
+            `Permalink to an unknown room alias: ${permalinkPrefix}${unknownRoomAlias}`,
+        );
+
+        const event1Response = await bob.sendMessage(room1Id, "Hello");
+        await app.client.sendMessage(
+            room1Id,
+            `Permalink to a message in the same room: ${permalinkPrefix}${room1Id}/${event1Response.event_id}`,
+        );
+
+        const event2Response = await charlotte.sendMessage(room2Id, "Hello");
+        await app.client.sendMessage(
+            room1Id,
+            `Permalink to a message in another room: ${permalinkPrefix}${room2Id}/${event2Response.event_id}`,
+        );
+
+        await app.client.sendMessage(room1Id, `Permalink to an unknown message: ${permalinkPrefix}${room1Id}/$abc123`);
+
+        await app.client.sendMessage(
+            room1Id,
+            `Permalink to a user in the room: ${permalinkPrefix}${bob.credentials.userId}`,
+        );
+        await app.client.sendMessage(
+            room1Id,
+            `Permalink to a user in another room: ${permalinkPrefix}${charlotte.credentials.userId}`,
+        );
+        await app.client.sendMessage(
+            room1Id,
+            `Permalink to a user with whom alice doesn't share a room: ${permalinkPrefix}${danielleId}`,
+        );
+
+        const timeline = page.locator(".mx_RoomView_timeline");
+        getPill(timeline, "@room");
+
+        getPill(timeline, room2Name);
+        getPill(timeline, unknownRoomAlias);
+
+        getPill(timeline, "Message from Bob");
+        getPill(timeline, `Message in ${room2Name}`);
+        getPill(timeline, "Message");
+
+        getPill(timeline, "Bob");
+        getPill(timeline, "Charlotte");
+        // This is the permalink to Danielle's profile. It should only display the MXID
+        // because the profile is unknown (not sharing any room with Danielle).
+        getPill(timeline, danielleId);
+
+        await expect(timeline).toMatchScreenshot("permalink-rendering.png", {
+            // Exclude timestamps from the snapshot, for consistency.
+            css: `
+                .mx_MessageTimestamp {
+                    visibility: hidden;
+                }
+            `,
+        });
+    });
+});
+
+test.describe("triple-click message selection", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should select entire message line when triple-clicking on message with pills", async ({
+        page,
+        app,
+        user,
+        bot,
+    }) => {
+        await bot.prepareClient();
+
+        const roomId = await app.client.createRoom({ name: "Test Room" });
+        await app.client.inviteUser(roomId, bot.credentials.userId);
+        await app.viewRoomByName("Test Room");
+
+        // Send a message with user and room pills
+        await app.client.sendMessage(
+            roomId,
+            `Testing triple-click message selection. ` +
+                `User: ${permalinkPrefix}${bot.credentials.userId}, ` +
+                `Room: ${permalinkPrefix}${roomId}, ` +
+                `Message: ${permalinkPrefix}${roomId}/$dummy-event, ` +
+                `and @room mention.`,
+        );
+
+        const timeline = page.locator(".mx_RoomView_timeline");
+        const messageTile = timeline.locator(".mx_EventTile").last();
+
+        // Triple-click on the message body to select its entire content
+        const messageBody = messageTile.locator(".mx_EventTile_body");
+        await messageBody.click({ clickCount: 3 });
+
+        // Get the expected text content of the message, including pills
+        const expectedText = await messageBody.innerText();
+
+        // Get the currently selected text from the page
+        const selectedText = await page.evaluate(() => {
+            const selection = window.getSelection();
+            return selection ? selection.toString().trim() : "";
+        });
+
+        // Verify that the selected text exactly matches the message content
+        expect(selectedText).toBe(expectedText);
+    });
+});
@@ -0,0 +1,42 @@
+/*
+Copyright 2026 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";
+
+test.describe("Topic links", () => {
+    test.use({
+        displayName: "Alice",
+        room: async ({ user, app, bot }, use) => {
+            const roomId = await app.client.createRoom({ name: "Test room" });
+            await use({ roomId });
+        },
+    });
+    for (const link of ["https://example.org", "ftp://example.org", "#aroom:example.org", "@alice:example.org"]) {
+        // Playwright treats '@' as a tag, so replace it to be safe
+        test(`should linkify plaintext '${link.replace("@", "_@")}'`, async ({ page, user, app, room }) => {
+            await app.client.sendStateEvent(
+                room.roomId,
+                "m.room.topic",
+                {
+                    "m.topic": {
+                        // Deliberately no HTML version.
+                        "m.text": [
+                            {
+                                body: `An interesting room topic containing ${link}`,
+                            },
+                        ],
+                    },
+                    "topic": `An interesting room topic containing ${link}`,
+                },
+                "",
+            );
+            await page.goto(`#/room/${room.roomId}`);
+            await expect(page.getByTestId("topic").getByRole("link", { name: link })).toBeVisible();
+            const locator = await app.toggleRoomInfoPanel();
+            await expect(locator.getByRole("link", { name: link })).toBeVisible();
+        });
+    }
+});