Merge pull request #404 from vector-im/kegan/gif-on-enter

Add support for playing gifs on mouse enter/leave

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 (
                 <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">