From 7533eefa419c4e92e8a55dd47b643fca9824c239 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 12 Apr 2023 15:06:29 +1200 Subject: [PATCH 1/6] test case --- .../views/messages/MImageBody-test.tsx | 19 ++++++++++ .../__snapshots__/MImageBody-test.tsx.snap | 38 +++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 test/components/views/messages/__snapshots__/MImageBody-test.tsx.snap diff --git a/test/components/views/messages/MImageBody-test.tsx b/test/components/views/messages/MImageBody-test.tsx index 29825f128eb..6508aa76e4d 100644 --- a/test/components/views/messages/MImageBody-test.tsx +++ b/test/components/views/messages/MImageBody-test.tsx @@ -24,6 +24,7 @@ import { mocked } from "jest-mock"; import MImageBody from "../../../../src/components/views/messages/MImageBody"; import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks"; import { + flushPromises, getMockClientWithEventEmitter, mockClientMethodsCrypto, mockClientMethodsDevice, @@ -61,6 +62,10 @@ describe("", () => { sender: userId, type: EventType.RoomMessage, content: { + info: { + w: 40, + h: 50, + }, file: { url: "mxc://server/encrypted-image", }, @@ -72,6 +77,20 @@ describe("", () => { permalinkCreator: new RoomPermalinkCreator(new Room(encryptedMediaEvent.getRoomId()!, cli, cli.getUserId()!)), }; + it("should show a thumbnail while image is being downloaded", async () => { + fetchMock.getOnce(url, { status: 200 }); + + const { container } = render( + , + ); + + expect(container).toMatchSnapshot(); + }); + it("should show error when encrypted media cannot be downloaded", async () => { fetchMock.getOnce(url, { status: 500 }); diff --git a/test/components/views/messages/__snapshots__/MImageBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MImageBody-test.tsx.snap new file mode 100644 index 00000000000..483151b7478 --- /dev/null +++ b/test/components/views/messages/__snapshots__/MImageBody-test.tsx.snap @@ -0,0 +1,38 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should show a thumbnail while image is being downloaded 1`] = ` +
+
+ +
+
+
+
+
+
+ +
+`; From 9c6eb1e0c9a80c2be662951fa7577da76171df47 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 12 Apr 2023 15:12:38 +1200 Subject: [PATCH 2/6] fix + lint --- src/components/views/messages/MImageBody.tsx | 2 +- test/components/views/messages/MImageBody-test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index ad99aa142e6..913863b2dc2 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -596,7 +596,7 @@ export default class MImageBody extends React.Component { thumbUrl = this.state.thumbUrl ?? this.state.contentUrl; } - const thumbnail = contentUrl ? this.messageContent(contentUrl, thumbUrl, content) : undefined; + const thumbnail = this.messageContent(contentUrl, thumbUrl, content); const fileBody = this.getFileBody(); return ( diff --git a/test/components/views/messages/MImageBody-test.tsx b/test/components/views/messages/MImageBody-test.tsx index 6508aa76e4d..6534828bd65 100644 --- a/test/components/views/messages/MImageBody-test.tsx +++ b/test/components/views/messages/MImageBody-test.tsx @@ -24,7 +24,6 @@ import { mocked } from "jest-mock"; import MImageBody from "../../../../src/components/views/messages/MImageBody"; import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks"; import { - flushPromises, getMockClientWithEventEmitter, mockClientMethodsCrypto, mockClientMethodsDevice, @@ -88,6 +87,7 @@ describe("", () => { />, ); + // thumbnail with dimensions present expect(container).toMatchSnapshot(); }); From 16204e00fdd6e0eb55d4aab77c7f61eef447dc01 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 12 Apr 2023 15:27:25 +1200 Subject: [PATCH 3/6] refix strictNullChecks issue --- src/components/views/messages/MImageBody.tsx | 10 ++--- .../__snapshots__/MImageBody-test.tsx.snap | 40 +++++++++---------- 2 files changed, 24 insertions(+), 26 deletions(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 913863b2dc2..211cd0afeb3 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -385,22 +385,22 @@ export default class MImageBody extends React.Component { } protected messageContent( - contentUrl: string, + contentUrl: string | null, thumbUrl: string | null, content: IMediaEventContent, forcedHeight?: number, ): JSX.Element { if (!thumbUrl) thumbUrl = contentUrl; // fallback - let infoWidth: number; - let infoHeight: number; + let infoWidth = Number.MAX_SAFE_INTEGER; + let infoHeight = Number.MAX_SAFE_INTEGER; let infoSvg = false; if (content.info?.w && content.info?.h) { infoWidth = content.info.w; infoHeight = content.info.h; infoSvg = content.info.mimetype === "image/svg+xml"; - } else { + } else if (thumbUrl && contentUrl) { // Whilst the image loads, display nothing. We also don't display a blurhash image // because we don't really know what size of image we'll end up with. // @@ -522,7 +522,7 @@ export default class MImageBody extends React.Component {
); - return this.wrapImage(contentUrl, thumbnail); + return contentUrl ? this.wrapImage(contentUrl, thumbnail) : thumbnail; } // Overridden by MStickerBody diff --git a/test/components/views/messages/__snapshots__/MImageBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MImageBody-test.tsx.snap index 483151b7478..553090de629 100644 --- a/test/components/views/messages/__snapshots__/MImageBody-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/MImageBody-test.tsx.snap @@ -5,34 +5,32 @@ exports[` should show a thumbnail while image is being downloaded 1
- +
-
-
+ aria-label="Loading…" + class="mx_Spinner_icon" + data-testid="spinner" + role="progressbar" + style="width: 32px; height: 32px;" + />
-
-
- +
+
+
`; From d5860d65091cb484d977418a1fc8c0816c2dcfae Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 12 Apr 2023 18:24:06 +1200 Subject: [PATCH 4/6] add comment about max image size --- src/components/views/messages/MImageBody.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 211cd0afeb3..54cd32a9c0b 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -392,6 +392,9 @@ export default class MImageBody extends React.Component { ): JSX.Element { if (!thumbUrl) thumbUrl = contentUrl; // fallback + // these are clamped down by `suggestedImageSize` below + // if not set by the conditions below, `suggestedImageSize` + // will use the maximum sizes in ImageSize.ts let infoWidth = Number.MAX_SAFE_INTEGER; let infoHeight = Number.MAX_SAFE_INTEGER; let infoSvg = false; From 43f4752d28c43b0706077bcf41ef46730022cfca Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 12 Apr 2023 18:26:48 +1200 Subject: [PATCH 5/6] tweak --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 54cd32a9c0b..63ffb0db56f 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -392,7 +392,7 @@ export default class MImageBody extends React.Component { ): JSX.Element { if (!thumbUrl) thumbUrl = contentUrl; // fallback - // these are clamped down by `suggestedImageSize` below + // these are clamped down as maxWidth/Height by `suggestedImageSize` below // if not set by the conditions below, `suggestedImageSize` // will use the maximum sizes in ImageSize.ts let infoWidth = Number.MAX_SAFE_INTEGER; From 714d4ac316a202f66b5db8a6d404c17407128e57 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Wed, 12 Apr 2023 18:36:56 +1200 Subject: [PATCH 6/6] use safer magic number --- src/components/views/messages/MImageBody.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 63ffb0db56f..84e4e763de0 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -392,11 +392,10 @@ export default class MImageBody extends React.Component { ): JSX.Element { if (!thumbUrl) thumbUrl = contentUrl; // fallback - // these are clamped down as maxWidth/Height by `suggestedImageSize` below - // if not set by the conditions below, `suggestedImageSize` - // will use the maximum sizes in ImageSize.ts - let infoWidth = Number.MAX_SAFE_INTEGER; - let infoHeight = Number.MAX_SAFE_INTEGER; + // magic number + // edge case for this not to be set by conditions below + let infoWidth = 500; + let infoHeight = 500; let infoSvg = false; if (content.info?.w && content.info?.h) {