mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 17:56:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

correctly fix up thumbnail height onload.

Browse source 
fixes https://github.com/vector-im/riot-web/issues/6492, although popping is inevitable in
the current implementation as it only fixes up the thumbnail size once the image has loaded.
This commit is contained in:
Matthew Hodgson 2018-04-29 04:28:15 +01:00
parent 731f1fa7d3
commit 551d3ebda0
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/messages/MImageBody.js
View file

@ -50,6 +50,7 @@ export default class extends React.Component {
this.onAction = this.onAction.bind(this);
this.onImageError = this.onImageError.bind(this);
this.onImageLoad = this.onImageLoad.bind(this);
this.onImageEnter = this.onImageEnter.bind(this);
this.onImageLeave = this.onImageLeave.bind(this);
this.onClientSync = this.onClientSync.bind(this);
@ -137,6 +138,11 @@ export default class extends React.Component {
});
}
onImageLoad() {
this.fixupHeight();
this.props.onWidgetLoad();
}
_getContentUrl() {
const content = this.props.mxEvent.getContent();
if (content.file !== undefined) {
@ -170,7 +176,6 @@ export default class extends React.Component {
componentDidMount() {
this.dispatcherRef = dis.register(this.onAction);
this.fixupHeight();
const content = this.props.mxEvent.getContent();
if (content.file !== undefined && this.state.decryptedUrl === null) {
let thumbnailPromise = Promise.resolve(null);
@ -192,7 +197,6 @@ export default class extends React.Component {
decryptedThumbnailUrl: thumbnailUrl,
decryptedBlob: decryptedBlob,
});
this.props.onWidgetLoad();
});
}).catch((err) => {
console.warn("Unable to decrypt attachment: ", err);
@ -244,7 +248,7 @@ export default class extends React.Component {
// FIXME: It will also break really badly for images with broken or missing thumbnails
//console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
// console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
let thumbHeight = null;
if (content.info) {
thumbHeight = ImageUtils.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
@ -259,7 +263,7 @@ export default class extends React.Component {
<img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
alt={content.body}
onError={this.onImageError}
onLoad={this.props.onWidgetLoad}
onLoad={this.onImageLoad}
onMouseEnter={this.onImageEnter}
onMouseLeave={this.onImageLeave} />
</a>