diff --git a/src/skins/vector/views/molecules/MImageTile.js b/src/skins/vector/views/molecules/MImageTile.js index 2f3b7a55db..febf389996 100644 --- a/src/skins/vector/views/molecules/MImageTile.js +++ b/src/skins/vector/views/molecules/MImageTile.js @@ -63,6 +63,34 @@ module.exports = React.createClass({ } }, + _isGif: function() { + var content = this.props.mxEvent.getContent(); + return (content && content.info && content.info.mimetype === "image/gif"); + }, + + onImageEnter: function(e) { + if (!this._isGif()) { + return; + } + var imgElement = e.target; + imgElement.src = MatrixClientPeg.get().mxcUrlToHttp( + this.props.mxEvent.getContent().url + ); + }, + + onImageLeave: function(e) { + if (!this._isGif()) { + return; + } + var imgElement = e.target; + imgElement.src = this._getThumbUrl(); + }, + + _getThumbUrl: function() { + var content = this.props.mxEvent.getContent(); + return MatrixClientPeg.get().mxcUrlToHttp(content.url, 480, 360); + }, + render: function() { var content = this.props.mxEvent.getContent(); var cli = MatrixClientPeg.get(); @@ -73,12 +101,15 @@ module.exports = React.createClass({ var imgStyle = {}; if (thumbHeight) imgStyle['height'] = thumbHeight; - var thumbUrl = cli.mxcUrlToHttp(content.url, 480, 360); + var thumbUrl = this._getThumbUrl(); if (thumbUrl) { return ( - {content.body} + {content.body}