Merge pull request #1930 from lbryio/thumbnail-fix

fix: inconsistent thumbnail size on the publish page

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"

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);
 }

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);
 }

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;

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"