Horizontally align images if image height > image width

2 files changed, 16 insertions, 3 deletions

diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
index 817834334..afd4e32fe 100644
--- a/web/react/components/file_attachment.jsx
+++ b/web/react/components/file_attachment.jsx
@@ -94,16 +94,28 @@ export default class FileAttachment extends React.Component {
 
         return true;
     }
-    playGif(e, fileUrl) {
+    playGif(e, filename) {
         var img = new Image();
+        var fileUrl = utils.getFileUrl(filename);
 
         this.setState({loading: true});
         img.load(fileUrl);
-        img.onload = () => this.setState({playing: true, loading: false});
+        img.onload = () => {
+            this.setState({playing: true, loading: false});
+
+            // keep displaying background image for a short moment while browser is
+            // loading gif, to prevent white background flashing through
+            setTimeout(() => this.removeBackgroundImage.bind(this)(filename), 100);
+        };
         img.onError = () => this.setState({loading: false});
 
         e.stopPropagation();
     }
+    removeBackgroundImage(name) {
+        if (name in this.refs) {
+            $(ReactDOM.findDOMNode(this.refs[name])).css('background-image', 'initial');
+        }
+    }
     render() {
         var filename = this.props.filename;
 
@@ -118,7 +130,7 @@ export default class FileAttachment extends React.Component {
             playButton = (
                 <div
                     className='file-play-button'
-                    onClick={(e) => this.playGif(e, fileUrl)}
+                    onClick={(e) => this.playGif(e, filename)}
                 >
                     {"►"}
                 </div>
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index 1d7754445..cb9ff6862 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -135,6 +135,7 @@
     background-repeat: no-repeat;
     overflow: hidden;
     position: relative;
+    text-align: center;
     &.small {
       background-position: center;
     }