diff --git a/apps/web/playwright/e2e/messages/messages.spec.ts b/apps/web/playwright/e2e/messages/messages.spec.ts index 67af9edb42..2115dc3394 100644 --- 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", }, }); }); diff --git 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 index 6d004c8da2..718e460966 100644 Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png differ diff --git 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 index aa36fca9e9..f6c13a5aec 100644 Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png differ diff --git a/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts b/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts index 05eb105109..c47a2cd295 100644 --- 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; diff --git a/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts b/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts index 8e8bc911e5..8fa0a7eb8d 100644 --- 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 = `test`; await vm.updateEventElement(msg); - expect(vm.getSnapshot().previews[0].playable).toEqual(true); + expect(vm.getSnapshot().previews[0].image?.playable).toEqual(true); }); }); diff --git 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 index 6188892034..5e931b6371 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png differ diff --git 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 index ff1cfa2b24..fd8d058387 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png differ diff --git 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 index 5767d6aa32..67801f4c04 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png differ diff --git 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 index 390c358959..340540e14a 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png differ diff --git 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 index d4b4048145..e24a3b4422 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png differ diff --git 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 index 263f3b1eef..c3e635491c 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png differ diff --git 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 index b41968503d..8171d99b63 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png differ diff --git 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 index fc3272f314..d618d89d47 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png differ diff --git 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 index 2a5a79992b..8fc73653b8 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png differ diff --git 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 index bca73a6e3b..adfc1670f7 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png differ diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css index 0f3234c853..a6c196558f 100644 --- 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 */ diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx index 506c24d332..3db5b6bc46 100644 --- 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, }, }; diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.test.tsx b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/LinkPreview.test.tsx index 3309fe9888..1fa218b6ca 100644 --- 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(