diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index df0a1809b3b..94b6ffaa425 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -274,6 +274,49 @@ describe("Timeline", () => { cy.get(".mx_EventTile:not(.mx_EventTile_contextual)").find(".mx_EventTile_searchHighlight").should("exist"); cy.get(".mx_RoomView_searchResultsPanel").percySnapshotElement("Highlighted search results"); }); + + it("should render url previews", () => { + cy.intercept("**/_matrix/media/r0/thumbnail/matrix.org/2022-08-16_yaiSVSRIsNFfxDnV?*", { + statusCode: 200, + fixture: "riot.png", + headers: { + "Content-Type": "image/png", + }, + }).as("mxc"); + cy.intercept("**/_matrix/media/r0/preview_url?url=https%3A%2F%2Fcall.element.io%2F&ts=*", { + statusCode: 200, + body: { + "og:title": "Element Call", + "og:description": null, + "og:image:width": 48, + "og:image:height": 48, + "og:image": "mxc://matrix.org/2022-08-16_yaiSVSRIsNFfxDnV", + "og:image:type": "image/png", + "matrix:image:size": 2121, + }, + headers: { + "Content-Type": "application/json", + }, + }).as("preview_url"); + + cy.sendEvent( + roomId, + null, + "m.room.message" as EventType, + MessageEvent.from("https://call.element.io/").serialize().content, + ); + cy.visit("/#/room/" + roomId); + + cy.get(".mx_LinkPreviewWidget").should("exist").should("contain.text", "Element Call"); + + cy.wait("@preview_url"); + cy.wait("@mxc"); + + cy.checkA11y(); + cy.get(".mx_EventTile_last").percySnapshotElement("URL Preview", { + widths: [800, 400], + }); + }); }); describe("message sending", () => { diff --git a/res/css/views/rooms/_LinkPreviewWidget.pcss b/res/css/views/rooms/_LinkPreviewWidget.pcss index ceb715275db..7949233a9f4 100644 --- a/res/css/views/rooms/_LinkPreviewWidget.pcss +++ b/res/css/views/rooms/_LinkPreviewWidget.pcss @@ -32,6 +32,7 @@ limitations under the License. display: flex; flex-wrap: wrap; row-gap: $spacing-8; + flex: 1; .mx_LinkPreviewWidget_image, .mx_LinkPreviewWidget_caption { diff --git a/src/components/views/rooms/LinkPreviewWidget.tsx b/src/components/views/rooms/LinkPreviewWidget.tsx index 25d5fdd00b1..cf7c009e523 100644 --- a/src/components/views/rooms/LinkPreviewWidget.tsx +++ b/src/components/views/rooms/LinkPreviewWidget.tsx @@ -112,7 +112,13 @@ export default class LinkPreviewWidget extends React.Component { let img; if (image) { img =
- +
; }