diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index 9a740859175..572211e6023 100644 --- a/src/components/cardbuilder/card.css +++ b/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; diff --git a/src/controllers/dashboardpage.js b/src/controllers/dashboardpage.js index 24b3cda5c13..8890056f678 100644 --- a/src/controllers/dashboardpage.js +++ b/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 }); } diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index cd701a481ae..f98bc06231c 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -256,36 +256,66 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild } function renderDetailPageBackdrop(page, item, apiClient) { - var imgUrl, screenWidth = screen.availWidth, - hasbackdrop = !1, - itemBackdropElement = page.querySelector("#itemBackdrop"), - usePrimaryImage = ("Video" === item.MediaType && "Movie" !== item.Type && "Trailer" !== item.Type) || (item.MediaType && "Video" !== item.MediaType) || ("MusicAlbum" === item.Type) || ("MusicArtist" === item.Type); - return "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, { - 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, { - 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, { - type: "Backdrop", - index: 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, { - 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 + var imgUrl; + var screenWidth = screen.availWidth; + var hasbackdrop = false; + var itemBackdropElement = page.querySelector("#itemBackdrop"); + 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, + tag: item.ImageTags.Thumb + }); + 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, + tag: item.ImageTags.Primary + }); + 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, + tag: item.BackdropImageTags[0] + }); + 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] + }); + 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, + tag: item.ImageTags.Thumb + }); + 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) { diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js index 9c303d3bdea..5be43732aba 100644 --- a/src/scripts/librarymenu.js +++ b/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; }