From bd26d422fb818e576bfd290a6d4a08986b290221 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Sat, 1 Sep 2018 21:49:12 -0400
Subject: [PATCH] fix: inconsistent thumbnail size on the publish page

---
 .../component/selectThumbnail/view.jsx        | 36 ++++++++++++-------
 src/renderer/scss/_gui.scss                   |  1 -
 src/renderer/scss/_vars.scss                  |  2 --
 src/renderer/scss/component/_content.scss     |  2 +-
 yarn.lock                                     |  4 +--
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/renderer/component/selectThumbnail/view.jsx b/src/renderer/component/selectThumbnail/view.jsx
index a3dd3b208..a64d77a0e 100644
--- a/src/renderer/component/selectThumbnail/view.jsx
+++ b/src/renderer/component/selectThumbnail/view.jsx
@@ -55,22 +55,34 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
     const thumbnailSrc =
       !thumbnail || thumbnailError ? Native.imagePath(thumbnailErrorImage) : thumbnail;
 
+    /*
+      Note:
+      We are using backgroundImage instead of an <img /> to zoom if the selected thumbnail isn't
+      the proper aspect ratio. This is to avoid blackbars on the side of images and inconsistent thumbnails
+      We still need to render the image to see if there is an error loading the url
+    */
+
     return (
       <div className="card__content">
         {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
           <div className="column">
-            <img
-              src={thumbnailSrc}
-              className="column__item thumbnail-preview"
-              alt={__('Thumbnail Preview')}
-              onError={() => {
-                this.setState({
-                  thumbnailError: true,
-                  thumbnailErrorImage:
-                    thumbnail && thumbnail.length > 0 ? 'broken.png' : 'no-thumbnail.png',
-                });
-              }}
-            />
+            <div
+              className="column__item thumbnail-preview card__media"
+              style={{ backgroundImage: `url(${thumbnailSrc})` }}
+            >
+              <img
+                style={{ display: 'none' }}
+                src={thumbnailSrc}
+                alt={__('Thumbnail Preview')}
+                onError={() => {
+                  this.setState({
+                    thumbnailError: true,
+                    thumbnailErrorImage:
+                      thumbnail && thumbnail.length > 0 ? 'broken.png' : 'no-thumbnail.png',
+                  });
+                }}
+              />
+            </div>
             <div className="column__item">
               <FormField
                 className="input--thumbnail"
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 74e51a715..764b665ef 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -389,5 +389,4 @@ p {
 .thumbnail-preview {
   height: var(--thumbnail-preview-height);
   width: var(--thumbnail-preview-width);
-  border: var(--thumbnail-preview-border);
 }
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 199809230..152b64dc0 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -195,6 +195,4 @@ $large-breakpoint: 1921px;
   /* Image */
   --thumbnail-preview-height: 100px;
   --thumbnail-preview-width: 177px;
-  // This will awlways white, it looks fine on light mode
-  --thumbnail-preview-border: 1px solid var(--color-white);
 }
diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss
index d2daf88d8..7c56b1274 100644
--- a/src/renderer/scss/component/_content.scss
+++ b/src/renderer/scss/component/_content.scss
@@ -32,7 +32,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-size: cover;
+  background-size: contain;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   display: flex;
diff --git a/yarn.lock b/yarn.lock
index db1f53c7d..3f4b29949 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5655,9 +5655,9 @@ lazy-val@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
 
-lbry-redux@lbryio/lbry-redux#eae0d134d92d83f733b85a8ecebf529a6e9799cf:
+lbry-redux@lbryio/lbry-redux#421321a78397251589e5a890f4caa95e79975e2b:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/eae0d134d92d83f733b85a8ecebf529a6e9799cf"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/421321a78397251589e5a890f4caa95e79975e2b"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"