Fix size of portrait images with the SIZE_NORMAL setting.

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;
  }
 }