From 06427d663d0b2669ccc77748fed701e46ec807b3 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 20 Nov 2015 16:36:58 +0000
Subject: [PATCH] Add support for playing gifs on mouse enter/leave

---
 .../vector/views/molecules/MImageTile.js      | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

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