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

playwright/e2e/timeline/timeline.spec.ts

@@ -28,6 +28,8 @@ const NEW_AVATAR = fs.readFileSync("playwright/sample-files/element.png");
 const OLD_NAME = "Alan";
 const NEW_NAME = "Alan (away)";
 
+const VIDEO_FILE = fs.readFileSync("playwright/sample-files/5secvid.webm");
+
 const getEventTilesWithBodies = (page: Page): Locator => {
     return page.locator(".mx_EventTile").filter({ has: page.locator(".mx_EventTile_body") });
 };
@@ -916,7 +918,27 @@ test.describe("Timeline", () => {
             await page.getByRole("button", { name: "Hide" }).click();
 
             // Check that the image is now hidden.
-            await expect(page.getByRole("link", { name: "Show image" })).toBeVisible();
+            await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
+        });
+
+        test("should be able to hide a video", async ({ page, app, room, context }) => {
+            await app.viewRoomById(room.roomId);
+            const upload = await app.client.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
+            await app.client.sendEvent(room.roomId, null, "m.room.message" as EventType, {
+                msgtype: "m.video" as MsgType,
+                body: "bbb.webm",
+                url: upload.content_uri,
+            });
+
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MVideoBody").first();
+            await expect(imgTile).toBeVisible();
+            await imgTile.hover();
+            await page.getByRole("button", { name: "Hide" }).click();
+
+            // Check that the video is now hidden.
+            await expect(page.getByRole("button", { name: "Show video" })).toBeVisible();
+            await expect(page.locator("video")).not.toBeVisible();
         });
     });