Add ability to hide images after clicking "show image" (#29467)

* 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

* 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

src/components/views/messages/MFileBody.tsx

@@ -93,7 +93,7 @@ export function computedStyle(element: HTMLElement | null): string {
 
 interface IProps extends IBodyProps {
     /* whether or not to show the default placeholder for the file. Defaults to true. */
-    showGenericPlaceholder: boolean;
+    showGenericPlaceholder?: boolean;
 }
 
 interface IState {
@@ -105,11 +105,6 @@ export default class MFileBody extends React.Component<IProps, IState> {
     declare public context: React.ContextType<typeof RoomContext>;
 
     public state: IState = {};
-
-    public static defaultProps = {
-        showGenericPlaceholder: true,
-    };
-
     private iframe: React.RefObject<HTMLIFrameElement> = createRef();
     private dummyLink: React.RefObject<HTMLAnchorElement> = createRef();
     private userDidClick = false;
@@ -191,15 +186,17 @@ export default class MFileBody extends React.Component<IProps, IState> {
         const contentUrl = this.getContentUrl();
         const contentFileSize = this.content.info ? this.content.info.size : null;
         const fileType = this.content.info?.mimetype ?? "application/octet-stream";
+        // defaultProps breaks types on IBodyProps, so instead define the default here.
+        const showGenericPlaceholder = this.props.showGenericPlaceholder ?? true;
 
         let showDownloadLink =
-            !this.props.showGenericPlaceholder ||
+            !showGenericPlaceholder ||
             (this.context.timelineRenderingType !== TimelineRenderingType.Room &&
                 this.context.timelineRenderingType !== TimelineRenderingType.Search &&
                 this.context.timelineRenderingType !== TimelineRenderingType.Pinned);
 
         let placeholder: React.ReactNode = null;
-        if (this.props.showGenericPlaceholder) {
+        if (showGenericPlaceholder) {
             placeholder = (
                 <AccessibleButton className="mx_MediaBody mx_MFileBody_info" onClick={this.onPlaceholderClick}>
                     <span className="mx_MFileBody_info_icon" />