Merge pull request #404 from vector-im/kegan/gif-on-enter
Add support for playing gifs on mouse enter/leave
This commit is contained in:
commit
9ec10e2b43
|
@ -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 (
|
||||
<span className="mx_MImageTile">
|
||||
<a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }>
|
||||
<img className="mx_MImageTile_thumbnail" src={thumbUrl} alt={content.body} style={imgStyle} />
|
||||
<img className="mx_MImageTile_thumbnail" src={thumbUrl}
|
||||
alt={content.body} style={imgStyle}
|
||||
onMouseEnter={this.onImageEnter}
|
||||
onMouseLeave={this.onImageLeave} />
|
||||
</a>
|
||||
<div className="mx_MImageTile_download">
|
||||
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
|
||||
|
|
Loading…
Reference in New Issue