Add support for hiding videos (#29496)

* start hide

* Move useSettingsValueWithSetter to useSettings

* Add new setting showMediaEventIds

* Add a migration path

* Add an action button to hide settings.

* Tweaks to MImageBody to support new setting.

* Fixup and add tests

* add description for migration

* docs fixes

* add type

* i18n

* appese prettier

* Add tests for HideActionButton

* lint

* lint

* First pass at support for previewing/hiding images.

* Add a test for video files.

* First pass at supporting hiding video files.

* Use a hook for media visibility.

* Drop setting hook usage.

* Fixup MImageBody test

* Fixup tests

* Support functional components for message body rendering.

* Add a comment

* Move props into IProps

* Use new wrapping logic

* lint

* fixup

* allow for a delay for the image to render

* remove .only

* lint

* Fix jest test

* Fixup tests.

* make tests happy

* Improve comments

* review fixes

* unbreak test

res/css/_components.pcss

@@ -227,6 +227,7 @@
 @import "./views/messages/_DisambiguatedProfile.pcss";
 @import "./views/messages/_EventTileBubble.pcss";
 @import "./views/messages/_HiddenBody.pcss";
+@import "./views/messages/_HiddenMediaPlaceholder.pcss";
 @import "./views/messages/_JumpToDatePicker.pcss";
 @import "./views/messages/_LegacyCallEvent.pcss";
 @import "./views/messages/_MEmoteBody.pcss";

res/css/views/messages/_HiddenMediaPlaceholder.pcss

@@ -0,0 +1,29 @@
+.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;
+}

res/css/views/messages/_MImageBody.pcss

@@ -79,39 +79,3 @@ Please see LICENSE files in the repository root for full details.
     color: $imagebody-giflabel-color;
     pointer-events: none;
 }
-
-.mx_HiddenImagePlaceholder {
-    position: absolute;
-    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;
-
-    .mx_HiddenImagePlaceholder_button {
-        color: $accent;
-
-        span.mx_HiddenImagePlaceholder_eye {
-            margin-right: 8px;
-
-            background-color: $accent;
-            mask-image: url("$(res)/img/element-icons/eye.svg");
-            display: inline-block;
-            width: 18px;
-            height: 14px;
-        }
-
-        span:not(.mx_HiddenImagePlaceholder_eye) {
-            vertical-align: text-bottom;
-        }
-    }
-}
-
-.mx_EventTile:hover .mx_HiddenImagePlaceholder {
-    background-color: $background;
-}