Add option to change the size of images/videos in the timeline

res/css/views/messages/_MImageBody.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+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.
@@ -14,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$timelineImageBorderRadius: 4px;
+$timelineImageBorderRadius: 8px;
 
 .mx_MImageBody_thumbnail--blurhash {
     position: absolute;

res/css/views/messages/_MVideoBody.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020 - 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.
@@ -18,6 +18,6 @@ span.mx_MVideoBody {
     video.mx_MVideoBody {
         max-width: 100%;
         height: auto;
-        border-radius: 4px;
+        border-radius: 8px;
     }
 }

src/components/views/messages/MVideoBody.tsx

@@ -28,6 +28,7 @@ import { IBodyProps } from "./IBodyProps";
 import MFileBody from "./MFileBody";
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { ImageSize } from "../../../settings/enums/ImageSize";
 
 interface IState {
     decryptedUrl?: string;
@@ -42,6 +43,7 @@ interface IState {
 @replaceableComponent("views.messages.MVideoBody")
 export default class MVideoBody extends React.PureComponent<IBodyProps, IState> {
     private videoRef = React.createRef<HTMLVideoElement>();
+    private sizeWatcher: string;
 
     constructor(props) {
         super(props);
@@ -57,7 +59,28 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         };
     }
 
-    thumbScale(fullWidth: number, fullHeight: number, thumbWidth = 480, thumbHeight = 360) {
+    private get suggestedDimensions(): { w: number, h: number } {
+        switch (SettingsStore.getValue("Images.size") as ImageSize) {
+            case ImageSize.Large:
+                return { w: 480, h: 360 };
+            case ImageSize.Normal:
+            default:
+                return { w: 324, h: 220 };
+        }
+    }
+
+    private thumbScale(
+        fullWidth: number,
+        fullHeight: number,
+        thumbWidth?,
+        thumbHeight?,
+    ) {
+        if (!thumbWidth || !thumbHeight) {
+            const dims = this.suggestedDimensions;
+            thumbWidth = dims.w;
+            thumbHeight = dims.h;
+        }
+
         if (!fullWidth || !fullHeight) {
             // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
             // log this because it's spammy
@@ -152,12 +175,16 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         }
     }
 
-    async componentDidMount() {
-        const autoplay = SettingsStore.getValue("autoplayVideo") as boolean;
+    public async componentDidMount() {
+        this.sizeWatcher = SettingsStore.watchSetting("Images.size", null, () => {
+            this.forceUpdate(); // we don't really have a reliable thing to update, so just update the whole thing
+        });
+
         this.loadBlurhash();
 
         if (this.props.mediaEventHelper.media.isEncrypted && this.state.decryptedUrl === null) {
             try {
+                const autoplay = SettingsStore.getValue("autoplayVideo") as boolean;
                 const thumbnailUrl = await this.props.mediaEventHelper.thumbnailUrl.value;
                 if (autoplay) {
                     logger.log("Preloading video");
@@ -189,6 +216,10 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         }
     }
 
+    public componentWillUnmount() {
+        SettingsStore.unwatchSetting(this.sizeWatcher);
+    }
+
     private videoOnPlay = async () => {
         if (this.hasContentUrl() || this.state.fetchingData || this.state.error) {
             // We have the file, we are fetching the file, or there is an error.
@@ -249,8 +280,9 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
 
         const contentUrl = this.getContentUrl();
         const thumbUrl = this.getThumbUrl();
-        let height = null;
-        let width = null;
+        const defaultDims = this.suggestedDimensions;
+        let height = defaultDims.h;
+        let width = defaultDims.w;
         let poster = null;
         let preload = "metadata";
         if (content.info) {