diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js index 7320978f71..ec5b411853 100644 --- a/src/components/backdrop/backdrop.js +++ b/src/components/backdrop/backdrop.js @@ -182,6 +182,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', "userSettings" return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, { type: "Backdrop", tag: imgTag, + maxWidth: dom.getScreenWidth(), index: index })); }); @@ -192,6 +193,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', "userSettings" return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, { type: "Backdrop", tag: imgTag, + maxWidth: dom.getScreenWidth(), index: index })); }); diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 3e54f91ee8..c20f6999f9 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -233,9 +233,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 +463,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Thumb", + maxWidth: width, tag: item.ImageTags.Thumb }); @@ -470,6 +471,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Banner", + maxWidth: width, tag: item.ImageTags.Banner }); @@ -477,6 +479,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Disc", + maxWidth: width, tag: item.ImageTags.Disc }); @@ -484,6 +487,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Logo", + maxWidth: width, tag: item.ImageTags.Logo }); @@ -491,6 +495,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, { type: "Logo", + maxWidth: width, tag: item.ParentLogoImageTag }); @@ -498,6 +503,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.SeriesId, { type: "Thumb", + maxWidth: width, tag: item.SeriesThumbImageTag }); @@ -505,6 +511,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, { type: "Thumb", + maxWidth: width, tag: item.ParentThumbImageTag }); @@ -512,6 +519,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Backdrop", + maxWidth: width, tag: item.BackdropImageTags[0] }); @@ -521,6 +529,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, { type: "Backdrop", + maxWidth: width, tag: item.ParentBackdropImageTags[0] }); @@ -530,6 +539,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Primary", + maxHeight: height, + maxWidth: width, tag: item.ImageTags.Primary }); @@ -550,6 +561,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,12 +580,14 @@ 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) { @@ -581,6 +596,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.AlbumId, { type: "Primary", + maxHeight: height, + maxWidth: width, tag: item.AlbumPrimaryImageTag }); @@ -594,6 +611,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Thumb", + maxWidth: width, tag: item.ImageTags.Thumb }); @@ -601,6 +619,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Backdrop", + maxWidth: width, tag: item.BackdropImageTags[0] }); @@ -608,6 +627,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Thumb", + maxWidth: width, tag: item.ImageTags.Thumb }); @@ -615,6 +635,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.SeriesId, { type: "Thumb", + maxWidth: width, tag: item.SeriesThumbImageTag }); @@ -622,6 +643,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, { type: "Thumb", + maxWidth: width, tag: item.ParentThumbImageTag }); @@ -629,6 +651,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, { type: "Backdrop", + maxWidth: width, tag: item.ParentBackdropImageTags[0] }); diff --git a/src/components/dom.js b/src/components/dom.js index 072ff5c77c..a000373b6d 100644 --- a/src/components/dom.js +++ b/src/components/dom.js @@ -112,6 +112,24 @@ define([], function () { return windowSize; } + var standardWidths = [480, 720, 1280, 1440, 1920, 2560, 3840, 5120, 7680]; + function getScreenWidth() { + var width = window.innerWidth * window.devicePixelRatio; + var height = window.innerHeight * window.devicePixelRatio; + + if (height > width) { + /* If we're in portrait, compute the proper width for this height, + taking 16:9 as the most common ratio */ + width = height * 1.78; + } + + var closest = standardWidths.sort(function (a, b) { + return Math.abs(width - a) - Math.abs(width - b); + })[0]; + + return closest; + } + var _animationEvent; function whichAnimationEvent() { @@ -175,6 +193,7 @@ define([], function () { addEventListener: addEventListenerWithOptions, removeEventListener: removeEventListenerWithOptions, getWindowSize: getWindowSize, + getScreenWidth: getScreenWidth, whichTransitionEvent: whichTransitionEvent, whichAnimationEvent: whichAnimationEvent, whichAnimationCancelEvent: whichAnimationCancelEvent diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js index b38d601e3b..d054d8172c 100644 --- a/src/components/listview/listview.js +++ b/src/components/listview/listview.js @@ -72,7 +72,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan var apiClient = connectionManager.getApiClient(item.ServerId); var options = { - width: width, + maxWidth: width, type: "Primary" }; diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index e18311048c..8e03947783 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -469,6 +469,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) { imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Thumb", + maxWidth: dom.getScreenWidth(), index: 0, tag: item.ImageTags.Thumb }); @@ -478,6 +479,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) { imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Primary", + maxWidth: dom.getScreenWidth(), index: 0, tag: item.ImageTags.Primary }); @@ -487,6 +489,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } else if (item.BackdropImageTags && item.BackdropImageTags.length) { imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Backdrop", + maxWidth: dom.getScreenWidth(), index: 0, tag: item.BackdropImageTags[0] }); @@ -496,6 +499,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) { imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, { type: "Backdrop", + maxWidth: dom.getScreenWidth(), index: 0, tag: item.ParentBackdropImageTags[0] }); @@ -505,6 +509,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti } else if (item.ImageTags && item.ImageTags.Thumb) { imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Thumb", + maxWidth: dom.getScreenWidth(), index: 0, tag: item.ImageTags.Thumb }); @@ -765,41 +770,48 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti if (imageTags.Primary) { url = apiClient.getScaledImageUrl(item.Id, { type: "Primary", + maxWidth: dom.getScreenWidth() * 0.5, tag: item.ImageTags.Primary }); detectRatio = true; } else if (item.BackdropImageTags && item.BackdropImageTags.length) { url = apiClient.getScaledImageUrl(item.Id, { type: "Backdrop", + maxWidth: dom.getScreenWidth() * 0.5, tag: item.BackdropImageTags[0] }); shape = "thumb"; } else if (imageTags.Thumb) { url = apiClient.getScaledImageUrl(item.Id, { type: "Thumb", + maxWidth: dom.getScreenWidth() * 0.5, tag: item.ImageTags.Thumb }); shape = "thumb"; } else if (imageTags.Disc) { url = apiClient.getScaledImageUrl(item.Id, { type: "Disc", + maxWidth: dom.getScreenWidth() * 0.5, tag: item.ImageTags.Disc }); shape = "square"; } else if (item.AlbumId && item.AlbumPrimaryImageTag) { url = apiClient.getScaledImageUrl(item.AlbumId, { type: "Primary", + maxWidth: dom.getScreenWidth() * 0.5, tag: item.AlbumPrimaryImageTag }); shape = "square"; } else if (item.SeriesId && item.SeriesPrimaryImageTag) { url = apiClient.getScaledImageUrl(item.SeriesId, { type: "Primary", + maxWidth: dom.getScreenWidth() * 0.5, tag: item.SeriesPrimaryImageTag }); } else if (item.ParentPrimaryImageItemId && item.ParentPrimaryImageTag) { url = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, { type: "Primary", + maxWidth: dom.getScreenWidth() * 0.5, tag: item.ParentPrimaryImageTag }); }