PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Upscale thumbnails to the container size

Browse source 
Force thumbnails to be the size of the container, even if that means
upscaling them. As per comment, this will mean that the thumbnails
will sometimes be larger and a bit blurry rather than small. It looks
like this was probably a source of scroll jumps before.

As per comment, a better fix would be to be be able to know what
size thumbnails the HS will give us so we can size the containers
appropriately.

Type: defect
Regressed by: https://github.com/matrix-org/matrix-react-sdk/pull/6514
Fixes https://github.com/vector-im/element-web/issues/18307
This commit is contained in:
David Baker 2021-08-10 15:14:04 +01:00
parent 87690f0739
commit 50aa3d6c46
1 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -347,12 +347,21 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
className="mx_MImageBody_thumbnail"
src={thumbUrl}
ref={this.image}
style={{ maxWidth: `min(100%, ${maxWidth}px)` }}
// Force the image to be the full size of the container, even if the
// pixel size is smaller. The problem here is that we don't know what
// thumbnail size the HS is going to give us, but we have to commit to
// a container size immediately and not change it when the image loads
// or we'll get a scroll jump (or have to leave blank space).
// This will obviously result in an upscaled image which will be a bit
// blurry. The best fix would be for the HS to advertise what size thumbnails
// it guarantees to produce.
style={{ height: '100%' }}
alt={content.body}
onError={this.onImageError}
onLoad={this.onImageLoad}
onMouseEnter={this.onImageEnter}
onMouseLeave={this.onImageLeave} />
onMouseLeave={this.onImageLeave}
/>
);
}
@ -379,7 +388,10 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
</div>
}
<div style={{ display: !showPlaceholder ? undefined : 'none' }}>
<div style={{
display: !showPlaceholder ? undefined : 'none',
height: '100%', // Also force to size of a parent to prevent scroll-jumps (see above)
}}>
{ img }
{ gifLabel }
</div>