Global configuration flag for media previews (#29582)

* Modify useMediaVisible to take a room.

* Add initial support for a account data level key.

* Update controls.

* Update settings

* Lint and fixes

* make some tests go happy

* lint

* i18n

* update preferences

* prettier

* Update settings tab.

* update screenshot

* Update docs

* Rewrite controller

* Rewrite tons of tests

* Rewrite RoomAvatar to be a functional component

This is so we can use hooks to determine the setting state.

* lint

* lint

* Tidy up comments

* Apply media visible hook to inline images.

* Move conditionals.

* copyright all the things

* Review changes

* Update html utils to properly discard media.

* Types fix

* Fixing tests that break settings getValue expectations

* Fix logic around media preview calculation

* Fix room header tests

* Fixup tests for timelinePanel

* Clear settings in matrixchat

* Update tests to use SettingsStore where possible.

* fix bug

* revert changes to client.ts

* copyright years

* Add header

* Add a test for MediaPreviewAccountSettingsTab

* Mark initMatrixClient as optional

* Improve on types

* Ensure we do not set the account data twice.

* lint

* Review changes

* Ensure we include the client on rendered messages.

* Fix test

* update labels

* clean designs

* update settings tab

* update snapshot

* copyright

* prevent mutation

test/unit-tests/__snapshots__/HtmlUtils-test.tsx.snap

@@ -64,3 +64,30 @@ exports[`bodyToNode should generate big emoji for an emoji-only reply to a messa
   </span>
 </DocumentFragment>
 `;
+
+exports[`bodyToNode should handle inline media when mediaIsVisible is false 1`] = `
+<DocumentFragment>
+  <span
+    class="mx_EventTile_body markdown-body translate"
+    dir="auto"
+  >
+    <img />
+    foo Hello there
+  </span>
+</DocumentFragment>
+`;
+
+exports[`bodyToNode should handle inline media when mediaIsVisible is true 1`] = `
+<DocumentFragment>
+  <span
+    class="mx_EventTile_body markdown-body translate"
+    dir="auto"
+  >
+    <img
+      src="https://example.org/img"
+      style="max-width:800px;max-height:600px"
+    />
+    foo Hello there
+  </span>
+</DocumentFragment>
+`;