apply portrait/landscape/quadrat format to playing gif to always display it in best possible way

2 files changed, 23 insertions, 4 deletions

diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
index a88731ca9..a6957b06b 100644
--- a/web/react/components/file_attachment.jsx
+++ b/web/react/components/file_attachment.jsx
@@ -15,7 +15,7 @@ export default class FileAttachment extends React.Component {
         this.addBackgroundImage = this.addBackgroundImage.bind(this);
 
         this.canSetState = false;
-        this.state = {fileSize: -1, mime: '', playing: false, loading: false};
+        this.state = {fileSize: -1, mime: '', playing: false, loading: false, format: ''};
     }
     componentDidMount() {
         this.loadFiles();
@@ -93,7 +93,21 @@ export default class FileAttachment extends React.Component {
         this.setState({loading: true});
         img.load(fileUrl);
         img.onload = () => {
-            this.setState({playing: true, loading: false});
+            var state = {playing: true, loading: false};
+
+            switch (true) {
+            case img.width > img.height:
+                state.format = 'landscape';
+                break;
+            case img.height > img.width:
+                state.format = 'portrait';
+                break;
+            default:
+                state.format = 'quadrat';
+                break;
+            }
+
+            this.setState(state);
 
             // keep displaying background image for a short moment while browser is
             // loading gif, to prevent white background flashing through
@@ -164,7 +178,7 @@ export default class FileAttachment extends React.Component {
         if (this.state.playing) {
             loadedFile = (
                 <img
-                    className='file__loaded'
+                    className={'file__loaded ' + this.state.format}
                     src={fileUrl}
                 />
             );
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index e4d658230..d3ab3b9f8 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -150,8 +150,13 @@
         margin-top: -16px;
     }
     .file__loaded {
-        height: 100px;
         max-width: initial;
+        &.landscape, &.quadrat {
+            height: 100px;
+        }
+        &.portrait {
+            width: 120px;
+        }
     }
     &:hover .file-playback-controls.stop {
         @include opacity(1);