Phase 2 Refactor MImageBody to MVVM and remove legacy component (#33212)

* MVVMing of MImageBody and removing legacy component + css

* Fix Prettier

* update small image to large image in test

* Update test

* Preserve MImageBody legacy class names

* Click image in custom component download test

* Update snapshots

* Update MBodyFactory snapshots

* Added new tests to pass coverage

* Fix prettier

* Remove legacy import that was removed

* Add MImageReplayBody test for coverage

* Remove legacy MImageBody selectors from image view

* Update image body selectors in Playwright tests

* Keep file panel image body spacing compact

* Update apps/web/src/viewmodels/message-body/ImageBodyViewModel.ts

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

* added documentation to component

* Fix hidden media placeholder import

---------

Co-authored-by: Florian Duros <florian.duros@ormaz.fr>

apps/web/test/unit-tests/components/views/messages/MBodyFactory-test.tsx

@@ -20,17 +20,26 @@ import {
 import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import {
+    DecryptionFailureBodyFactory,
     FileBodyFactory,
+    ImageBodyFactory,
+    RedactedBodyFactory,
     VideoBodyFactory,
     renderMBody,
 } from "../../../../../src/components/views/messages/MBodyFactory";
 import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext.ts";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
+import { useMediaVisible } from "../../../../../src/hooks/useMediaVisible";
 
 jest.mock("matrix-encrypt-attachment", () => ({
     decryptAttachment: jest.fn(),
 }));
 
+jest.mock("../../../../../src/hooks/useMediaVisible", () => ({
+    __esModule: true,
+    useMediaVisible: jest.fn(),
+}));
+
 describe("MBodyFactory", () => {
     const userId = "@user:server";
     const deviceId = "DEADB33F";
@@ -59,7 +68,7 @@ describe("MBodyFactory", () => {
         onMessageAllowed: jest.fn(),
         permalinkCreator: new RoomPermalinkCreator(new Room("!room:server", cli, cli.getUserId()!)),
     };
-    const mkEvent = (msgtype?: string): MatrixEvent =>
+    const mkEvent = (msgtype?: string, content: Record<string, unknown> = {}): MatrixEvent =>
         new MatrixEvent({
             room_id: "!room:server",
             sender: userId,
@@ -68,13 +77,26 @@ describe("MBodyFactory", () => {
                 body: "alt",
                 ...(msgtype ? { msgtype } : {}),
                 url: "mxc://server/file",
+                ...content,
             },
         });
 
     beforeEach(() => {
         jest.spyOn(SettingsStore, "getValue").mockRestore();
+        jest.mocked(useMediaVisible).mockReturnValue([true, jest.fn()]);
     });
 
+    const encryptedImageHelper = (): MediaEventHelper =>
+        ({
+            media: { isEncrypted: true },
+            sourceUrl: { value: Promise.resolve("blob:source") },
+            thumbnailUrl: { value: Promise.resolve("blob:thumbnail") },
+            sourceBlob: {
+                value: Promise.resolve(new Blob(["image"], { type: "image/jpeg" })),
+                cachedValue: new Blob(["image"], { type: "image/jpeg" }),
+            },
+        }) as unknown as MediaEventHelper;
+
     describe("renderMBody", () => {
         it("renders download button for m.file in file rendering type", () => {
             const mediaEvent = mkEvent("m.file");
@@ -102,6 +124,10 @@ describe("MBodyFactory", () => {
             expect(renderMBody({ ...props, mxEvent: mkEvent("m.video") })?.type).toBe(VideoBodyFactory);
         });
 
+        it("returns the image body factory for m.image", () => {
+            expect(renderMBody({ ...props, mxEvent: mkEvent("m.image") })?.type).toBe(ImageBodyFactory);
+        });
+
         it("returns null when msgtype is missing", () => {
             expect(renderMBody({ ...props, mxEvent: mkEvent() })).toBeNull();
         });
@@ -156,4 +182,160 @@ describe("MBodyFactory", () => {
             expect(container).toMatchSnapshot();
         },
     );
+
+    describe("ImageBodyFactory", () => {
+        const imageContent = {
+            info: {
+                mimetype: "image/jpeg",
+                w: 320,
+                h: 240,
+                size: 48_000,
+            },
+        };
+
+        it("renders the shared image view in room timelines", () => {
+            const mediaEvent = mkEvent("m.image", imageContent);
+
+            const { container } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Room } as any)}>
+                    <ImageBodyFactory
+                        {...props}
+                        mxEvent={mediaEvent}
+                        mediaEventHelper={new MediaEventHelper(mediaEvent)}
+                    />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_ImageBody")).not.toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).toBeNull();
+        });
+
+        it("renders the file fallback child in notification timelines", () => {
+            const mediaEvent = mkEvent("m.image", imageContent);
+
+            const { container, getByRole } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Notification } as any)}>
+                    <ImageBodyFactory
+                        {...props}
+                        mxEvent={mediaEvent}
+                        mediaEventHelper={new MediaEventHelper(mediaEvent)}
+                    />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_ImageBody")).not.toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).not.toBeNull();
+            expect(getByRole("link", { name: /Download/ })).toBeInTheDocument();
+        });
+
+        it("renders only a file body for encrypted unsafe images without thumbnails", () => {
+            const mediaEvent = mkEvent("m.image", {
+                file: { url: "mxc://server/encrypted-file" },
+                url: undefined,
+                info: {
+                    mimetype: "text/html",
+                },
+            });
+
+            const { container, getByRole } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Room } as any)}>
+                    <ImageBodyFactory
+                        {...props}
+                        mxEvent={mediaEvent}
+                        mediaEventHelper={{ media: { isEncrypted: true } } as MediaEventHelper}
+                    />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_ImageBody")).toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).not.toBeNull();
+            expect(getByRole("button", { name: "alt" })).toBeInTheDocument();
+        });
+
+        it("keeps the image body for encrypted unsafe images when a thumbnail is available", () => {
+            const mediaEvent = mkEvent("m.image", {
+                file: { url: "mxc://server/encrypted-file" },
+                url: undefined,
+                info: {
+                    mimetype: "text/html",
+                    thumbnail_info: { mimetype: "image/jpeg" },
+                },
+            });
+
+            const { container } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Room } as any)}>
+                    <ImageBodyFactory {...props} mxEvent={mediaEvent} mediaEventHelper={encryptedImageHelper()} />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_ImageBody")).not.toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).toBeNull();
+        });
+    });
+
+    describe("VideoBodyFactory", () => {
+        const videoContent = {
+            info: {
+                mimetype: "video/mp4",
+                w: 320,
+                h: 240,
+                size: 48_000,
+            },
+        };
+
+        it("renders without a file fallback in room timelines", () => {
+            const mediaEvent = mkEvent("m.video", videoContent);
+
+            const { container } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Room } as any)}>
+                    <VideoBodyFactory
+                        mxEvent={mediaEvent}
+                        mediaEventHelper={new MediaEventHelper(mediaEvent)}
+                        forExport={false}
+                    />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_MVideoBody")).not.toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).toBeNull();
+        });
+
+        it("renders the file fallback child outside room timelines", () => {
+            const mediaEvent = mkEvent("m.video", videoContent);
+
+            const { container, getByRole } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Notification } as any)}>
+                    <VideoBodyFactory
+                        mxEvent={mediaEvent}
+                        mediaEventHelper={new MediaEventHelper(mediaEvent)}
+                        forExport={false}
+                    />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_MVideoBody")).not.toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).not.toBeNull();
+            expect(getByRole("link", { name: /Download/ })).toBeInTheDocument();
+        });
+    });
+
+    it("renders the redacted body wrapper", () => {
+        const mediaEvent = mkEvent("m.text");
+
+        const { container } = render(<RedactedBodyFactory mxEvent={mediaEvent} />);
+
+        expect(container.querySelector(".mx_RedactedBody")).not.toBeNull();
+    });
+
+    it("renders the decryption failure body wrapper", () => {
+        const mediaEvent = mkEvent("m.text");
+        Object.defineProperty(mediaEvent, "decryptionFailureReason", {
+            configurable: true,
+            value: "MEGOLM_UNKNOWN_INBOUND_SESSION_ID",
+        });
+
+        const { container } = render(<DecryptionFailureBodyFactory mxEvent={mediaEvent} />);
+
+        expect(container.querySelector(".mx_DecryptionFailureBody")).not.toBeNull();
+    });
 });