Merge pull request #545 from ferferga/artworks2

Improved appearance of images and artworks - Part 3

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

src/components/cardbuilder/card.css

@@ -156,7 +156,7 @@ button {
 }
 
 .cardImageContainer {
-    background-size: contain;
+    background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     display: -webkit-flex;

src/controllers/dashboardpage.js

@@ -507,7 +507,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (session.UserId && session.UserPrimaryImageTag) {
                 return ApiClient.getUserImageUrl(session.UserId, {
                     tag: session.UserPrimaryImageTag,
-                    height: 24,
                     type: "Primary"
                 });
             }
@@ -602,7 +601,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (item && item.BackdropImageTags && item.BackdropImageTags.length) {
                 return ApiClient.getScaledImageUrl(item.Id, {
                     type: "Backdrop",
-                    width: 275,
                     tag: item.BackdropImageTags[0]
                 });
             }
@@ -610,7 +608,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (item && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
                 return ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
                     type: "Backdrop",
-                    width: 275,
                     tag: item.ParentBackdropImageTags[0]
                 });
             }
@@ -618,7 +615,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (item && item.BackdropImageTag) {
                 return ApiClient.getScaledImageUrl(item.BackdropItemId, {
                     type: "Backdrop",
-                    width: 275,
                     tag: item.BackdropImageTag
                 });
             }
@@ -628,7 +624,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (item && imageTags.Thumb) {
                 return ApiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
-                    width: 275,
                     tag: imageTags.Thumb
                 });
             }
@@ -636,7 +631,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (item && item.ParentThumbImageTag) {
                 return ApiClient.getScaledImageUrl(item.ParentThumbItemId, {
                     type: "Thumb",
-                    width: 275,
                     tag: item.ParentThumbImageTag
                 });
             }
@@ -644,7 +638,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (item && item.ThumbImageTag) {
                 return ApiClient.getScaledImageUrl(item.ThumbItemId, {
                     type: "Thumb",
-                    width: 275,
                     tag: item.ThumbImageTag
                 });
             }
@@ -652,7 +645,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (item && imageTags.Primary) {
                 return ApiClient.getScaledImageUrl(item.Id, {
                     type: "Primary",
-                    width: 275,
                     tag: imageTags.Primary
                 });
             }
@@ -660,7 +652,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (item && item.PrimaryImageTag) {
                 return ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
                     type: "Primary",
-                    width: 275,
                     tag: item.PrimaryImageTag
                 });
             }
@@ -668,7 +659,6 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (item && item.AlbumPrimaryImageTag) {
                 return ApiClient.getScaledImageUrl(item.AlbumId, {
                     type: "Primary",
-                    width: 275,
                     tag: item.AlbumPrimaryImageTag
                 });
             }

src/controllers/itemdetailpage.js

@@ -256,36 +256,66 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
     }
 
     function renderDetailPageBackdrop(page, item, apiClient) {
-        var imgUrl, screenWidth = screen.availWidth,
+        var imgUrl;
-            hasbackdrop = !1,
+        var screenWidth = screen.availWidth;
-            itemBackdropElement = page.querySelector("#itemBackdrop"),
+        var hasbackdrop = false;
-            usePrimaryImage = ("Video" === item.MediaType && "Movie" !== item.Type && "Trailer" !== item.Type) || (item.MediaType && "Video" !== item.MediaType) || ("MusicAlbum" === item.Type) || ("MusicArtist" === item.Type);
+        var itemBackdropElement = page.querySelector("#itemBackdrop");
-        return "Program" === item.Type && item.ImageTags && item.ImageTags.Thumb ? (imgUrl = apiClient.getScaledImageUrl(item.Id, {
+        var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" ||
+            item.MediaType && item.MediaType !== "Video" ||
+            item.Type === "MusicAlbum" ||
+            item.Type === "MusicArtist";
+
+        if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) {
+            imgUrl = apiClient.getScaledImageUrl(item.Id, {
                 type: "Thumb",
                 index: 0,
-            maxWidth: screenWidth,
                 tag: item.ImageTags.Thumb
-        }), itemBackdropElement.classList.remove("noBackdrop"), imageLoader.lazyImage(itemBackdropElement, imgUrl, !1), hasbackdrop = !0) : usePrimaryImage && item.ImageTags && item.ImageTags.Primary ? (imgUrl = apiClient.getScaledImageUrl(item.Id, {
+            });
+            itemBackdropElement.classList.remove("noBackdrop");
+            imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
+            hasbackdrop = true;
+        } else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) {
+            imgUrl = apiClient.getScaledImageUrl(item.Id, {
                 type: "Primary",
                 index: 0,
-            maxWidth: screenWidth,
                 tag: item.ImageTags.Primary
-        }), itemBackdropElement.classList.remove("noBackdrop"), imageLoader.lazyImage(itemBackdropElement, imgUrl, !1), hasbackdrop = !0) : item.BackdropImageTags && item.BackdropImageTags.length ? (imgUrl = apiClient.getScaledImageUrl(item.Id, {
+            });
+            itemBackdropElement.classList.remove("noBackdrop");
+            imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
+            hasbackdrop = true;
+        } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
+            imgUrl = apiClient.getScaledImageUrl(item.Id, {
                 type: "Backdrop",
                 index: 0,
-            maxWidth: screenWidth,
                 tag: item.BackdropImageTags[0]
-        }), itemBackdropElement.classList.remove("noBackdrop"), imageLoader.lazyImage(itemBackdropElement, imgUrl, !1), hasbackdrop = !0) : item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length ? (imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
+            });
+            itemBackdropElement.classList.remove("noBackdrop");
+            imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
+            hasbackdrop = true;
+        } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
+            imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
                 type: "Backdrop",
                 index: 0,
-            tag: item.ParentBackdropImageTags[0],
+                tag: item.ParentBackdropImageTags[0]
-            maxWidth: screenWidth
+            });
-        }), itemBackdropElement.classList.remove("noBackdrop"), imageLoader.lazyImage(itemBackdropElement, imgUrl, !1), hasbackdrop = !0) : item.ImageTags && item.ImageTags.Thumb ? (imgUrl = apiClient.getScaledImageUrl(item.Id, {
+            itemBackdropElement.classList.remove("noBackdrop");
+            imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
+            hasbackdrop = true;
+        } else if (item.ImageTags && item.ImageTags.Thumb) {
+            imgUrl = apiClient.getScaledImageUrl(item.Id, {
                 type: "Thumb",
                 index: 0,
-            maxWidth: screenWidth,
                 tag: item.ImageTags.Thumb
-        }), itemBackdropElement.classList.remove("noBackdrop"), imageLoader.lazyImage(itemBackdropElement, imgUrl, !1), hasbackdrop = !0) : (itemBackdropElement.classList.add("noBackdrop"), itemBackdropElement.style.backgroundImage = ""), hasbackdrop
+            });
+            itemBackdropElement.classList.remove("noBackdrop");
+            imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
+            hasbackdrop = true;
+        } else {
+            itemBackdropElement.classList.add("noBackdrop");
+            itemBackdropElement.style.backgroundImage = "";
+        }
+
+        return hasbackdrop;
     }
 
     function reloadFromItem(instance, page, params, item, user) {

src/scripts/librarymenu.js

@@ -25,11 +25,6 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
         if (user && user.name) {
             if (user.imageUrl) {
                 var url = user.imageUrl;
-
-                if (user.supportsImageParams) {
-                    url += "&height=" + Math.round(26 * Math.max(window.devicePixelRatio || 1, 2));
-                }
-
                 updateHeaderUserButton(url);
                 hasImage = true;
             }