imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix image preview sizing for edge cases (#8322)

Browse source
This commit is contained in:
Janne Mareike Koschinski 2022-04-14 20:07:34 +02:00 • committed by GitHub
parent ffeab40af6
commit 1436f23e2f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/views/messages/MImageBody.tsx
View file

@ -364,10 +364,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
let infoWidth: number;
let infoHeight: number;
let infoSvg = false;
if (content.info?.w && content.info?.h) {
infoWidth = content.info.w;
infoHeight = content.info.h;
infoSvg = content.info.mimetype.startsWith("image/svg");
} else {
// Whilst the image loads, display nothing. We also don't display a blurhash image
// because we don't really know what size of image we'll end up with.
@ -449,6 +451,11 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
'mx_MImageBody_placeholder--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
});
// many SVGs don't have an intrinsic size if used in <img> elements.
// due to this we have to set our desired width directly.
// this way if the image is forced to shrink, the height adapts appropriately.
const sizing = infoSvg ? { maxHeight, maxWidth, width: maxWidth } : { maxHeight, maxWidth };
const thumbnail = (
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight, maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}>
<SwitchTransition mode="out-in">
@ -463,7 +470,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
</CSSTransition>
</SwitchTransition>
<div style={{ maxHeight, maxWidth }}>
<div style={sizing}>
{ img }
{ gifLabel }
</div>