Redesign link previews (#33061)

* Commit design update * Add figma links * Check in other changes * revert accidental change * Iterative update * linting n test fiddles * linting * Cleanup * update snaps * Move URL previews to new home * Fix paths * compress img * Add back all the stories * Improved rendering * Fixup * Update previews again * lint * update stories * Update snaps again * More screenshots * Also these * Update snaps * include site name * Update snaps again * Use a scale so the images don't go blur * update snaps again * Update snaps * remove mistaken playwright cfg * update pw snaps * update snap * update previews * Update with new designs * Update screenshots
2026-04-22 13:23:24 +00:00
parent 2d16498fe6
commit 9df7182c0c
53 changed files with 1427 additions and 943 deletions
@@ -125,6 +125,32 @@ describe("UrlPreviewGroupViewModel", () => {
        await vm.updateEventElement(msg);
        expect(vm.getSnapshot()).toMatchSnapshot();
    });
+    it.each<Partial<IPreviewUrlResponse>>([
+        { "matrix:image:size": 8191 },
+        { "og:image:width": 95 },
+        { "og:image:height": 95 },
+    ])("should preview a URL with a site icon", async (extraResp) => {
+        const { vm, client } = getViewModel();
+        client.getUrlPreview.mockResolvedValueOnce({
+            "og:title": "This is an example!",
+            "og:type": "document",
+            "og:url": "https://example.org",
+            "og:image": IMAGE_MXC,
+            "og:image:height": 128,
+            "og:image:width": 128,
+            "matrix:image:size": 8193,
+            ...extraResp,
+        });
+        // eslint-disable-next-line no-restricted-properties
+        client.mxcUrlToHttp.mockImplementation((url) => {
+            expect(url).toEqual(IMAGE_MXC);
+            return "https://example.org/image/src";
+        });
+        const msg = document.createElement("div");
+        msg.innerHTML = '<a href="https://example.org">Test</a>';
+        await vm.updateEventElement(msg);
+        expect(vm.getSnapshot().previews[0].siteIcon).toBeTruthy();
+    });
    it("should ignore media when mediaVisible is false", async () => {
        const { vm, client } = getViewModel({ mediaVisible: false, visible: true });
        client.getUrlPreview.mockResolvedValueOnce({
@@ -200,6 +226,41 @@ describe("UrlPreviewGroupViewModel", () => {
        expect(vm.getSnapshot()).toMatchSnapshot();
    });

+    describe("calculates author", () => {
+        it("should use the profile:username if provided", async () => {
+            const { vm, client } = getViewModel();
+            client.getUrlPreview.mockResolvedValueOnce({ ...BASIC_PREVIEW_OGDATA, "profile:username": "my username" });
+            const msg = document.createElement("div");
+            msg.innerHTML = '<a href="https://example.org">Test</a>';
+            await vm.updateEventElement(msg);
+            expect(vm.getSnapshot().previews[0].author).toEqual("my username");
+        });
+        it("should use author if the og:type is an article", async () => {
+            const { vm, client } = getViewModel();
+            client.getUrlPreview.mockResolvedValueOnce({
+                ...BASIC_PREVIEW_OGDATA,
+                "og:type": "article",
+                "article:author": "my name",
+            });
+            const msg = document.createElement("div");
+            msg.innerHTML = '<a href="https://example.org">Test</a>';
+            await vm.updateEventElement(msg);
+            expect(vm.getSnapshot().previews[0].author).toEqual("my name");
+        });
+        it("should NOT use author if the author is a URL", async () => {
+            const { vm, client } = getViewModel();
+            client.getUrlPreview.mockResolvedValueOnce({
+                ...BASIC_PREVIEW_OGDATA,
+                "og:type": "article",
+                "article:author": "https://junk.example.org/foo",
+            });
+            const msg = document.createElement("div");
+            msg.innerHTML = '<a href="https://example.org">Test</a>';
+            await vm.updateEventElement(msg);
+            expect(vm.getSnapshot().previews[0].author).toBeUndefined();
+        });
+    });
+
    it.each([
        { text: "", href: "", hasPreview: false },
        { text: "test", href: "noprotocol.example.org", hasPreview: false },
@@ -232,7 +293,7 @@ describe("UrlPreviewGroupViewModel", () => {
            // API *may* return a string, so check we parse correctly.
            "og:image:height": "500" as unknown as number,
            "og:image:width": 500,
-            "matrix:image:size": 1024,
+            "matrix:image:size": 10000,
            "og:image": IMAGE_MXC,
        },
    ])("handles different kinds of opengraph responses %s", async (og) => {
@@ -251,4 +312,25 @@ describe("UrlPreviewGroupViewModel", () => {
        await vm.updateEventElement(msg);
        expect(vm.getSnapshot().previews[0]).toMatchSnapshot();
    });
+
+    it.each<string>(["og:video", "og:video:type", "og:audio"])("detects playable links via %s", async (property) => {
+        const { vm, client } = getViewModel();
+        // eslint-disable-next-line no-restricted-properties
+        client.mxcUrlToHttp.mockImplementation((url, width) => {
+            expect(url).toEqual(IMAGE_MXC);
+            if (width) {
+                return "https://example.org/image/thumb";
+            }
+            return "https://example.org/image/src";
+        });
+        client.getUrlPreview.mockResolvedValueOnce({
+            ...BASIC_PREVIEW_OGDATA,
+            "og:image": IMAGE_MXC,
+            [property]: "anything",
+        });
+        const msg = document.createElement("div");
+        msg.innerHTML = `<a href="https://example.org">test</a>`;
+        await vm.updateEventElement(msg);
+        expect(vm.getSnapshot().previews[0].image?.playable).toEqual(true);
+    });
 });