Merge pull request #907 from MrTimscampi/artwork-optimal-size

Improve image loading speed and sizes

(cherry picked from commit bdfa8b0121)
Signed-off-by: Joshua M. Boniface <joshua@boniface.me>

src/components/cardbuilder/cardBuilder.js

@@ -2,7 +2,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
     function (datetime, imageLoader, connectionManager, itemHelper, focusManager, indicators, globalize, layoutManager, appHost, dom, browser, playbackManager, itemShortcuts, imageHelper) {
         'use strict';
 
-        var devicePixelRatio = window.devicePixelRatio || 1;
         var enableFocusTransform = !browser.slow && !browser.edge;
 
         function getCardsHtml(items, options) {
@@ -233,9 +232,9 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
         function getImageWidth(shape, screenWidth, isOrientationLandscape) {
             var imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape);
-            var shapeWidth = screenWidth / imagesPerRow;
+            var shapeWidth = Math.round(screenWidth / imagesPerRow) * 2;
 
-            return Math.round(shapeWidth);
+            return shapeWidth;
         }
 
         function setCardData(items, options) {
@@ -463,6 +462,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
+                    maxWidth: width,
                     tag: item.ImageTags.Thumb
                 });
 
@@ -470,6 +470,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Banner",
+                    maxWidth: width,
                     tag: item.ImageTags.Banner
                 });
 
@@ -477,6 +478,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Disc",
+                    maxWidth: width,
                     tag: item.ImageTags.Disc
                 });
 
@@ -484,6 +486,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Logo",
+                    maxWidth: width,
                     tag: item.ImageTags.Logo
                 });
 
@@ -491,6 +494,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
                     type: "Logo",
+                    maxWidth: width,
                     tag: item.ParentLogoImageTag
                 });
 
@@ -498,6 +502,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
                     type: "Thumb",
+                    maxWidth: width,
                     tag: item.SeriesThumbImageTag
                 });
 
@@ -505,6 +510,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
                     type: "Thumb",
+                    maxWidth: width,
                     tag: item.ParentThumbImageTag
                 });
 
@@ -512,6 +518,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Backdrop",
+                    maxWidth: width,
                     tag: item.BackdropImageTags[0]
                 });
 
@@ -521,6 +528,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
                     type: "Backdrop",
+                    maxWidth: width,
                     tag: item.ParentBackdropImageTags[0]
                 });
 
@@ -530,6 +538,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Primary",
+                    maxHeight: height,
+                    maxWidth: width,
                     tag: item.ImageTags.Primary
                 });
 
@@ -550,6 +560,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.PrimaryImageItemId || item.Id || item.ItemId, {
                     type: "Primary",
+                    maxHeight: height,
+                    maxWidth: width,
                     tag: item.PrimaryImageTag
                 });
 
@@ -567,20 +579,24 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
                     type: "Primary",
+                    maxWidth: width,
                     tag: item.ParentPrimaryImageTag
                 });
             } else if (item.SeriesPrimaryImageTag) {
 
                 imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
                     type: "Primary",
+                    maxWidth: width,
                     tag: item.SeriesPrimaryImageTag
                 });
             } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
 
-                width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
+                height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
 
                 imgUrl = apiClient.getScaledImageUrl(item.AlbumId, {
                     type: "Primary",
+                    maxHeight: height,
+                    maxWidth: width,
                     tag: item.AlbumPrimaryImageTag
                 });
 
@@ -594,6 +610,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
+                    maxWidth: width,
                     tag: item.ImageTags.Thumb
                 });
 
@@ -601,6 +618,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Backdrop",
+                    maxWidth: width,
                     tag: item.BackdropImageTags[0]
                 });
 
@@ -608,6 +626,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
+                    maxWidth: width,
                     tag: item.ImageTags.Thumb
                 });
 
@@ -615,6 +634,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
                     type: "Thumb",
+                    maxWidth: width,
                     tag: item.SeriesThumbImageTag
                 });
 
@@ -622,6 +642,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
                     type: "Thumb",
+                    maxWidth: width,
                     tag: item.ParentThumbImageTag
                 });
 
@@ -629,6 +650,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
                     type: "Backdrop",
+                    maxWidth: width,
                     tag: item.ParentBackdropImageTags[0]
                 });