Fix size of portrait images with the SIZE_NORMAL setting. (#7188)

src/components/views/messages/MImageBody.tsx

@@ -378,15 +378,16 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         // The maximum size of the thumbnail as it is rendered as an <img>
         // check for any height constraints
         const imageSize = SettingsStore.getValue("Images.size") as ImageSize;
-        const suggestedAndPossibleWidth = Math.min(suggestedImageSize(imageSize).w, infoWidth);
-        const suggestedAndPossibleHeight = Math.min(suggestedImageSize(imageSize).h, infoHeight);
+        const isPortrait = infoWidth < infoHeight;
+        const suggestedAndPossibleWidth = Math.min(suggestedImageSize(imageSize, isPortrait).w, infoWidth);
+        const suggestedAndPossibleHeight = Math.min(suggestedImageSize(imageSize, isPortrait).h, infoHeight);
         const aspectRatio = infoWidth / infoHeight;
 
         let maxWidth;
         let maxHeight;
         const maxHeightConstraint = forcedHeight || this.props.maxImageHeight || suggestedAndPossibleHeight;
         if (maxHeightConstraint * aspectRatio < suggestedAndPossibleWidth || imageSize === ImageSize.Large) {
-            // width is dictated by the maximum height that was defined by the props or the function param `forcedHeight`
+            // The width is dictated by the maximum height that was defined by the props or the function param `forcedHeight`
             // If the thumbnail size is set to Large, we always let the size be dictated by the height.
             maxWidth = maxHeightConstraint * aspectRatio;
             // there is no need to check for infoHeight here since this is done with `maxHeightConstraint * aspectRatio < suggestedAndPossibleWidth`

src/components/views/messages/MVideoBody.tsx

@@ -59,7 +59,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         };
     }
 
-    private get suggestedDimensions(): { w: number, h: number } {
+    private suggestedDimensions(isPortrait): { w: number, h: number } {
         return suggestedVideoSize(SettingsStore.getValue("Images.size") as ImageSize);
     }
 
@@ -69,23 +69,25 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         thumbWidth?: number,
         thumbHeight?: number,
     ): number {
-        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
             return undefined;
         }
+
+        if (!thumbWidth || !thumbHeight) {
+            const dims = this.suggestedDimensions(fullWidth < fullHeight);
+            thumbWidth = dims.w;
+            thumbHeight = dims.h;
+        }
+
         if (fullWidth < thumbWidth && fullHeight < thumbHeight) {
             // no scaling needs to be applied
             return 1;
         }
-        const widthMulti = thumbWidth / fullWidth;
+
         // always scale the videos based on their width.
+        const widthMulti = thumbWidth / fullWidth;
         return widthMulti;
     }
 
@@ -268,7 +270,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
 
         const contentUrl = this.getContentUrl();
         const thumbUrl = this.getThumbUrl();
-        const defaultDims = this.suggestedDimensions;
+        const defaultDims = this.suggestedDimensions(false);
         let height = defaultDims.h;
         let width = defaultDims.w;
         let poster = null;

src/settings/enums/ImageSize.ts

@@ -14,20 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// For Large the image gets drawn as big as possible.
+// constraint by: timeline width, manual heigh overrides, SIZE_LARGE.h
 const SIZE_LARGE = { w: 800, h: 600 };
-const SIZE_NORMAL = { w: 324, h: 220 };
 
+// For Normal the image gets drawn to never exceed SIZE_NORMAL.w, SIZE_NORMAL.h
+// constraint by: timeline width, manual heigh overrides
+const SIZE_NORMAL_LANDSCAPE = { w: 324, h: 324 }; // for w > h
+const SIZE_NORMAL_PORTRAIT = { w: 324 * (9/16), h: 324 }; // for h > w
 export enum ImageSize {
     Normal = "normal",
     Large = "large",
 }
 
-export function suggestedSize(size: ImageSize): { w: number, h: number } {
+export function suggestedSize(size: ImageSize, portrait = false): { w: number, h: number} {
     switch (size) {
         case ImageSize.Large:
             return SIZE_LARGE;
         case ImageSize.Normal:
         default:
-            return SIZE_NORMAL;
+            return portrait ? SIZE_NORMAL_PORTRAIT : SIZE_NORMAL_LANDSCAPE;
     }
 }