From aef7e5993f7024603213da9819b98d49d3358f7b Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 22 Oct 2021 18:18:32 -0600 Subject: [PATCH 01/14] Add support for variable image size in timeline (default/large) --- res/css/_components.scss | 1 + res/css/views/settings/_ImageSizePanel.scss | 47 +++++++++++ .../element-icons/settings/img-size-large.svg | 15 ++++ .../settings/img-size-normal.svg | 20 +++++ src/components/views/messages/MImageBody.tsx | 19 ++++- .../views/settings/ImageSizePanel.tsx | 79 +++++++++++++++++++ .../tabs/user/AppearanceUserSettingsTab.tsx | 2 + src/i18n/strings/en_EN.json | 2 + src/settings/Settings.tsx | 5 ++ src/settings/enums/ImageSize.ts | 20 +++++ 10 files changed, 209 insertions(+), 1 deletion(-) create mode 100644 res/css/views/settings/_ImageSizePanel.scss create mode 100644 res/img/element-icons/settings/img-size-large.svg create mode 100644 res/img/element-icons/settings/img-size-normal.svg create mode 100644 src/components/views/settings/ImageSizePanel.tsx create mode 100644 src/settings/enums/ImageSize.ts diff --git a/res/css/_components.scss b/res/css/_components.scss index 26e36b8cddb..56f34f1a643 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -249,6 +249,7 @@ @import "./views/settings/_E2eAdvancedPanel.scss"; @import "./views/settings/_EmailAddresses.scss"; @import "./views/settings/_FontScalingPanel.scss"; +@import "./views/settings/_ImageSizePanel.scss"; @import "./views/settings/_IntegrationManager.scss"; @import "./views/settings/_JoinRuleSettings.scss"; @import "./views/settings/_LayoutSwitcher.scss"; diff --git a/res/css/views/settings/_ImageSizePanel.scss b/res/css/views/settings/_ImageSizePanel.scss new file mode 100644 index 00000000000..3b0b982be2e --- /dev/null +++ b/res/css/views/settings/_ImageSizePanel.scss @@ -0,0 +1,47 @@ +/* +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. +*/ + +.mx_ImageSizePanel { + color: $primary-content; + + .mx_ImageSizePanel_radios { + display: flex; + margin-top: 16px; // move away from header a bit + + > label { + margin-right: 68px; // keep the boxes separate + cursor: pointer; + } + + .mx_ImageSizePanel_size { + background-color: $quinary-content; + mask-repeat: no-repeat; + mask-size: 221px; + mask-position: center; + width: 221px; + height: 148px; + margin-bottom: 14px; // move radio button away from bottom edge a bit + + &.mx_ImageSizePanel_sizeDefault { + mask: url("$(res)/img/element-icons/settings/img-size-normal.svg"); + } + + &.mx_ImageSizePanel_sizeLarge { + mask: url("$(res)/img/element-icons/settings/img-size-large.svg"); + } + } + } +} diff --git a/res/img/element-icons/settings/img-size-large.svg b/res/img/element-icons/settings/img-size-large.svg new file mode 100644 index 00000000000..749a5c7ecbf --- /dev/null +++ b/res/img/element-icons/settings/img-size-large.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/res/img/element-icons/settings/img-size-normal.svg b/res/img/element-icons/settings/img-size-normal.svg new file mode 100644 index 00000000000..96d8fd3fb4f --- /dev/null +++ b/res/img/element-icons/settings/img-size-normal.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 85821129a1e..71f0dde8f41 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -35,6 +35,7 @@ import classNames from 'classnames'; import { CSSTransition, SwitchTransition } from 'react-transition-group'; import { logger } from "matrix-js-sdk/src/logger"; +import { ImageSize } from "../../../settings/enums/ImageSize"; interface IState { decryptedUrl?: string; @@ -58,6 +59,7 @@ export default class MImageBody extends React.Component { private unmounted = true; private image = createRef(); private timeout?: number; + private sizeWatcher: string; constructor(props: IBodyProps) { super(props); @@ -317,12 +319,17 @@ export default class MImageBody extends React.Component { } }, 150); } + + 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 + }); } componentWillUnmount() { this.unmounted = true; this.context.removeListener('sync', this.onClientSync); this.clearBlurhashTimeout(); + SettingsStore.unwatchSetting(this.sizeWatcher); } protected messageContent( @@ -368,7 +375,17 @@ export default class MImageBody extends React.Component { } // The maximum height of the thumbnail as it is rendered as an - const maxHeight = forcedHeight || Math.min((this.props.maxImageHeight || 600), infoHeight); + let maxHeight = forcedHeight; + if (!maxHeight) { + switch (SettingsStore.getValue("Images.size") as ImageSize) { + case ImageSize.Large: + maxHeight = Math.min((this.props.maxImageHeight || 600), infoHeight); + break; + case ImageSize.Normal: + default: + maxHeight = Math.min((this.props.maxImageHeight || 220), infoHeight); + } + } // The maximum width of the thumbnail, as dictated by its natural // maximum height. const maxWidth = infoWidth * maxHeight / infoHeight; diff --git a/src/components/views/settings/ImageSizePanel.tsx b/src/components/views/settings/ImageSizePanel.tsx new file mode 100644 index 00000000000..8202fe4dd10 --- /dev/null +++ b/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 { + constructor(props: IProps) { + super(props); + + this.state = { + size: SettingsStore.getValue("Images.size"), + }; + } + + private onSizeChange = (ev: React.ChangeEvent) => { + 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 ( +
+ + { _t("Image size in the timeline") } + + +
+
); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 68f4fca1835..04ba295df84 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1163,6 +1163,8 @@ "Size must be a number": "Size must be a number", "Custom font size can only be between %(min)s pt and %(max)s pt": "Custom font size can only be between %(min)s pt and %(max)s pt", "Use between %(min)s pt and %(max)s pt": "Use between %(min)s pt and %(max)s pt", + "Image size in the timeline": "Image size in the timeline", + "Large": "Large", "Connecting to integration manager...": "Connecting to integration manager...", "Cannot connect to integration manager": "Cannot connect to integration manager", "The integration manager is offline or it cannot reach your homeserver.": "The integration manager is offline or it cannot reach your homeserver.", diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index ab3b164517b..64b7f2f3644 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -42,6 +42,7 @@ 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"; // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times const LEVELS_ROOM_SETTINGS = [ @@ -720,6 +721,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)"), diff --git a/src/settings/enums/ImageSize.ts b/src/settings/enums/ImageSize.ts new file mode 100644 index 00000000000..16a84086786 --- /dev/null +++ b/src/settings/enums/ImageSize.ts @@ -0,0 +1,20 @@ +/* +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. +*/ + +export enum ImageSize { + Normal = "normal", + Large = "large", +} From 9584a581823703dac5713f092eb039020115d762 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 22 Oct 2021 18:17:57 -0600 Subject: [PATCH 02/14] Move `Layout` to new enums path --- src/components/structures/FilePanel.tsx | 2 +- src/components/structures/MessagePanel.tsx | 2 +- src/components/structures/NotificationPanel.tsx | 2 +- src/components/structures/RoomView.tsx | 2 +- src/components/structures/ThreadPanel.tsx | 2 +- src/components/structures/ThreadView.tsx | 2 +- src/components/structures/TimelinePanel.tsx | 2 +- src/components/views/dialogs/ForwardDialog.tsx | 2 +- src/components/views/elements/EventListSummary.tsx | 2 +- src/components/views/elements/EventTilePreview.tsx | 2 +- src/components/views/elements/MemberEventListSummary.tsx | 2 +- src/components/views/elements/ReplyChain.tsx | 2 +- src/components/views/rooms/EventTile.tsx | 2 +- src/components/views/settings/FontScalingPanel.tsx | 2 +- src/components/views/settings/LayoutSwitcher.tsx | 2 +- .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx | 2 +- src/contexts/RoomContext.ts | 2 +- src/settings/Settings.tsx | 2 +- src/settings/controllers/NewLayoutSwitcherController.ts | 2 +- src/settings/{ => enums}/Layout.ts | 0 src/settings/handlers/DeviceSettingsHandler.ts | 2 +- src/utils/exportUtils/HtmlExport.tsx | 2 +- test/components/views/rooms/SendMessageComposer-test.tsx | 2 +- 23 files changed, 22 insertions(+), 22 deletions(-) rename src/settings/{ => enums}/Layout.ts (100%) diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index c57c2f7ecf2..9a354e4d217 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -36,7 +36,7 @@ import ResizeNotifier from '../../utils/ResizeNotifier'; import TimelinePanel from "./TimelinePanel"; import Spinner from "../views/elements/Spinner"; import { TileShape } from '../views/rooms/EventTile'; -import { Layout } from "../../settings/Layout"; +import { Layout } from "../../settings/enums/Layout"; import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext'; import { logger } from "matrix-js-sdk/src/logger"; diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index 46604236787..03d789f68b4 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -27,7 +27,7 @@ import { wantsDateSeparator } from '../../DateUtils'; import { MatrixClientPeg } from '../../MatrixClientPeg'; import SettingsStore from '../../settings/SettingsStore'; import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext"; -import { Layout } from "../../settings/Layout"; +import { Layout } from "../../settings/enums/Layout"; import { _t } from "../../languageHandler"; import EventTile, { haveTileForEvent, IReadReceiptProps, TileShape } from "../views/rooms/EventTile"; import { hasText } from "../../TextForEvent"; diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx index 52046c18559..0dc26523c73 100644 --- a/src/components/structures/NotificationPanel.tsx +++ b/src/components/structures/NotificationPanel.tsx @@ -23,7 +23,7 @@ import { replaceableComponent } from "../../utils/replaceableComponent"; import TimelinePanel from "./TimelinePanel"; import Spinner from "../views/elements/Spinner"; import { TileShape } from "../views/rooms/EventTile"; -import { Layout } from "../../settings/Layout"; +import { Layout } from "../../settings/enums/Layout"; import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext"; import { logger } from "matrix-js-sdk/src/logger"; diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 6338ce0c60f..89d067aebc1 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -44,7 +44,7 @@ import RoomViewStore from '../../stores/RoomViewStore'; import RoomScrollStateStore, { ScrollState } from '../../stores/RoomScrollStateStore'; import WidgetEchoStore from '../../stores/WidgetEchoStore'; import SettingsStore from "../../settings/SettingsStore"; -import { Layout } from "../../settings/Layout"; +import { Layout } from "../../settings/enums/Layout"; import AccessibleButton from "../views/elements/AccessibleButton"; import RightPanelStore from "../../stores/RightPanelStore"; import { haveTileForEvent } from "../views/rooms/EventTile"; diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index c3db17e1936..5a0efe986e7 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -29,7 +29,7 @@ import { ContextMenuButton } from '../../accessibility/context_menu/ContextMenuB import ContextMenu, { useContextMenu } from './ContextMenu'; import RoomContext, { TimelineRenderingType } from '../../contexts/RoomContext'; import TimelinePanel from './TimelinePanel'; -import { Layout } from '../../settings/Layout'; +import { Layout } from '../../settings/enums/Layout'; import { useEventEmitter } from '../../hooks/useEventEmitter'; import AccessibleButton from '../views/elements/AccessibleButton'; import { TileShape } from '../views/rooms/EventTile'; diff --git a/src/components/structures/ThreadView.tsx b/src/components/structures/ThreadView.tsx index c7a4342449b..70936073a6f 100644 --- a/src/components/structures/ThreadView.tsx +++ b/src/components/structures/ThreadView.tsx @@ -27,7 +27,7 @@ import ResizeNotifier from '../../utils/ResizeNotifier'; import { TileShape } from '../views/rooms/EventTile'; import MessageComposer from '../views/rooms/MessageComposer'; import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks'; -import { Layout } from '../../settings/Layout'; +import { Layout } from '../../settings/enums/Layout'; import TimelinePanel from './TimelinePanel'; import dis from "../../dispatcher/dispatcher"; import { ActionPayload } from '../../dispatcher/payloads'; diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index 495d3c438ff..aa5fda2f286 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -25,7 +25,7 @@ import { EventType, RelationType } from 'matrix-js-sdk/src/@types/event'; import { SyncState } from 'matrix-js-sdk/src/sync.api'; import SettingsStore from "../../settings/SettingsStore"; -import { Layout } from "../../settings/Layout"; +import { Layout } from "../../settings/enums/Layout"; import { _t } from '../../languageHandler'; import { MatrixClientPeg } from "../../MatrixClientPeg"; import RoomContext from "../../contexts/RoomContext"; diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index 7f08a3eb589..f07beaa725e 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/src/components/views/dialogs/ForwardDialog.tsx @@ -25,7 +25,7 @@ import { _t } from "../../../languageHandler"; import dis from "../../../dispatcher/dispatcher"; import { useSettingValue, useFeatureEnabled } from "../../../hooks/useSettings"; import { UIFeature } from "../../../settings/UIFeature"; -import { Layout } from "../../../settings/Layout"; +import { Layout } from "../../../settings/enums/Layout"; import { IDialogProps } from "./IDialogProps"; import BaseDialog from "./BaseDialog"; import { avatarUrlForUser } from "../../../Avatar"; diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx index cbb0e17b427..69ae1344cbe 100644 --- a/src/components/views/elements/EventListSummary.tsx +++ b/src/components/views/elements/EventListSummary.tsx @@ -22,7 +22,7 @@ import MemberAvatar from '../avatars/MemberAvatar'; import { _t } from '../../../languageHandler'; import { useStateToggle } from "../../../hooks/useStateToggle"; import AccessibleButton from "./AccessibleButton"; -import { Layout } from '../../../settings/Layout'; +import { Layout } from '../../../settings/enums/Layout'; interface IProps { // An array of member events to summarise diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx index a7ebf40c3a8..5e7c2a725b7 100644 --- a/src/components/views/elements/EventTilePreview.tsx +++ b/src/components/views/elements/EventTilePreview.tsx @@ -22,7 +22,7 @@ import { RoomMember } from 'matrix-js-sdk/src/models/room-member'; import * as Avatar from '../../../Avatar'; import EventTile from '../rooms/EventTile'; import SettingsStore from "../../../settings/SettingsStore"; -import { Layout } from "../../../settings/Layout"; +import { Layout } from "../../../settings/enums/Layout"; import { UIFeature } from "../../../settings/UIFeature"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import Spinner from './Spinner'; diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx index 4eb0177fef6..13dcb114f91 100644 --- a/src/components/views/elements/MemberEventListSummary.tsx +++ b/src/components/views/elements/MemberEventListSummary.tsx @@ -31,7 +31,7 @@ import { Action } from '../../../dispatcher/actions'; import { SetRightPanelPhasePayload } from '../../../dispatcher/payloads/SetRightPanelPhasePayload'; import { jsxJoin } from '../../../utils/ReactUtils'; import { EventType } from 'matrix-js-sdk/src/@types/event'; -import { Layout } from '../../../settings/Layout'; +import { Layout } from '../../../settings/enums/Layout'; const onPinnedMessagesClick = (): void => { defaultDispatcher.dispatch({ diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx index 50efdc92fb5..39dbfb1c3e0 100644 --- a/src/components/views/elements/ReplyChain.tsx +++ b/src/components/views/elements/ReplyChain.tsx @@ -23,7 +23,7 @@ import dis from '../../../dispatcher/dispatcher'; import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import SettingsStore from "../../../settings/SettingsStore"; -import { Layout } from "../../../settings/Layout"; +import { Layout } from "../../../settings/enums/Layout"; import escapeHtml from "escape-html"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 26b25699c04..f4375bc5cba 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -28,7 +28,7 @@ import { _t } from '../../../languageHandler'; import { hasText } from "../../../TextForEvent"; import * as sdk from "../../../index"; import dis from '../../../dispatcher/dispatcher'; -import { Layout } from "../../../settings/Layout"; +import { Layout } from "../../../settings/enums/Layout"; import { formatTime } from "../../../DateUtils"; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import { ALL_RULE_TYPES } from "../../../mjolnir/BanList"; diff --git a/src/components/views/settings/FontScalingPanel.tsx b/src/components/views/settings/FontScalingPanel.tsx index aabfc1c9a48..ab701731d20 100644 --- a/src/components/views/settings/FontScalingPanel.tsx +++ b/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"; diff --git a/src/components/views/settings/LayoutSwitcher.tsx b/src/components/views/settings/LayoutSwitcher.tsx index ad8abd00337..22fcc734a16 100644 --- a/src/components/views/settings/LayoutSwitcher.tsx +++ b/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 { diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 41f2061f0be..37007fbad78 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -25,7 +25,7 @@ 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"; diff --git a/src/contexts/RoomContext.ts b/src/contexts/RoomContext.ts index 605df72f0dd..8329335831e 100644 --- a/src/contexts/RoomContext.ts +++ b/src/contexts/RoomContext.ts @@ -17,7 +17,7 @@ limitations under the License. import { createContext } from "react"; import { IRoomState } from "../components/structures/RoomView"; -import { Layout } from "../settings/Layout"; +import { Layout } from "../settings/enums/Layout"; export enum TimelineRenderingType { Room = "Room", diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 64b7f2f3644..08e9ec52130 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -37,7 +37,7 @@ 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'; diff --git a/src/settings/controllers/NewLayoutSwitcherController.ts b/src/settings/controllers/NewLayoutSwitcherController.ts index b1d6cac55e6..e2ea710e080 100644 --- a/src/settings/controllers/NewLayoutSwitcherController.ts +++ b/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) { diff --git a/src/settings/Layout.ts b/src/settings/enums/Layout.ts similarity index 100% rename from src/settings/Layout.ts rename to src/settings/enums/Layout.ts diff --git a/src/settings/handlers/DeviceSettingsHandler.ts b/src/settings/handlers/DeviceSettingsHandler.ts index e57862a8243..f7a9fe9108d 100644 --- a/src/settings/handlers/DeviceSettingsHandler.ts +++ b/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. diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx index f7d3bb5e09a..7c8265fd32c 100644 --- a/src/utils/exportUtils/HtmlExport.tsx +++ b/src/utils/exportUtils/HtmlExport.tsx @@ -21,7 +21,7 @@ import { mediaFromMxc } from "../../customisations/Media"; import { Room } from "matrix-js-sdk/src/models/room"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { renderToStaticMarkup } from "react-dom/server"; -import { Layout } from "../../settings/Layout"; +import { Layout } from "../../settings/enums/Layout"; import { shouldFormContinuation } from "../../components/structures/MessagePanel"; import { formatFullDateNoDayNoTime, wantsDateSeparator } from "../../DateUtils"; import { RoomPermalinkCreator } from "../permalinks/Permalinks"; diff --git a/test/components/views/rooms/SendMessageComposer-test.tsx b/test/components/views/rooms/SendMessageComposer-test.tsx index ec4894719e5..9c1a558a866 100644 --- a/test/components/views/rooms/SendMessageComposer-test.tsx +++ b/test/components/views/rooms/SendMessageComposer-test.tsx @@ -35,7 +35,7 @@ import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import SpecPermalinkConstructor from "../../../../src/utils/permalinks/SpecPermalinkConstructor"; import defaultDispatcher from "../../../../src/dispatcher/dispatcher"; import DocumentOffset from '../../../../src/editor/offset'; -import { Layout } from '../../../../src/settings/Layout'; +import { Layout } from '../../../../src/settings/enums/Layout'; jest.mock("../../../../src/stores/RoomViewStore"); From a335c6aef703b75a697d23f03faa9738123f08b3 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 22 Oct 2021 18:32:10 -0600 Subject: [PATCH 03/14] Dear Linter, here is your semicolon --- src/components/views/settings/ImageSizePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/ImageSizePanel.tsx b/src/components/views/settings/ImageSizePanel.tsx index 8202fe4dd10..2e77d03f612 100644 --- a/src/components/views/settings/ImageSizePanel.tsx +++ b/src/components/views/settings/ImageSizePanel.tsx @@ -44,7 +44,7 @@ export default class ImageSizePanel extends React.Component { // noinspection JSIgnoredPromiseFromCall SettingsStore.setValue("Images.size", null, SettingLevel.ACCOUNT, newSize); - } + }; public render(): JSX.Element { return ( From e56f918da4239c4232bf30f347adba18367e8fc6 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sat, 23 Oct 2021 13:54:53 -0600 Subject: [PATCH 04/14] Update src/components/views/settings/ImageSizePanel.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Šimon Brandner --- src/components/views/settings/ImageSizePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/settings/ImageSizePanel.tsx b/src/components/views/settings/ImageSizePanel.tsx index 2e77d03f612..bacdd6144d3 100644 --- a/src/components/views/settings/ImageSizePanel.tsx +++ b/src/components/views/settings/ImageSizePanel.tsx @@ -38,7 +38,7 @@ export default class ImageSizePanel extends React.Component { }; } - private onSizeChange = (ev: React.ChangeEvent) => { + private onSizeChange = (ev: React.ChangeEvent): void => { const newSize = ev.target.value as ImageSize; this.setState({ size: newSize }); From c52ad3f5f977582025d73b01afe33c638c7536c8 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 26 Oct 2021 14:10:49 -0600 Subject: [PATCH 05/14] Apply changes to videos as well --- src/components/views/messages/MVideoBody.tsx | 42 +++++++++++++++++--- 1 file changed, 37 insertions(+), 5 deletions(-) diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index b2e587e51ab..04fb3b91867 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/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 { private videoRef = React.createRef(); + private sizeWatcher: string; constructor(props) { super(props); @@ -57,7 +59,28 @@ export default class MVideoBody extends React.PureComponent }; } - 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 } } - 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 } } + 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 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) { From 11f1d89b6729c815b6fe57c4d480da537da247e3 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 26 Oct 2021 14:14:00 -0600 Subject: [PATCH 06/14] Apply 8px border radius --- res/css/views/messages/_MImageBody.scss | 3 ++- res/css/views/messages/_MVideoBody.scss | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 920c3011f58..39f8c51c099 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/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; diff --git a/res/css/views/messages/_MVideoBody.scss b/res/css/views/messages/_MVideoBody.scss index ac3491bc8ff..cecf78056a3 100644 --- a/res/css/views/messages/_MVideoBody.scss +++ b/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; } } From f13d1c01bd86a27d6a8aeb65156c8b8d1b82582e Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 12 Nov 2021 16:39:35 +0100 Subject: [PATCH 07/14] fix crash when opening the appearance-settings - it uses the EventTileView fakeEvent which results in room beeing null as a consequence `room.findThreadForEvent` crashes the panel --- src/components/views/rooms/EventTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index b046e3dfe73..6626da3ed72 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1166,7 +1166,7 @@ export default class EventTile extends React.Component { || this.state.actionBarFocused); const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId()); - const thread = room.findThreadForEvent?.(this.props.mxEvent); + const thread = room?.findThreadForEvent?.(this.props.mxEvent); // Thread panel shows the timestamp of the last reply in that thread const ts = this.props.tileShape !== TileShape.ThreadPanel From c72c4ef98fcb8d458974c3d0665d027983d71d1b Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 12 Nov 2021 16:55:38 +0100 Subject: [PATCH 08/14] fix rounded corners for blurhash --- res/css/views/messages/_MImageBody.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 7bf7b908af0..d6adb550fcc 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -33,9 +33,10 @@ $timelineImageBorderRadius: 8px; height: 100%; width: 100%; + // this is needed so that the Blurhash can get have rounded corners without beeing the correct size during loading. + overflow: hidden; .mx_Blurhash > canvas { animation: mx--anim-pulse 1.75s infinite cubic-bezier(.4, 0, .6, 1); - border-radius: $timelineImageBorderRadius; } .mx_no-image-placeholder { From 25120877a93b699d68ead32b7018cf23d1d22e22 Mon Sep 17 00:00:00 2001 From: Timo K Date: Fri, 12 Nov 2021 18:08:50 +0100 Subject: [PATCH 09/14] Make images size based on Width (but still follow hight constraints) - refactor using size constants form ImageSize --- src/components/views/messages/MImageBody.tsx | 34 +++++++++++--------- src/components/views/messages/MVideoBody.tsx | 14 +++----- src/settings/enums/ImageSize.ts | 12 +++++++ 3 files changed, 35 insertions(+), 25 deletions(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 71f0dde8f41..cb4bb0ae112 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -35,7 +35,7 @@ import classNames from 'classnames'; import { CSSTransition, SwitchTransition } from 'react-transition-group'; import { logger } from "matrix-js-sdk/src/logger"; -import { ImageSize } from "../../../settings/enums/ImageSize"; +import { ImageSize, suggestedSize as suggestedImageSize } from "../../../settings/enums/ImageSize"; interface IState { decryptedUrl?: string; @@ -374,21 +374,25 @@ export default class MImageBody extends React.Component { infoHeight = this.state.loadedImageDimensions.naturalHeight; } - // The maximum height of the thumbnail as it is rendered as an - let maxHeight = forcedHeight; - if (!maxHeight) { - switch (SettingsStore.getValue("Images.size") as ImageSize) { - case ImageSize.Large: - maxHeight = Math.min((this.props.maxImageHeight || 600), infoHeight); - break; - case ImageSize.Normal: - default: - maxHeight = Math.min((this.props.maxImageHeight || 220), infoHeight); - } + // The maximum size of the thumbnail as it is rendered as an + //check for any height contraints + const imageSize = SettingsStore.getValue("Images.size") as ImageSize; + const suggestedAndPossibleWidth = Math.min(suggestedImageSize(imageSize).w, infoWidth); + const aspectRatio = infoWidth / infoHeight; + + let maxWidth; + let maxHeight; + const maxHeightConstraint = forcedHeight || this.props.maxImageHeight || undefined; + if (maxHeightConstraint && maxHeightConstraint * aspectRatio < suggestedAndPossibleWidth) { + // width is dictated by the maximum height that was defined by the props or the function param `forcedHeight` + maxWidth = maxHeightConstraint * aspectRatio; + // there is no need to check for infoHeight here since this is done with `maxHeightConstraint * aspectRatio < suggestedAndPossibleWidth` + maxHeight = maxHeightConstraint; + } else { + // height is dictated by suggestedWidth (based on the Image.size setting) + maxWidth = suggestedAndPossibleWidth; + maxHeight = suggestedAndPossibleWidth / aspectRatio; } - // The maximum width of the thumbnail, as dictated by its natural - // maximum height. - const maxWidth = infoWidth * maxHeight / infoHeight; let img = null; let placeholder = null; diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index 04fb3b91867..977ffe14ea9 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/src/components/views/messages/MVideoBody.tsx @@ -28,7 +28,7 @@ import { IBodyProps } from "./IBodyProps"; import MFileBody from "./MFileBody"; import { logger } from "matrix-js-sdk/src/logger"; -import { ImageSize } from "../../../settings/enums/ImageSize"; +import { ImageSize, suggestedSize as suggestedVideoSize } from "../../../settings/enums/ImageSize"; interface IState { decryptedUrl?: string; @@ -60,20 +60,14 @@ export default class MVideoBody extends React.PureComponent } 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 }; - } + return suggestedVideoSize(SettingsStore.getValue("Images.size") as ImageSize); } private thumbScale( fullWidth: number, fullHeight: number, - thumbWidth?, - thumbHeight?, + thumbWidth?: number, + thumbHeight?: number, ) { if (!thumbWidth || !thumbHeight) { const dims = this.suggestedDimensions; diff --git a/src/settings/enums/ImageSize.ts b/src/settings/enums/ImageSize.ts index 16a84086786..88390f1d6d1 100644 --- a/src/settings/enums/ImageSize.ts +++ b/src/settings/enums/ImageSize.ts @@ -13,8 +13,20 @@ 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; + } +} From 4ce60ed65b8d10cf6dbf556a16c659546f87fbd1 Mon Sep 17 00:00:00 2001 From: Timo K Date: Mon, 15 Nov 2021 12:41:02 +0100 Subject: [PATCH 10/14] Always scale videos based on the requested width. --- src/components/views/messages/MVideoBody.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index 977ffe14ea9..a86f4b5fb61 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/src/components/views/messages/MVideoBody.tsx @@ -85,14 +85,8 @@ export default class MVideoBody extends React.PureComponent return 1; } const widthMulti = thumbWidth / fullWidth; - const heightMulti = thumbHeight / fullHeight; - if (widthMulti < heightMulti) { - // width is the dominant dimension so scaling will be fixed on that - return widthMulti; - } else { - // height is the dominant dimension so scaling will be fixed on that - return heightMulti; - } + // always scale the videos based on their width. + return widthMulti; } private getContentUrl(): string|null { From ee6fcc76d3c2f7f266f83e3dcd2aca111696f449 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 16 Nov 2021 17:21:41 +0100 Subject: [PATCH 11/14] fix typo Co-authored-by: J. Ryan Stinnett --- src/components/views/messages/MImageBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index cb4bb0ae112..d8f2f7c6559 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -375,7 +375,7 @@ export default class MImageBody extends React.Component { } // The maximum size of the thumbnail as it is rendered as an - //check for any height contraints + // check for any height constraints const imageSize = SettingsStore.getValue("Images.size") as ImageSize; const suggestedAndPossibleWidth = Math.min(suggestedImageSize(imageSize).w, infoWidth); const aspectRatio = infoWidth / infoHeight; From 90ec75f554e4232a6e3adab4230fe70c1a81afe0 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 16 Nov 2021 17:37:57 +0100 Subject: [PATCH 12/14] use $timeline-image-boarder-radius --- res/css/_common.scss | 1 + res/css/views/messages/_MImageBody.scss | 4 ++-- res/css/views/messages/_MVideoBody.scss | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 3d8b6659b38..7c8f7326a4c 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -32,6 +32,7 @@ $slider-selection-dot-size: 2.4em; $container-border-width: 8px; +$timeline-image-boarder-radius: 8px; :root { font-size: 10px; diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index d6adb550fcc..db06c11e21e 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -$timelineImageBorderRadius: 8px; +$timeline-image-boarder-radius: 8px; .mx_MImageBody_thumbnail--blurhash { position: absolute; @@ -25,7 +25,7 @@ $timelineImageBorderRadius: 8px; .mx_MImageBody_thumbnail { object-fit: contain; - border-radius: $timelineImageBorderRadius; + border-radius: $timeline-image-boarder-radius; display: flex; justify-content: center; diff --git a/res/css/views/messages/_MVideoBody.scss b/res/css/views/messages/_MVideoBody.scss index cecf78056a3..b5fdaeabef4 100644 --- a/res/css/views/messages/_MVideoBody.scss +++ b/res/css/views/messages/_MVideoBody.scss @@ -18,6 +18,6 @@ span.mx_MVideoBody { video.mx_MVideoBody { max-width: 100%; height: auto; - border-radius: 8px; + border-radius: $timeline-image-boarder-radius; } } From 674811300b316a9d9af92602436dd72ab6a42f26 Mon Sep 17 00:00:00 2001 From: Timo K Date: Tue, 16 Nov 2021 18:31:07 +0100 Subject: [PATCH 13/14] add return type to thumbScale --- src/components/views/messages/MVideoBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index a86f4b5fb61..078886ba49c 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/src/components/views/messages/MVideoBody.tsx @@ -68,7 +68,7 @@ export default class MVideoBody extends React.PureComponent fullHeight: number, thumbWidth?: number, thumbHeight?: number, - ) { + ): number { if (!thumbWidth || !thumbHeight) { const dims = this.suggestedDimensions; thumbWidth = dims.w; From 697589295637d646fcd1a8710d0128301ba4c8d9 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Tue, 16 Nov 2021 18:32:42 +0100 Subject: [PATCH 14/14] add space at the top of the file Co-authored-by: J. Ryan Stinnett --- src/settings/enums/ImageSize.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/settings/enums/ImageSize.ts b/src/settings/enums/ImageSize.ts index 88390f1d6d1..47f16ddc834 100644 --- a/src/settings/enums/ImageSize.ts +++ b/src/settings/enums/ImageSize.ts @@ -13,6 +13,7 @@ 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 };