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/settings/Settings.tsx

@@ -37,11 +37,12 @@ import { isMac } from '../Keyboard';
 import UIFeatureController from "./controllers/UIFeatureController";
 import { UIFeature } from "./UIFeature";
 import { OrderedMultiController } from "./controllers/OrderedMultiController";
-import { Layout } from "./Layout";
+import { Layout } from "./enums/Layout";
 import ReducedMotionController from './controllers/ReducedMotionController';
 import IncompatibleController from "./controllers/IncompatibleController";
 import PseudonymousAnalyticsController from './controllers/PseudonymousAnalyticsController';
 import NewLayoutSwitcherController from './controllers/NewLayoutSwitcherController';
+import { ImageSize } from "./enums/ImageSize";
 import { MetaSpace } from "../stores/spaces";
 
 // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times
@@ -737,6 +738,10 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: Layout.Group,
     },
+    "Images.size": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        default: ImageSize.Normal,
+    },
     "showChatEffects": {
         supportedLevels: LEVELS_ROOM_SETTINGS_WITH_ROOM,
         displayName: _td("Show chat effects (animations when receiving e.g. confetti)"),

src/settings/controllers/NewLayoutSwitcherController.ts

@@ -14,7 +14,7 @@ limitations under the License.
 import SettingController from "./SettingController";
 import { SettingLevel } from "../SettingLevel";
 import SettingsStore from "../SettingsStore";
-import { Layout } from "../Layout";
+import { Layout } from "../enums/Layout";
 
 export default class NewLayoutSwitcherController extends SettingController {
     public onChange(level: SettingLevel, roomId: string, newValue: any) {

src/settings/enums/ImageSize.ts

@@ -0,0 +1,33 @@
+/*
+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.
+*/
+
+const SIZE_LARGE = { w: 480, h: 360 };
+const SIZE_NORMAL = { w: 324, h: 220 };
+
+export enum ImageSize {
+    Normal = "normal",
+    Large = "large",
+}
+
+export function suggestedSize(size: ImageSize): { w: number, h: number } {
+    switch (size) {
+        case ImageSize.Large:
+            return SIZE_LARGE;
+        case ImageSize.Normal:
+        default:
+            return SIZE_NORMAL;
+    }
+}

src/settings/handlers/DeviceSettingsHandler.ts

@@ -20,7 +20,7 @@ import SettingsHandler from "./SettingsHandler";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import { SettingLevel } from "../SettingLevel";
 import { CallbackFn, WatchManager } from "../WatchManager";
-import { Layout } from "../Layout";
+import { Layout } from "../enums/Layout";
 
 /**
  * Gets and sets settings at the "device" level for the current device.