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>
2026-05-13 06:03:43 +00:00
parent 13dd1a0b5e
commit 1e7c9f672a
26 changed files with 3389 additions and 1608 deletions
@@ -1,81 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-Copyright 2015, 2016 OpenMarket 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.
-*/
-
-.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; /* prevent banner text from being selected */
-    pointer-events: none; /* let the cursor go through to the media underneath */
-
-    /* Trying to match the width of the image is surprisingly difficult, so arbitrarily break it off early. */
-    max-width: min(100%, 350px);
-
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-
-    /* Hardcoded colours because it's the same on all themes */
-    background-color: rgb(0, 0, 0, 0.6);
-    color: #ffffff;
-}
-
-.mx_MImageBody_placeholder {
-    /* Position the placeholder on top of the thumbnail, so that the reveal animation can work */
-    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);
-
-    /* Necessary for the border radius to apply correctly to the placeholder */
-    overflow: hidden;
-    contain: paint;
-}
-
-.mx_MImageBody_thumbnail {
-    display: block;
-
-    /* Force the image to be the full size of the container, even if the */
-    /* pixel size is smaller. The problem here is that we don't know what */
-    /* thumbnail size the HS is going to give us, but we have to commit to */
-    /* a container size immediately and not change it when the image loads */
-    /* or we'll get a scroll jump (or have to leave blank space). */
-    /* This will obviously result in an upscaled image which will be a bit */
-    /* blurry. The best fix would be for the HS to advertise what size thumbnails */
-    /* it guarantees to produce. */
-    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;
-}
@@ -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;