Phase 2 Refactor MImageBody to MVVM and remove legacy component

apps/web/playwright/e2e/modules/custom-component.spec.ts

@@ -107,10 +107,14 @@ test.describe("Custom Component API", () => {
             await app.timeline.scrollToBottom();
             const imgTile = page.locator(".mx_MImageBody").first();
             await expect(imgTile).toBeVisible();
+            const image = imgTile.getByRole("img", { name: "bad.png" });
+            await expect(image).toBeVisible();
             await imgTile.hover();
             await expect(page.getByRole("button", { name: "Download" })).not.toBeVisible();
-            await imgTile.click();
-            await expect(page.getByLabel("Image view").getByLabel("Download")).not.toBeVisible();
+            await image.click();
+            const imageView = page.getByLabel("Image view");
+            await expect(imageView).toBeVisible();
+            await expect(imageView.getByLabel("Download")).not.toBeVisible();
         });
         test("should allow downloading media when the allowDownloading hint is set to true", async ({
             page,
@@ -129,10 +133,14 @@ test.describe("Custom Component API", () => {
             await app.timeline.scrollToBottom();
             const imgTile = page.locator(".mx_MImageBody").first();
             await expect(imgTile).toBeVisible();
+            const image = imgTile.getByRole("img", { name: "good.png" });
+            await expect(image).toBeVisible();
             await imgTile.hover();
             await expect(page.getByRole("button", { name: "Download" })).toBeVisible();
-            await imgTile.click();
-            await expect(page.getByLabel("Image view").getByLabel("Download")).toBeVisible();
+            await image.click();
+            const imageView = page.getByLabel("Image view");
+            await expect(imageView).toBeVisible();
+            await expect(imageView.getByLabel("Download")).toBeVisible();
         });
         test(
             "should render the next registered component if the filter function throws",

apps/web/res/css/_components.pcss

@@ -227,7 +227,6 @@
 @import "./views/messages/_LegacyCallEvent.pcss";
 @import "./views/messages/_MEmoteBody.pcss";
 @import "./views/messages/_MFileBody.pcss";
-@import "./views/messages/_MImageBody.pcss";
 @import "./views/messages/_MImageReplyBody.pcss";
 @import "./views/messages/_MJitsiWidgetEvent.pcss";
 @import "./views/messages/_MLocationBody.pcss";

apps/web/res/css/views/messages/_MImageReplyBody.pcss

@@ -6,6 +6,64 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+.mx_MImageReplyBody,
+.mx_MStickerBody_wrapper {
+    .mx_MImageBody_banner {
+        position: absolute;
+        bottom: $spacing-4;
+        left: $spacing-4;
+        padding: $spacing-4;
+        border-radius: var(--MBody-border-radius);
+        font-size: $font-15px;
+        user-select: none;
+        pointer-events: none;
+        max-width: min(100%, 350px);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: rgb(0, 0, 0, 0.6);
+        color: #ffffff;
+    }
+
+    .mx_MImageBody_placeholder {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        background-color: $background;
+
+        .mx_Blurhash > canvas {
+            animation: mx--anim-pulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
+        }
+    }
+
+    .mx_MImageBody_thumbnail_container {
+        border-radius: var(--MBody-border-radius);
+        overflow: hidden;
+        contain: paint;
+    }
+
+    .mx_MImageBody_thumbnail {
+        display: block;
+        height: 100%;
+        width: 100%;
+    }
+
+    .mx_MImageBody_gifLabel {
+        position: absolute;
+        display: block;
+        top: 0px;
+        left: 14px;
+        padding: 5px;
+        border-radius: 5px;
+        background: $imagebody-giflabel;
+        border: 2px solid $imagebody-giflabel-border;
+        color: $imagebody-giflabel-color;
+        pointer-events: none;
+    }
+}
+
 .mx_MImageReplyBody {
     display: flex;
     column-gap: $spacing-4;

apps/web/src/components/views/messages/MBodyFactory.tsx

@@ -7,9 +7,11 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, type RefObject, useContext, useEffect, useRef } from "react";
 import { MsgType } from "matrix-js-sdk/src/matrix";
+import { type ImageContent } from "matrix-js-sdk/src/types";
 import {
     DecryptionFailureBodyView,
     FileBodyView,
+    ImageBodyView,
     RedactedBodyView,
     VideoBodyView,
     useCreateAutoDisposedViewModel,
@@ -21,8 +23,10 @@ import { LocalDeviceVerificationStateContext } from "../../../contexts/LocalDevi
 import { useMediaVisible } from "../../../hooks/useMediaVisible";
 import { DecryptionFailureBodyViewModel } from "../../../viewmodels/room/timeline/event-tile/body/DecryptionFailureBodyViewModel";
 import { FileBodyViewModel } from "../../../viewmodels/message-body/FileBodyViewModel";
+import { ImageBodyViewModel } from "../../../viewmodels/message-body/ImageBodyViewModel";
 import { RedactedBodyViewModel } from "../../../viewmodels/message-body/RedactedBodyViewModel";
 import { VideoBodyViewModel } from "../../../viewmodels/message-body/VideoBodyViewModel";
+import { isMimeTypeAllowed } from "../../../utils/blobs";
 
 type MBodyComponent = React.ComponentType<IBodyProps>;
 
@@ -134,6 +138,122 @@ export function VideoBodyFactory({
     );
 }
 
+export function ImageBodyFactory({
+    mxEvent,
+    mediaEventHelper,
+    forExport,
+    maxImageHeight,
+    permalinkCreator,
+    showFileInfo,
+}: Readonly<
+    Pick<
+        IBodyProps,
+        "mxEvent" | "mediaEventHelper" | "forExport" | "maxImageHeight" | "permalinkCreator" | "showFileInfo"
+    >
+>): JSX.Element {
+    const { timelineRenderingType } = useContext(RoomContext);
+    const [mediaVisible, setMediaVisible] = useMediaVisible(mxEvent);
+    const imageRef = useRef<HTMLImageElement>(null);
+    const content = mxEvent.getContent<ImageContent>();
+    const shouldFallbackToFileBody =
+        mediaEventHelper?.media.isEncrypted === true &&
+        !isMimeTypeAllowed(content.info?.mimetype ?? "") &&
+        !content.info?.thumbnail_info;
+
+    const vm = useCreateAutoDisposedViewModel(
+        () =>
+            new ImageBodyViewModel({
+                mxEvent,
+                mediaEventHelper,
+                forExport,
+                maxImageHeight,
+                mediaVisible,
+                permalinkCreator,
+                timelineRenderingType,
+                imageRef,
+                setMediaVisible,
+            }),
+    );
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.loadInitialMediaIfVisible();
+    }, [shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setEvent(mxEvent, mediaEventHelper);
+    }, [mediaEventHelper, mxEvent, shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setForExport(forExport);
+    }, [forExport, shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setMaxImageHeight(maxImageHeight);
+    }, [maxImageHeight, shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setMediaVisible(mediaVisible);
+    }, [mediaVisible, shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setPermalinkCreator(permalinkCreator);
+    }, [permalinkCreator, shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setTimelineRenderingType(timelineRenderingType);
+    }, [shouldFallbackToFileBody, timelineRenderingType, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setSetMediaVisible(setMediaVisible);
+    }, [setMediaVisible, shouldFallbackToFileBody, vm]);
+
+    const showFileBody =
+        !forExport &&
+        timelineRenderingType !== TimelineRenderingType.Room &&
+        timelineRenderingType !== TimelineRenderingType.Pinned &&
+        timelineRenderingType !== TimelineRenderingType.Search &&
+        timelineRenderingType !== TimelineRenderingType.Thread &&
+        timelineRenderingType !== TimelineRenderingType.ThreadsList;
+
+    if (shouldFallbackToFileBody) {
+        return (
+            <FileBodyFactory
+                mxEvent={mxEvent}
+                mediaEventHelper={mediaEventHelper}
+                forExport={forExport}
+                showFileInfo={showFileInfo}
+            />
+        );
+    }
+
+    return (
+        <ImageBodyView
+            vm={vm}
+            className="mx_MImageBody"
+            containerClassName="mx_MImageBody_thumbnail_container"
+            imageClassName="mx_MImageBody_thumbnail"
+            imageRef={imageRef}
+        >
+            {showFileBody ? (
+                <FileBodyFactory
+                    mxEvent={mxEvent}
+                    mediaEventHelper={mediaEventHelper}
+                    forExport={forExport}
+                    showFileInfo={false}
+                />
+            ) : null}
+        </ImageBodyView>
+    );
+}
+
 export function RedactedBodyFactory({ mxEvent, ref }: Pick<IBodyProps, "mxEvent" | "ref">): JSX.Element {
     const vm = useCreateAutoDisposedViewModel(() => new RedactedBodyViewModel({ mxEvent }));
 
@@ -164,6 +284,7 @@ export function DecryptionFailureBodyFactory({ mxEvent, ref }: Pick<IBodyProps,
 
 // Message body factory registry for bodies that already route through view-model-backed wrappers.
 const MESSAGE_BODY_TYPES = new Map<string, MBodyComponent>([
+    [MsgType.Image, ImageBodyFactory],
     [MsgType.File, FileBodyFactory],
     [MsgType.Video, VideoBodyFactory],
 ]);