image thumbnails now scale appropriately so there is no whitespace, also generalized some thumbnail loading code

3 files changed, 52 insertions, 1 deletions

diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 77ce19530..3509c9514 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -52,6 +52,8 @@ module.exports = {
   MAX_DISPLAY_FILES: 5,
   MAX_UPLOAD_FILES: 5,
   MAX_FILE_SIZE: 50000000, // 50 MB
+  THUMBNAIL_WIDTH: 128,
+  THUMBNAIL_HEIGHT: 100,
   DEFAULT_CHANNEL: 'town-square',
   OFFTOPIC_CHANNEL: 'off-topic',
   POST_CHUNK_SIZE: 60,
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index e51f7f3f4..942264fdb 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -913,3 +913,47 @@ module.exports.getFileName = function(path) {
     var split = path.split('/');
     return split[split.length - 1];
 };
+
+module.exports.loadThumbnails = function(filenames, self) {
+    if (filenames) {
+        var re1 = new RegExp(' ', 'g');
+        var re2 = new RegExp('\\(', 'g');
+        var re3 = new RegExp('\\)', 'g');
+        for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
+            var fileInfo = module.exports.splitFileLocation(filenames[i]);
+            if (Object.keys(fileInfo).length === 0) continue;
+
+            var type = module.exports.getFileType(fileInfo.ext);
+
+            // This is a temporary patch to fix issue with old files using absolute paths
+            if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
+                fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
+            }
+            fileInfo.path = module.exports.getWindowLocationOrigin() + "/api/v1/files/get" + fileInfo.path;
+
+            if (type === "image") {
+                $('<img/>').attr('src', fileInfo.path+'_thumb.jpg').load(function(path, name){ return function() {
+                    $(this).remove();
+                    if (name in self.refs) {
+                        var imgDiv = self.refs[name].getDOMNode();
+                        $(imgDiv).removeClass('post__load');
+                        $(imgDiv).addClass('post__image');
+
+                        var width = this.width || $(this).width();
+                        var height = this.height || $(this).height();
+
+                        if (width < Constants.THUMBNAIL_WIDTH
+                                && height < Constants.THUMBNAIL_HEIGHT) {
+                            $(imgDiv).addClass('small');
+                        } else {
+                            $(imgDiv).addClass('normal');
+                        }
+
+                        var url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
+                        $(imgDiv).css('background-image', 'url('+url+'_thumb.jpg)');
+                    }
+                }}(fileInfo.path, filenames[i]));
+            }
+        }
+    }
+}
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index ea7548267..ddc5e98bb 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -129,7 +129,12 @@
     height: 100%;
     background-color: #FFF;
     background-repeat: no-repeat;
-    background-position: top left;
+    &.small {
+        background-position: center;
+    }
+    &.normal {
+        background-position: top left;
+    }
   }
   .post-image__thumbnail {
     width: 50%;