element-hq · Siriusmart · Jul 28, 2026 · Jul 28, 2026 · Jul 29, 2026 · Jul 29, 2026
@@ -22,6 +22,7 @@ Please see LICENSE files in the repository root for full details.
     --MBody-border-radius: 8px;
     --EventTileBubble_margin-block: 10px;
     --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
+    --MediaPreview-width: 478px; /* keep in sync with PREVIEW_WIDTH_PX in src/utils/UrlPreviewFetcher.ts */
 
     /* Expected z-indexes for dialogs:
         4000 - Default wrapper index

@@ -598,6 +598,11 @@ describe("WysiwygComposer", () => {
 
             customRender(client, roomContext, editorState);
             await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
+            // Once ready, the composer puts its own caret at the end of the editor. That happens in
+            // an effect flushed after contentEditable lands in the DOM, so waiting for the attribute
+            // alone lets it run *after* a test has placed the caret, clobbering the selection the
+            // test set up. Wait for it here so the tests always get the last word on the caret.
+            await waitFor(() => expect(document.getSelection()?.anchorNode).toBe(screen.getByRole("textbox")));
             return { textbox: screen.getByRole("textbox"), spyDispatcher };
         };
 

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2026 Element Creations 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 { expect, waitFor } from "storybook/test";
+
+/**
+ * A Storybook `play` helper that waits for every `<video>` in a story to be buffered end to end.
+ *
+ * The native video controls draw a buffered-progress bar, so a snapshot taken while the browser is
+ * still fetching the clip is not reproducible: the bar is a different width on every run. Stories that
+ * use this must point at a clip small enough for the browser to buffer in one go — see
+ * `videoPreviewDemo.webm` — otherwise the browser suspends the download part-way and this never
+ * settles.
+ */
+export async function prepareVideosForSnapshot(canvasElement: HTMLElement): Promise<void> {
+    const videos = Array.from(canvasElement.querySelectorAll("video"));
+
+    await Promise.all(
+        videos.map((video) =>
+            waitFor(() => {
+                expect(video.readyState).toBe(video.HAVE_ENOUGH_DATA);
+                expect(video.buffered.length).toBe(1);
+                expect(video.buffered.end(0)).toBeGreaterThanOrEqual(video.duration);
+            }),
+        ),
+    );
+}
@@ -5,6 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+/* Mirrors the token defined in app/web's _common.pcss, which stories don't load */
+:root {
+    --MediaPreview-width: 478px;
+}
+
 .docs-story {
     background: var(--cpd-color-bg-canvas-default);
 }

@@ -17,7 +17,14 @@ import "./preview.css";
 import React, { useLayoutEffect } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
-import { EventPresentationProvider, type EventDensity, type EventLayout, I18nApi, I18nContext } from "../src";
+import {
+    EventPresentationProvider,
+    type EventDensity,
+    type EventLayout,
+    I18nApi,
+    I18nContext,
+    LinkedTextContext,
+} from "../src";
 import { setLanguage } from "../src/core/i18n/i18n";
 import { type StoryContext } from "storybook/internal/csf";
 import { DragDropProvider } from "@dnd-kit/react";
@@ -161,6 +168,14 @@ const withI18nProvider: Decorator = (Story) => {
     );
 };
 
+const withLinkedTextProvider: Decorator = (Story) => {
+    return (
+        <LinkedTextContext.Provider value={{}}>
+            <Story />
+        </LinkedTextContext.Provider>
+    );
+};
+
 const withEventPresentationProvider: Decorator = (Story, context) => {
     return (
         <EventPresentationProvider
@@ -210,6 +225,7 @@ const preview: Preview = {
         withEventPresentationProvider,
         withTooltipProvider,
         withI18nProvider,
+        withLinkedTextProvider,
         withDragDropProvider,
     ],
     parameters: {

@@ -369,7 +369,10 @@
                 "one": "Show %(count)s other preview",
                 "other": "Show %(count)s other previews"
             },
-            "view_image": "View image"
+            "view_audio": "View audio",
+            "view_file": "View file",
+            "view_image": "View image",
+            "view_video": "View video"
         }
     },
     "user_menu": {

@@ -68,6 +68,7 @@ export * from "./room/timeline/event-tile/reactions/ReactionsRowButton";
 export * from "./room/timeline/event-tile/reactions/ReactionsRowButtonTooltip";
 export * from "./room/timeline/event-tile/timestamp/MessageTimestampView";
 export * from "./room/timeline/event-tile/UrlPreviewGroupView";
+export * from "./room/timeline/event-tile/MediaPreviewGroupView";
 export * from "./core/rich-list/RichItem";
 export * from "./core/rich-list/RichList";
 export * from "./room-list/RoomListHeaderView";

@@ -0,0 +1,118 @@
+.header,
+.body {
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
+    min-width: 0;
+    display: -webkit-box;
+    overflow: clip;
+}
+
+.leftGroup {
+    display: flex;
+    gap: var(--cpd-space-3x);
+    flex-grow: 1;
+    min-width: 0;
+}
+
+.header {
+    font-weight: 600;
+}
+
+.body {
+    font-size: var(--cpd-font-size-body-sm);
+    color: var(--cpd-color-text-secondary);
+}
+
+.textContent {
+    display: inline-block;
+    min-width: 0;
+}
+
+.icon {
+    button {
+        border: none;
+        background: none;
+        height: 100%;
+        aspect-ratio: 100%;
+        align-items: center;
+        justify-content: center;
+        display: flex;
+        border-radius: 6px;
+        cursor: pointer;
+    }
+
+    display: flex;
+    height: 100%;
+    aspect-ratio: 1;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    border-radius: 6px;
+    border: 1px solid var(--cpd-color-icon-quaternary);
+    background-color: var(--cpd-color-bg-decorative-4);
+
+    svg {
+        display: block;
+        height: 57%;
+        width: 57%;
+    }
+}
+
+.buttonGroup {
+    display: flex;
+    gap: 12px;
+}
+
+.button {
+    background: none;
+    border: none;
+    cursor: pointer;
+
+    svg {
+        color: var(--cpd-color-icon-secondary);
+        display: block;
+        height: calc(var(--cpd-icon-button-size) * 0.625);
+        width: calc(var(--cpd-icon-button-size) * 0.625);
+    }
+}
+
+.button:hover svg {
+    color: var(--cpd-color-icon-primary);
+}
+
+.image button,
+.video button,
+.audio button {
+    cursor: pointer;
+    background: none;
+    border: none;
+    width: 100%;
+    padding: 0;
+}
+
+.image img,
+.video video,
+.audio audio {
+    width: 100%;
+    display: block;
+}
+
+.video.bannerVideo video,
+.image.bannerImage img {
+    max-height: 100px;
+    object-fit: cover;
+}
+
+.video.tallBannerVideo video,
+.image.tallBannerImage img {
+    max-height: 300px;
+    object-fit: cover;
+}
+
+.video.fullVideo video,
+.image.fullImage img {
+    max-height: 300px;
+    object-fit: contain;
+}