Move hidden media placeholder to shared components (#33404)

* Move hidden media placeholder to shared components

* Add Snapshots

* Remove legacy hidden media mx class

apps/web/res/css/_components.pcss

@@ -223,7 +223,6 @@
 @import "./views/messages/_CreateEvent.pcss";
 @import "./views/messages/_DisambiguatedProfile.pcss";
 @import "./views/messages/_HiddenBody.pcss";
-@import "./views/messages/_HiddenMediaPlaceholder.pcss";
 @import "./views/messages/_LegacyCallEvent.pcss";
 @import "./views/messages/_MFileBody.pcss";
 @import "./views/messages/_MImageBody.pcss";

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

@@ -1,29 +0,0 @@
-.mx_HiddenMediaPlaceholder {
-    border: none;
-    width: 100%;
-    height: 100%;
-    inset: 0;
-
-    /* To center the text in the middle of the frame */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-
-    cursor: pointer;
-    background-color: $header-panel-bg-color;
-
-    > div {
-        color: $accent;
-        /* Icon alignment */
-        display: flex;
-        > svg {
-            margin-top: auto;
-            margin-bottom: auto;
-        }
-    }
-}
-
-.mx_EventTile:hover .mx_HiddenMediaPlaceholder {
-    background-color: $background;
-}

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

@@ -1,24 +0,0 @@
-/*
-Copyright 2025 New Vector 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, { type PropsWithChildren, type MouseEventHandler } from "react";
-import { VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-
-interface IProps {
-    onClick: MouseEventHandler<HTMLButtonElement>;
-}
-
-export const HiddenMediaPlaceholder: React.FunctionComponent<PropsWithChildren<IProps>> = ({ onClick, children }) => {
-    return (
-        <button onClick={onClick} className="mx_HiddenMediaPlaceholder">
-            <div>
-                <VisibilityOnIcon />
-                <span>{children}</span>
-            </div>
-        </button>
-    );
-};

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

@@ -16,6 +16,7 @@ import { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { type ImageContent } from "matrix-js-sdk/src/types";
 import { Tooltip } from "@vector-im/compound-web";
 import { ImageErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { HiddenMediaPlaceholder } from "@element-hq/web-shared-components";
 
 import Modal from "../../../Modal";
 import { _t } from "../../../languageHandler";
@@ -33,7 +34,6 @@ import { presentableTextForFile } from "../../../utils/FileUtils";
 import { createReconnectedListener } from "../../../utils/connection";
 import MediaProcessingError from "./shared/MediaProcessingError";
 import { DecryptError, DownloadError } from "../../../utils/DecryptFile";
-import { HiddenMediaPlaceholder } from "./HiddenMediaPlaceholder";
 import { useMediaVisible } from "../../../hooks/useMediaVisible";
 import { isMimeTypeAllowed } from "../../../utils/blobs.ts";
 import { FileBodyFactory, renderMBody } from "./MBodyFactory";