Add option to change the size of images/videos in the timeline (#7017)

Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
Co-authored-by: Timo K <toger5@hotmail.de>

src/components/views/settings/FontScalingPanel.tsx

@@ -22,7 +22,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import Slider from "../elements/Slider";
 import { FontWatcher } from "../../../settings/watchers/FontWatcher";
 import { IValidationResult, IFieldState } from '../elements/Validation';
-import { Layout } from "../../../settings/Layout";
+import { Layout } from "../../../settings/enums/Layout";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { _t } from "../../../languageHandler";

src/components/views/settings/ImageSizePanel.tsx

@@ -0,0 +1,79 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import SettingsStore from "../../../settings/SettingsStore";
+import StyledRadioButton from "../elements/StyledRadioButton";
+import { _t } from "../../../languageHandler";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import { ImageSize } from "../../../settings/enums/ImageSize";
+
+interface IProps {
+    // none
+}
+
+interface IState {
+    size: ImageSize;
+}
+
+export default class ImageSizePanel extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            size: SettingsStore.getValue("Images.size"),
+        };
+    }
+
+    private onSizeChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
+        const newSize = ev.target.value as ImageSize;
+        this.setState({ size: newSize });
+
+        // noinspection JSIgnoredPromiseFromCall
+        SettingsStore.setValue("Images.size", null, SettingLevel.ACCOUNT, newSize);
+    };
+
+    public render(): JSX.Element {
+        return (
+            <div className="mx_SettingsTab_section mx_ImageSizePanel">
+                <span className="mx_SettingsTab_subheading">
+                    { _t("Image size in the timeline") }
+                </span>
+
+                <div className="mx_ImageSizePanel_radios">
+                    <label>
+                        <div className="mx_ImageSizePanel_size mx_ImageSizePanel_sizeDefault" />
+                        <StyledRadioButton
+                            name="image_size"
+                            value={ImageSize.Normal}
+                            checked={this.state.size === ImageSize.Normal}
+                            onChange={this.onSizeChange}
+                        >{ _t("Default") }</StyledRadioButton>
+                    </label>
+                    <label>
+                        <div className="mx_ImageSizePanel_size mx_ImageSizePanel_sizeLarge" />
+                        <StyledRadioButton
+                            name="image_size"
+                            value={ImageSize.Large}
+                            checked={this.state.size === ImageSize.Large}
+                            onChange={this.onSizeChange}
+                        >{ _t("Large") }</StyledRadioButton>
+                    </label>
+                </div>
+            </div>
+        );
+    }
+}

src/components/views/settings/LayoutSwitcher.tsx

@@ -22,7 +22,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import EventTilePreview from "../elements/EventTilePreview";
 import StyledRadioButton from "../elements/StyledRadioButton";
 import { _t } from "../../../languageHandler";
-import { Layout } from "../../../settings/Layout";
+import { Layout } from "../../../settings/enums/Layout";
 import { SettingLevel } from "../../../settings/SettingLevel";
 
 interface IProps {

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -25,12 +25,13 @@ import SettingsFlag from '../../../elements/SettingsFlag';
 import Field from '../../../elements/Field';
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import { UIFeature } from "../../../../../settings/UIFeature";
-import { Layout } from "../../../../../settings/Layout";
+import { Layout } from "../../../../../settings/enums/Layout";
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
 import LayoutSwitcher from "../../LayoutSwitcher";
 
 import FontScalingPanel from '../../FontScalingPanel';
 import ThemeChoicePanel from '../../ThemeChoicePanel';
+import ImageSizePanel from "../../ImageSizePanel";
 
 interface IProps {
 }
@@ -188,6 +189,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 { layoutSection }
                 <FontScalingPanel />
                 { this.renderAdvancedSection() }
+                <ImageSizePanel />
             </div>
         );
     }