prevent replay hover from restarting playback (#33364)

* prevent replay hover from restarting playback

* Fix issue with hover, it's supposed to be a FileBody and not an actual video on replay

* Add test for replay video on hover
This commit is contained in:
Zack 2026-05-04 13:53:31 +02:00 committed by GitHub
parent b3f9fc1a0c
commit a9edffead8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 66 additions and 3 deletions

View File

@ -26,7 +26,7 @@ import { renderReplyTile } from "../../../events/EventTileFactory";
import { type GetRelationsForEvent } from "../rooms/EventTile";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { type IBodyProps } from "../messages/IBodyProps";
import { FileBodyFactory, renderMBody } from "../messages/MBodyFactory";
import { FileBodyFactory, VideoBodyFactory, renderMBody } from "../messages/MBodyFactory";
interface IProps {
mxEvent: MatrixEvent;
@ -134,9 +134,9 @@ export default class ReplyTile extends React.PureComponent<IProps> {
const msgtypeOverrides: Record<string, React.ComponentType<IBodyProps>> = {
[MsgType.Image]: MImageReplyBody,
// Override audio and video body with file body. We also hide the download/decrypt button using CSS
// Override audio body with file body. We also hide the download/decrypt button using CSS
[MsgType.Audio]: isVoiceMessage(mxEvent) ? MVoiceMessageBody : ReplyTileFileBody,
[MsgType.Video]: ReplyTileFileBody,
[MsgType.Video]: VideoBodyFactory,
};
const evOverrides: Record<string, React.ComponentType<IBodyProps>> = {
// Use MImageReplyBody so that the sticker isn't taking up a lot of space

View File

@ -0,0 +1,63 @@
/*
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 React from "react";
import { render } from "jest-matrix-react";
import { EventType, MsgType } from "matrix-js-sdk/src/matrix";
import ReplyTile from "../../../../../src/components/views/rooms/ReplyTile";
import { renderReplyTile } from "../../../../../src/events/EventTileFactory";
import { VideoBodyFactory } from "../../../../../src/components/views/messages/MBodyFactory";
import { mkEvent, stubClient } from "../../../../test-utils";
jest.mock("../../../../../src/events/EventTileFactory", () => {
const actual = jest.requireActual("../../../../../src/events/EventTileFactory");
return {
...actual,
renderReplyTile: jest.fn(() => null),
};
});
jest.mock("../../../../../src/components/views/messages/SenderProfile", () => jest.fn(() => null));
jest.mock("../../../../../src/components/views/avatars/MemberAvatar", () => jest.fn(() => null));
describe("ReplyTile", () => {
beforeEach(() => {
stubClient();
jest.mocked(renderReplyTile).mockClear().mockReturnValue(null);
});
it("renders video replies with the video body", () => {
const mxEvent = mkEvent({
event: true,
type: EventType.RoomMessage,
user: "@alice:server",
room: "!room:server",
id: "$video",
content: {
body: "video.mp4",
msgtype: MsgType.Video,
url: "mxc://server/video",
info: {
mimetype: "video/mp4",
w: 640,
h: 360,
},
},
});
render(<ReplyTile mxEvent={mxEvent} />);
expect(renderReplyTile).toHaveBeenCalledWith(
expect.objectContaining({
overrideBodyTypes: expect.objectContaining({
[MsgType.Video]: VideoBodyFactory,
}),
}),
false,
);
});
});