Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Fix image preview sizing for edge cases (#8322)
Browse files Browse the repository at this point in the history
  • Loading branch information
justjanne authored Apr 14, 2022
1 parent ffeab40 commit 1436f23
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 1 deletion.
6 changes: 6 additions & 0 deletions res/css/views/messages/_MImageBody.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ $timeline-image-border-radius: 8px;
// Necessary for the border radius to apply correctly to the placeholder
overflow: hidden;
contain: paint;

min-height: $font-44px;
min-width: $font-44px;
display: flex;
justify-content: center;
align-items: center;
}

.mx_MImageBody_thumbnail {
Expand Down
5 changes: 5 additions & 0 deletions res/css/views/rooms/_EventBubbleTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,11 @@ limitations under the License.
padding-right: 48px;
}

.mx_MImageBody_thumbnail_container {
min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
}

.mx_CallEvent {
background-color: unset;

Expand Down
9 changes: 8 additions & 1 deletion src/components/views/messages/MImageBody.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down

0 comments on commit 1436f23

Please sign in to comment.