mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-29 12:58:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fall back from server generated thumbnail to original image (#10853)

Browse source 
* Add test for falling back from thumbnail to original

* Fall back from server generated thumbnail to original image
This commit is contained in:
Michael Telatynski 2023-05-11 10:20:14 +01:00 committed by GitHub
parent 82e32035fd
commit 949557b5c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/messages/MImageBody.tsx
View file

@ -165,6 +165,14 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
};
private onImageError = (): void => {
// If the thumbnail failed to load then try again using the contentUrl
if (this.state.thumbUrl) {
this.setState({
thumbUrl: null,
});
return;
}
this.clearBlurhashTimeout();
this.setState({
imgError: true,

37
test/components/views/messages/MImageBody-test.tsx
View file

@ -16,7 +16,7 @@ limitations under the License.
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import { EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import fetchMock from "fetch-mock-jest";
import encrypt from "matrix-encrypt-attachment";
import { mocked } from "jest-mock";
@ -171,4 +171,39 @@ describe("<MImageBody/>", () => {
expect(screen.getByRole("progressbar")).toBeInTheDocument();
});
});
it("should fall back to /download/ if /thumbnail/ fails", async () => {
const thumbUrl = "https://server/_matrix/media/r0/thumbnail/server/image?width=800&height=600&method=scale";
const downloadUrl = "https://server/_matrix/media/r0/download/server/image";
// eslint-disable-next-line no-restricted-properties
cli.mxcUrlToHttp.mockImplementation(
(mxcUrl: string, width?: number, height?: number, resizeMethod?: string, allowDirectLinks?: boolean) => {
return getHttpUriForMxc("https://server", mxcUrl, width, height, resizeMethod, allowDirectLinks);
},
);
const event = new MatrixEvent({
room_id: "!room:server",
sender: userId,
type: EventType.RoomMessage,
content: {
body: "alt for a test image",
info: {
w: 40,
h: 50,
},
url: "mxc://server/image",
},
});
const { container } = render(
<MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
);
const img = container.querySelector(".mx_MImageBody_thumbnail")!;
expect(img).toHaveProperty("src", thumbUrl);
fireEvent.error(img);
expect(img).toHaveProperty("src", downloadUrl);
});
});