Iterative update

2026-04-27 16:32:19 +02:00 · 2026-04-09 12:01:37 +01:00 · 2026-04-09 12:01:37 +01:00 · a573cf1900
commit a573cf1900
parent 380c957444
25 changed files with 457 additions and 356 deletions
--- a/apps/web/playwright/e2e/messages/messages.spec.ts
+++ b/apps/web/playwright/e2e/messages/messages.spec.ts
@ -252,6 +252,7 @@ test.describe("Message url previews", () => {
                        "og:title": "A simple site",
                        "og:description": "And with a brief description",
                        "og:image": mxc,
+                        "og:image:alt": "The riot logo",
                    },
                });
            });
--- a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png
+++ b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png
--- a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png
+++ b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png
--- a/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts
+++ b/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts
@ -325,7 +325,6 @@ export class UrlPreviewGroupViewModel

        const { title, description, siteName } = UrlPreviewGroupViewModel.getBaseMetadataFromResponse(preview, link);
        const author = UrlPreviewGroupViewModel.getAuthorFromResponse(preview);
-        const playable = !!preview["og:video"] || !!preview["og:video:type"] || !!preview["og:audio"];
        const hasImage = preview["og:image"] && typeof preview?.["og:image"] === "string";
        // Ensure we have something relevant to render.
        // The title must not just be the link, or we must have an image.
@ -340,6 +339,7 @@ export class UrlPreviewGroupViewModel
            const declaredWidth = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["og:image:width"]);
            const imageSize = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]);
            const alt = typeof preview["og:image:alt"] === "string" ? preview["og:image:alt"] : undefined;
+            const playable = !!preview["og:video"] || !!preview["og:video:type"] || !!preview["og:audio"];

            const isImagePreview = UrlPreviewGroupViewModel.isImagePreview(declaredWidth, declaredHeight, imageSize);
            if (isImagePreview) {
@ -356,6 +356,7 @@ export class UrlPreviewGroupViewModel
                        height,
                        fileSize: UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]),
                        alt,
+                        playable,
                    };
                }
            } else if (media.srcHttp) {
@ -370,9 +371,8 @@ export class UrlPreviewGroupViewModel
            description,
            siteName,
            siteIcon,
-            showTooltipOnLink: link !== title && PlatformPeg.get()?.needsUrlTooltips(),
+            showTooltipOnLink: !!(link !== title && PlatformPeg.get()?.needsUrlTooltips()),
            image,
-            playable,
        } satisfies UrlPreview;
        this.previewCache.set(link, result);
        return result;
--- a/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts
+++ b/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts
@ -327,6 +327,6 @@ describe("UrlPreviewGroupViewModel", () => {
        const msg = document.createElement("div");
        msg.innerHTML = `<a href="https://example.org">test</a>`;
        await vm.updateEventElement(msg);
-        expect(vm.getSnapshot().previews[0].playable).toEqual(true);
+        expect(vm.getSnapshot().previews[0].image?.playable).toEqual(true);
    });
 });
--- a/packages/shared-components/vis/linux/baselines/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png
+++ b/packages/shared-components/vis/linux/baselines/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png
--- a/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png
+++ b/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png
--- a/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png
+++ b/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png
--- a/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png
+++ b/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png
--- a/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png
+++ b/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png
--- a/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png
+++ b/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png
--- a/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png
+++ b/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png
--- a/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png
+++ b/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png
--- a/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png
+++ b/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png
--- a/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png
+++ b/packages/shared-components/vis/linux/baselines/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
+++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
@ -9,7 +9,7 @@
    display: flex;
    position: relative;
    width: 100%;
-    height: 200px;
+    height: 255px;
    background-size: cover;
    background-position: center;
    border: none;
@ -23,17 +23,17 @@
        width: 50px;
        height: 50px;
        margin: auto;
-        color: var(--cpd-color-gray-800);
+        background: var(--cpd-color-text-on-solid-primary);
        > svg {
            margin: auto;
            border-radius: 50px;
-            color: var(--cpd-color-gray-400);
+            color: var(--cpd-color-icon-primary);
        }
    }
 }

 .container {
-    max-width: 478px;
+    max-width: 500px;
    display: flex;
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    border-radius: 12px; /* Get radius from cpd */
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
+++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
@ -21,6 +21,16 @@ export default {
    args: {
        onImageClick: fn(),
    },
+    argTypes: {
+        siteName: {
+            control: "text",
+        },
+        author: {
+            control: "text",
+        },
+        siteIcon: { control: { type: "file", accept: ".png" } },
+        image: {},
+    },
    parameters: {
        design: {
            type: "figma",
@ -44,6 +54,8 @@ Default.args = {
    image: {
        imageThumb: imageFile,
        imageFull: imageFile,
+        alt: "Element logo",
+        playable: false,
    },
 };

@ -62,6 +74,15 @@ TitleAndDescription.args = {
    siteName: "matrix.org",
 };

+export const WithSiteIcon = Template.bind({});
+WithSiteIcon.args = {
+    title: "A simple title",
+    description: "A simple description with a link to https://matrix.org",
+    link: "https://matrix.org",
+    siteName: "matrix.org",
+    siteIcon: imageFile,
+};
+
 export const WithTooltip = Template.bind({});
 WithTooltip.args = {
    title: "A simple title",
@ -81,6 +102,8 @@ Article.args = {
    image: {
        imageThumb: imageFileWide,
        imageFull: imageFileWide,
+        alt: "A dog",
+        playable: false,
    },
 };

@ -91,10 +114,11 @@ Video.args = {
        "This is a link to a video. You cannot play the video inline yet, but you can click the play button to open the link",
    link: "https://matrix.org",
    siteName: "blog.example.org",
-    playable: true,
    image: {
        imageThumb: imageFileWide,
        imageFull: imageFileWide,
+        alt: "A dog",
+        playable: true,
    },
 };

@ -117,6 +141,8 @@ SocialWithImage.args = {
    image: {
        imageThumb: imageFileWide,
        imageFull: imageFileWide,
+        alt: "A dog",
+        playable: false,
    },
 };

@ -130,5 +156,7 @@ WithVeryLongText.args = {
    image: {
        imageThumb: imageFile,
        imageFull: imageFile,
+        alt: "Element logo",
+        playable: false,
    },
 };
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.test.tsx
+++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.test.tsx
@ -13,7 +13,7 @@ import userEvent from "@testing-library/user-event";

 import * as stories from "./LinkPreview.stories.tsx";

-const { Default, WithTooltip, Title, TitleAndDescription } = composeStories(stories);
+const { Default, WithTooltip, Title, TitleAndDescription, Video } = composeStories(stories);

 describe("LinkPreview", () => {
    it("renders a preview", () => {
@ -36,4 +36,10 @@ describe("LinkPreview", () => {
        // Tooltip has the URL
        expect(await screen.findByText("https://matrix.org/")).toBeVisible();
    });
+    it("renders a playable preview that can be opened with a click", () => {
+        const { container } = render(<Video />);
+        expect(container).toMatchSnapshot();
+        const button = screen.getByLabelText("Open link");
+        expect(button).toHaveAttribute("href", "https://matrix.org");
+    });
 });
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
+++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
@ -50,8 +50,8 @@ export function LinkPreview({ onImageClick, ...preview }: LinkPreviewProps): JSX

    let img: JSX.Element | undefined;
    // Don't render a button to show the image, just hide it outright
-    if (preview.image?.imageThumb) {
-        if (preview.playable) {
+    if (preview.image) {
+        if (preview.image.playable) {
            img = (
                <div
                    style={{
@ -59,24 +59,26 @@ export function LinkPreview({ onImageClick, ...preview }: LinkPreviewProps): JSX
                    }}
                    className={styles.preview}
                >
-                    {preview.playable && (
-                        <Button
-                            as="a"
-                            href={preview.link}
-                            aria-label={_t("timeline|url_preview|view_image")}
-                            className={styles.playButton}
-                            target="_blank"
-                            rel="noreferrer noopener"
-                            kind="primary"
-                        >
-                            <PlaySolidIcon width="24px" height="24px" />
-                        </Button>
-                    )}
+                    <Button
+                        as="a"
+                        href={preview.link}
+                        aria-label={_t("timeline|url_preview|open_link")}
+                        className={styles.playButton}
+                        target="_blank"
+                        rel="noreferrer noopener"
+                        kind="primary"
+                    >
+                        <PlaySolidIcon width="24px" height="24px" />
+                    </Button>
                </div>
            );
        } else {
            img = (
-                <button className={styles.preview} onClick={onImageClickHandler}>
+                <button
+                    className={styles.preview}
+                    onClick={onImageClickHandler}
+                    aria-label={_t("timeline|url_preview|view_image")}
+                >
                    <img src={preview.image.imageThumb} alt={preview.image.alt} title={preview.image.alt} />
                </button>
            );
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/snapshots/LinkPreview.test.tsx.snap
+++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/snapshots/LinkPreview.test.tsx.snap
@ -1,48 +1,127 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

+exports[`LinkPreview > renders a playable preview that can be opened with a click 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <div
+      class="preview"
+      style="background-image: url("/static/wideImage.png");"
+    >
+      <a
+        aria-label="Open link"
+        class="_button_13vu4_8 playButton"
+        data-kind="primary"
+        data-size="lg"
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        role="link"
+        tabindex="0"
+        target="_blank"
+      >
+        <svg
+          fill="currentColor"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
+          />
+        </svg>
+      </a>
+    </div>
+    <div
+      class="textContent"
+    >
+      <a
+        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        A linked video
+      </a>
+      <p
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+      >
+        This is a link to a video. You cannot play the video inline yet, but you can click the play button to open the link
+      </p>
+      <div
+        class="siteName"
+      >
+        <span
+          aria-label="blog.example.org"
+          class="_avatar_zysgz_8 _avatar-imageless_zysgz_55"
+          data-color="5"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 16px;"
+        >
+          b
+        </span>
+        <span
+          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+        >
+          blog.example.org
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`LinkPreview > renders a preview 1`] = `
 <div>
  <div
    class="container"
  >
-    <div
-      class="wrapImageCaption"
+    <button
+      aria-label="View image"
+      class="preview"
    >
-      <button
-        aria-label="View image"
-        class="image"
+      <img
+        alt="Element logo"
+        src="/static/element.png"
+        title="Element logo"
+      />
+    </button>
+    <div
+      class="textContent"
+    >
+      <a
+        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
      >
-        <img
-          alt=""
-          class="thumbnail"
-          src="/static/element.png"
-        />
-      </button>
+        A simple title
+      </a>
+      <p
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+      >
+        A simple description
+      </p>
      <div
-        class="caption"
+        class="siteName"
      >
-        <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+        <span
+          aria-label="Site name"
+          class="_avatar_zysgz_8 _avatar-imageless_zysgz_55"
+          data-color="3"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 16px;"
        >
-          <a
-            class="link"
-            href="https://matrix.org"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            A simple title
-          </a>
-          <span
-            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
-          >
-             - Site name
-          </span>
-        </p>
-        <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+          S
+        </span>
+        <span
+          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
        >
-          A simple description
-        </p>
+          Site name
+        </span>
      </div>
    </div>
  </div>
@ -52,26 +131,44 @@ exports[`LinkPreview > renders a preview 1`] = `
 exports[`LinkPreview > renders a preview with just a title 1`] = `
 <div>
  <div
-    class="container"
+    class="container inline"
  >
    <div
-      class="wrapImageCaption"
+      class="siteAvatar"
    >
-      <div
-        class="caption"
+      <span
+        aria-label="A simple title"
+        class="_avatar_zysgz_8 _avatar-imageless_zysgz_55"
+        data-color="6"
+        data-type="square"
+        role="img"
+        style="--cpd-avatar-size: 48px;"
      >
-        <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+        A
+      </span>
+    </div>
+    <div
+      class="textContent"
+    >
+      <a
+        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        A simple title
+      </a>
+      <p
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+      />
+      <div
+        class="siteName"
+      >
+        <span
+          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
        >
-          <a
-            class="link"
-            href="https://matrix.org"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            A simple title
-          </a>
-        </p>
+          matrix.org
+        </span>
      </div>
    </div>
  </div>
@ -81,39 +178,54 @@ exports[`LinkPreview > renders a preview with just a title 1`] = `
 exports[`LinkPreview > renders a preview with just a title and description 1`] = `
 <div>
  <div
-    class="container"
+    class="container inline"
  >
    <div
-      class="wrapImageCaption"
+      class="siteAvatar"
    >
-      <div
-        class="caption"
+      <span
+        aria-label="A simple title"
+        class="_avatar_zysgz_8 _avatar-imageless_zysgz_55"
+        data-color="6"
+        data-type="square"
+        role="img"
+        style="--cpd-avatar-size: 48px;"
      >
-        <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+        A
+      </span>
+    </div>
+    <div
+      class="textContent"
+    >
+      <a
+        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+        href="https://matrix.org"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        A simple title
+      </a>
+      <p
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+      >
+        A simple description with a link to 
+        <a
+          data-linkified="true"
+          href="https://matrix.org"
+          rel="noreferrer noopener"
+          target="_blank"
        >
-          <a
-            class="link"
-            href="https://matrix.org"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            A simple title
-          </a>
-        </p>
-        <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+          https://matrix.org
+        </a>
+      </p>
+      <div
+        class="siteName"
+      >
+        <span
+          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
        >
-          A simple description with a link to 
-          <a
-            data-linkified="true"
-            href="https://matrix.org"
-            rel="noreferrer noopener"
-            target="_blank"
-          >
-            https://matrix.org
-          </a>
-        </p>
+          matrix.org
+        </span>
      </div>
    </div>
  </div>
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
+++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
@ -65,9 +65,12 @@ Default.args = {
            title: "A simple title",
            description: "A simple description",
            link: "https://matrix.org",
+            showTooltipOnLink: false,
            image: {
                imageThumb: imageFile,
                imageFull: imageFile,
+                alt: "The element logo",
+                playable: false,
            },
        },
    ],
@ -80,9 +83,12 @@ MultiplePreviewsHidden.args = {
            title: "A simple title",
            description: "A simple description",
            link: "https://matrix.org",
+            showTooltipOnLink: false,
            image: {
                imageThumb: imageFile,
                imageFull: imageFile,
+                alt: "The element logo",
+                playable: false,
            },
        },
    ],
@ -98,9 +104,12 @@ MultiplePreviewsVisible.args = {
            title: "One",
            description: "A regular square image.",
            link: "https://matrix.org",
+            showTooltipOnLink: false,
            image: {
                imageThumb: imageFile,
                imageFull: imageFile,
+                alt: "The element logo",
+                playable: false,
            },
        },
        // These images should appear the same size despite having different dimensions.
@ -108,18 +117,24 @@ MultiplePreviewsVisible.args = {
            title: "Two",
            description: "This one has a taller image which should crop nicely.",
            link: "https://matrix.org",
+            showTooltipOnLink: false,
            image: {
                imageThumb: tallImageFile,
                imageFull: tallImageFile,
+                alt: "A dog",
+                playable: false,
            },
        },
        {
            title: "Three",
            description: "One more description",
            link: "https://matrix.org",
+            showTooltipOnLink: false,
            image: {
                imageThumb: imageFile,
                imageFull: imageFile,
+                alt: "The element logo",
+                playable: false,
            },
        },
    ],
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/snapshots/UrlPreviewGroupView.test.tsx.snap
+++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/snapshots/UrlPreviewGroupView.test.tsx.snap
@ -11,40 +11,32 @@ exports[`UrlPreviewGroupView > renders a single preview 1`] = `
      <div
        class="container"
      >
-        <div
-          class="wrapImageCaption"
+        <button
+          aria-label="View image"
+          class="preview"
        >
-          <button
-            aria-label="View image"
-            class="image"
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
+            A simple title
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                A simple title
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              A simple description
-            </p>
-          </div>
+            A simple description
+          </p>
        </div>
      </div>
    </div>
@ -88,118 +80,94 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
      <div
        class="container"
      >
-        <div
-          class="wrapImageCaption"
+        <button
+          aria-label="View image"
+          class="preview"
        >
-          <button
-            aria-label="View image"
-            class="image"
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
+            One
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                One
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              A regular square image.
-            </p>
-          </div>
+            A regular square image.
+          </p>
        </div>
      </div>
      <div
        class="container"
      >
-        <div
-          class="wrapImageCaption"
+        <button
+          aria-label="View image"
+          class="preview"
        >
-          <button
-            aria-label="View image"
-            class="image"
+          <img
+            alt="A dog"
+            src="/static/tallImage.png"
+            title="A dog"
+          />
+        </button>
+        <div
+          class="textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/tallImage.png"
-            />
-          </button>
-          <div
-            class="caption"
+            Two
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                Two
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              This one has a taller image which should crop nicely.
-            </p>
-          </div>
+            This one has a taller image which should crop nicely.
+          </p>
        </div>
      </div>
      <div
        class="container"
      >
-        <div
-          class="wrapImageCaption"
+        <button
+          aria-label="View image"
+          class="preview"
        >
-          <button
-            aria-label="View image"
-            class="image"
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
+            Three
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                Three
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              One more description
-            </p>
-          </div>
+            One more description
+          </p>
        </div>
      </div>
      <button
@ -252,40 +220,32 @@ exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] =
      <div
        class="container"
      >
-        <div
-          class="wrapImageCaption"
+        <button
+          aria-label="View image"
+          class="preview"
        >
-          <button
-            aria-label="View image"
-            class="image"
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
+            A simple title
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                A simple title
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              A simple description
-            </p>
-          </div>
+            A simple description
+          </p>
        </div>
      </div>
      <button
@ -338,118 +298,94 @@ exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
      <div
        class="container"
      >
-        <div
-          class="wrapImageCaption"
+        <button
+          aria-label="View image"
+          class="preview"
        >
-          <button
-            aria-label="View image"
-            class="image"
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
+            One
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                One
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              A regular square image.
-            </p>
-          </div>
+            A regular square image.
+          </p>
        </div>
      </div>
      <div
        class="container"
      >
-        <div
-          class="wrapImageCaption"
+        <button
+          aria-label="View image"
+          class="preview"
        >
-          <button
-            aria-label="View image"
-            class="image"
+          <img
+            alt="A dog"
+            src="/static/tallImage.png"
+            title="A dog"
+          />
+        </button>
+        <div
+          class="textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/tallImage.png"
-            />
-          </button>
-          <div
-            class="caption"
+            Two
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                Two
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              This one has a taller image which should crop nicely.
-            </p>
-          </div>
+            This one has a taller image which should crop nicely.
+          </p>
        </div>
      </div>
      <div
        class="container"
      >
-        <div
-          class="wrapImageCaption"
+        <button
+          aria-label="View image"
+          class="preview"
        >
-          <button
-            aria-label="View image"
-            class="image"
+          <img
+            alt="The element logo"
+            src="/static/element.png"
+            title="The element logo"
+          />
+        </button>
+        <div
+          class="textContent"
+        >
+          <a
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 title"
+            href="https://matrix.org"
+            rel="noreferrer noopener"
+            target="_blank"
          >
-            <img
-              alt=""
-              class="thumbnail"
-              src="/static/element.png"
-            />
-          </button>
-          <div
-            class="caption"
+            Three
+          </a>
+          <p
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
          >
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
-            >
-              <a
-                class="link"
-                href="https://matrix.org"
-                rel="noreferrer noopener"
-                target="_blank"
-              >
-                Three
-              </a>
-            </p>
-            <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
-            >
-              One more description
-            </p>
-          </div>
+            One more description
+          </p>
        </div>
      </div>
      <button
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/types.ts
+++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/types.ts
@ -13,7 +13,7 @@ export interface UrlPreview {
    /**
     * Should the link have a tooltip. Should be `true` if the platform does not provide a tooltip.
     */
-    showTooltipOnLink?: boolean;
+    showTooltipOnLink: boolean;
    /**
     * The title of the page being previewed.
     */
@ -58,15 +58,15 @@ export interface UrlPreview {
         * Alt text for the image
         */
        alt?: string;
+
+        /**
+         * Is the media playable.
+         */
+        playable: boolean;
    };

    /**
     * Author of the content, if specified.
     */
    author?: string;
-
-    /**
-     * Is the media playable.
-     */
-    playable?: boolean;
 }
--- a/packages/shared-components/src/i18n/strings/en_EN.json
+++ b/packages/shared-components/src/i18n/strings/en_EN.json
@ -223,7 +223,8 @@
                "one": "Show %(count)s other preview",
                "other": "Show %(count)s other previews"
            },
-            "view_image": "View image"
+            "view_image": "View image",
+            "open_link": "Open link"
        }
    },
    "widget": {
--- a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/snapshots/VideoBodyView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/snapshots/VideoBodyView.test.tsx.snap
@ -79,7 +79,7 @@ exports[`VideoBodyView > matches snapshot for ready story 1`] = `
        crossorigin="anonymous"
        poster="/static/element.png"
        preload="none"
-        src="http://localhost:63315/static/videoBodyDemo.webm"
+        src="http://127.0.0.1:63315/static/videoBodyDemo.webm"
      />
    </div>
    <div>