From f816f5267f3cd733c5649ff906e52d787f07c7a5 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Sun, 8 Mar 2020 19:08:07 +0100
Subject: [PATCH 01/10] Improve image loading speed and sizes

---
 src/components/backdrop/backdrop.js       |  2 ++
 src/components/cardbuilder/cardBuilder.js | 27 +++++++++++++++++++++--
 src/components/dom.js                     | 19 ++++++++++++++++
 src/components/listview/listview.js       |  2 +-
 src/controllers/itemdetailpage.js         | 12 ++++++++++
 5 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js
index 7320978f7..ec5b41185 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 3e54f91ee..c20f6999f 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 072ff5c77..a000373b6 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 b38d601e3..d054d8172 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 e18311048..8e0394778 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
             });
         }

From 457d37450e8709037ac845e2f29a0c0fbba57200 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Sun, 8 Mar 2020 22:20:16 +0100
Subject: [PATCH 02/10] Further improvements to max size of image requests

---
 src/components/listview/listview.js | 1 -
 src/controllers/auth/login.js       | 2 +-
 src/controllers/itemdetailpage.js   | 1 -
 src/controllers/userprofilespage.js | 2 +-
 4 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index d054d8172..f0f5440aa 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -105,7 +105,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
         var apiClient = connectionManager.getApiClient(item.ServerId);
 
         var options = {
-            width: width,
             type: "Primary"
         };
 
diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js
index 4296b8bfb..a97f2e849 100644
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@@ -106,7 +106,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
             if (user.PrimaryImageTag) {
                 imgUrl = apiClient.getUserImageUrl(user.Id, {
-                    width: 300,
+                    width: 300 * window.devicePixelRatio,
                     tag: user.PrimaryImageTag,
                     type: "Primary"
                 });
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 8e0394778..a1be8162b 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -1871,7 +1871,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
                 itemsContainer: castContent,
                 coverImage: true,
                 serverId: item.ServerId,
-                width: 160,
                 shape: "overflowPortrait"
             });
         });
diff --git a/src/controllers/userprofilespage.js b/src/controllers/userprofilespage.js
index 2a2387ab6..3e41c0485 100644
--- a/src/controllers/userprofilespage.js
+++ b/src/controllers/userprofilespage.js
@@ -88,7 +88,7 @@ define(["loading", "dom", "globalize", "humanedate", "paper-icon-button-light",
 
         if (user.PrimaryImageTag) {
             imgUrl = ApiClient.getUserImageUrl(user.Id, {
-                width: 300,
+                width: 300 * window.devicePixelRatio,
                 tag: user.PrimaryImageTag,
                 type: "Primary"
             });

From f24c90841210a384f90fbaf36b290fc67ff4ff37 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Mon, 9 Mar 2020 20:46:56 +0100
Subject: [PATCH 03/10] Another pass of image sizes improvements

---
 src/controllers/dashboard/dashboard.js | 17 +++++++++++++----
 src/controllers/itemdetailpage.js      |  1 -
 src/controllers/medialibrarypage.js    |  1 +
 src/controllers/playback/videoosd.js   |  6 ++++++
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 2530d7a9a..a5ba9f60f 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -493,15 +493,15 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (nowPlayingItem.ImageTags && nowPlayingItem.ImageTags.Logo) {
                 imgUrl = ApiClient.getScaledImageUrl(nowPlayingItem.Id, {
                     tag: nowPlayingItem.ImageTags.Logo,
-                    maxHeight: 24,
-                    maxWidth: 130,
+                    maxHeight: 24 * window.devicePixelRatio,
+                    maxWidth: 130 * window.devicePixelRatio,
                     type: "Logo"
                 });
             } else if (nowPlayingItem.ParentLogoImageTag) {
                 imgUrl = ApiClient.getScaledImageUrl(nowPlayingItem.ParentLogoItemId, {
                     tag: nowPlayingItem.ParentLogoImageTag,
-                    maxHeight: 24,
-                    maxWidth: 130,
+                    maxHeight: 24 * window.devicePixelRatio,
+                    maxWidth: 130 * window.devicePixelRatio,
                     type: "Logo"
                 });
             }
@@ -636,6 +636,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
         getNowPlayingImageUrl: function (item) {
             if (item && item.BackdropImageTags && item.BackdropImageTags.length) {
                 return ApiClient.getScaledImageUrl(item.Id, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Backdrop",
                     tag: item.BackdropImageTags[0]
                 });
@@ -643,6 +644,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
                 return ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Backdrop",
                     tag: item.ParentBackdropImageTags[0]
                 });
@@ -650,6 +652,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.BackdropImageTag) {
                 return ApiClient.getScaledImageUrl(item.BackdropItemId, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Backdrop",
                     tag: item.BackdropImageTag
                 });
@@ -659,6 +662,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && imageTags.Thumb) {
                 return ApiClient.getScaledImageUrl(item.Id, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Thumb",
                     tag: imageTags.Thumb
                 });
@@ -666,6 +670,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.ParentThumbImageTag) {
                 return ApiClient.getScaledImageUrl(item.ParentThumbItemId, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Thumb",
                     tag: item.ParentThumbImageTag
                 });
@@ -673,6 +678,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.ThumbImageTag) {
                 return ApiClient.getScaledImageUrl(item.ThumbItemId, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Thumb",
                     tag: item.ThumbImageTag
                 });
@@ -680,6 +686,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && imageTags.Primary) {
                 return ApiClient.getScaledImageUrl(item.Id, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Primary",
                     tag: imageTags.Primary
                 });
@@ -687,6 +694,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.PrimaryImageTag) {
                 return ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Primary",
                     tag: item.PrimaryImageTag
                 });
@@ -694,6 +702,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.AlbumPrimaryImageTag) {
                 return ApiClient.getScaledImageUrl(item.AlbumId, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Primary",
                     tag: item.AlbumPrimaryImageTag
                 });
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index a1be8162b..48f697325 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -1818,7 +1818,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
             require(["chaptercardbuilder"], function (chaptercardbuilder) {
                 chaptercardbuilder.buildChapterCards(item, chapters, {
                     itemsContainer: scenesContent,
-                    width: 400,
                     backdropShape: "overflowBackdrop",
                     squareShape: "overflowSquare"
                 });
diff --git a/src/controllers/medialibrarypage.js b/src/controllers/medialibrarypage.js
index 03c84f2ca..f35d7c69a 100644
--- a/src/controllers/medialibrarypage.js
+++ b/src/controllers/medialibrarypage.js
@@ -256,6 +256,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
 
         if (virtualFolder.PrimaryImageItemId) {
             imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, {
+                maxWidth: dom.getScreenWidth() * 0.40,
                 type: "Primary"
             });
         }
diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js
index 24d779f24..b01ab26a2 100644
--- a/src/controllers/playback/videoosd.js
+++ b/src/controllers/playback/videoosd.js
@@ -334,18 +334,24 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
 
             if (item) {
                 var imgUrl = seriesImageUrl(item, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Primary"
                 }) || seriesImageUrl(item, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Thumb"
                 }) || imageUrl(item, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Primary"
                 });
 
                 if (!imgUrl && secondaryItem && (imgUrl = seriesImageUrl(secondaryItem, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Primary"
                 }) || seriesImageUrl(secondaryItem, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Thumb"
                 }) || imageUrl(secondaryItem, {
+                    maxWidth: dom.getScreenWidth() * 0.20,
                     type: "Primary"
                 })), imgUrl) {
                     return void (osdPoster.innerHTML = '<img src="' + imgUrl + '" />');

From 039728359914d18765a78f22b2aaf73fc9a1aebf Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Mon, 9 Mar 2020 21:02:08 +0100
Subject: [PATCH 04/10] Round every image size adjustment

---
 src/controllers/dashboard/dashboard.js | 18 +++++++++---------
 src/controllers/itemdetailpage.js      | 14 +++++++-------
 src/controllers/medialibrarypage.js    |  2 +-
 src/controllers/playback/videoosd.js   | 12 ++++++------
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index a5ba9f60f..51e8c2e19 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -636,7 +636,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
         getNowPlayingImageUrl: function (item) {
             if (item && item.BackdropImageTags && item.BackdropImageTags.length) {
                 return ApiClient.getScaledImageUrl(item.Id, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Backdrop",
                     tag: item.BackdropImageTags[0]
                 });
@@ -644,7 +644,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
                 return ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Backdrop",
                     tag: item.ParentBackdropImageTags[0]
                 });
@@ -652,7 +652,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.BackdropImageTag) {
                 return ApiClient.getScaledImageUrl(item.BackdropItemId, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Backdrop",
                     tag: item.BackdropImageTag
                 });
@@ -662,7 +662,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && imageTags.Thumb) {
                 return ApiClient.getScaledImageUrl(item.Id, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Thumb",
                     tag: imageTags.Thumb
                 });
@@ -670,7 +670,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.ParentThumbImageTag) {
                 return ApiClient.getScaledImageUrl(item.ParentThumbItemId, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Thumb",
                     tag: item.ParentThumbImageTag
                 });
@@ -678,7 +678,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.ThumbImageTag) {
                 return ApiClient.getScaledImageUrl(item.ThumbItemId, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Thumb",
                     tag: item.ThumbImageTag
                 });
@@ -686,7 +686,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && imageTags.Primary) {
                 return ApiClient.getScaledImageUrl(item.Id, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Primary",
                     tag: imageTags.Primary
                 });
@@ -694,7 +694,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.PrimaryImageTag) {
                 return ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Primary",
                     tag: item.PrimaryImageTag
                 });
@@ -702,7 +702,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.AlbumPrimaryImageTag) {
                 return ApiClient.getScaledImageUrl(item.AlbumId, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Primary",
                     tag: item.AlbumPrimaryImageTag
                 });
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 48f697325..5b1f5d9e1 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -770,48 +770,48 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
         if (imageTags.Primary) {
             url = apiClient.getScaledImageUrl(item.Id, {
                 type: "Primary",
-                maxWidth: dom.getScreenWidth() * 0.5,
+                maxWidth: Math.round(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,
+                maxWidth: Math.round(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,
+                maxWidth: Math.round(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,
+                maxWidth: Math.round(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,
+                maxWidth: Math.round(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,
+                maxWidth: Math.round(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,
+                maxWidth: Math.round(dom.getScreenWidth() * 0.5),
                 tag: item.ParentPrimaryImageTag
             });
         }
diff --git a/src/controllers/medialibrarypage.js b/src/controllers/medialibrarypage.js
index f35d7c69a..d838c2145 100644
--- a/src/controllers/medialibrarypage.js
+++ b/src/controllers/medialibrarypage.js
@@ -256,7 +256,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
 
         if (virtualFolder.PrimaryImageItemId) {
             imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, {
-                maxWidth: dom.getScreenWidth() * 0.40,
+                maxWidth: Math.round(dom.getScreenWidth() * 0.40),
                 type: "Primary"
             });
         }
diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js
index b01ab26a2..bf605976c 100644
--- a/src/controllers/playback/videoosd.js
+++ b/src/controllers/playback/videoosd.js
@@ -334,24 +334,24 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
 
             if (item) {
                 var imgUrl = seriesImageUrl(item, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Primary"
                 }) || seriesImageUrl(item, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Thumb"
                 }) || imageUrl(item, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Primary"
                 });
 
                 if (!imgUrl && secondaryItem && (imgUrl = seriesImageUrl(secondaryItem, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Primary"
                 }) || seriesImageUrl(secondaryItem, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Thumb"
                 }) || imageUrl(secondaryItem, {
-                    maxWidth: dom.getScreenWidth() * 0.20,
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Primary"
                 })), imgUrl) {
                     return void (osdPoster.innerHTML = '<img src="' + imgUrl + '" />');

From 8646b66f6ccbd6b1cba823e4ba1fbbb6491bf033 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Wed, 11 Mar 2020 21:31:04 +0100
Subject: [PATCH 05/10] Improve image size handling

---
 src/components/cardbuilder/cardBuilder.js        |  3 +--
 src/components/cardbuilder/chaptercardbuilder.js |  2 +-
 src/components/dom.js                            |  4 ++--
 src/controllers/auth/login.js                    |  2 +-
 src/controllers/dashboard/dashboard.js           |  8 ++++----
 src/controllers/playback/videoosd.js             | 12 ++++++------
 src/controllers/userprofilespage.js              |  2 +-
 src/libraries/apiclient/apiclient.js             |  4 ++--
 src/libraries/apiclient/apiclientcore.js         |  5 ++---
 src/libraries/apiclient/connectionmanager.js     |  4 ++--
 src/scripts/site.js                              |  4 ++--
 11 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index c20f6999f..6cdbf5514 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/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) {
@@ -592,7 +591,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 });
             } 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",
diff --git a/src/components/cardbuilder/chaptercardbuilder.js b/src/components/cardbuilder/chaptercardbuilder.js
index 02d583abc..16326b6c5 100644
--- a/src/components/cardbuilder/chaptercardbuilder.js
+++ b/src/components/cardbuilder/chaptercardbuilder.js
@@ -68,7 +68,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
 
             return apiClient.getScaledImageUrl(item.Id, {
 
-                maxWidth: maxWidth,
+                maxWidth: maxWidth * 2,
                 tag: chapter.ImageTag,
                 type: "Chapter",
                 index: index
diff --git a/src/components/dom.js b/src/components/dom.js
index a000373b6..bdd7d5d95 100644
--- a/src/components/dom.js
+++ b/src/components/dom.js
@@ -114,8 +114,8 @@ define([], function () {
 
     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;
+        var width = window.innerWidth;
+        var height = window.innerHeight;
 
         if (height > width) {
             /* If we're in portrait, compute the proper width for this height,
diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js
index a97f2e849..4296b8bfb 100644
--- a/src/controllers/auth/login.js
+++ b/src/controllers/auth/login.js
@@ -106,7 +106,7 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
 
             if (user.PrimaryImageTag) {
                 imgUrl = apiClient.getUserImageUrl(user.Id, {
-                    width: 300 * window.devicePixelRatio,
+                    width: 300,
                     tag: user.PrimaryImageTag,
                     type: "Primary"
                 });
diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 51e8c2e19..6a260d8df 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -493,15 +493,15 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             if (nowPlayingItem.ImageTags && nowPlayingItem.ImageTags.Logo) {
                 imgUrl = ApiClient.getScaledImageUrl(nowPlayingItem.Id, {
                     tag: nowPlayingItem.ImageTags.Logo,
-                    maxHeight: 24 * window.devicePixelRatio,
-                    maxWidth: 130 * window.devicePixelRatio,
+                    maxHeight: 24,
+                    maxWidth: 130,
                     type: "Logo"
                 });
             } else if (nowPlayingItem.ParentLogoImageTag) {
                 imgUrl = ApiClient.getScaledImageUrl(nowPlayingItem.ParentLogoItemId, {
                     tag: nowPlayingItem.ParentLogoImageTag,
-                    maxHeight: 24 * window.devicePixelRatio,
-                    maxWidth: 130 * window.devicePixelRatio,
+                    maxHeight: 24,
+                    maxWidth: 130,
                     type: "Logo"
                 });
             }
diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js
index bf605976c..24b654854 100644
--- a/src/controllers/playback/videoosd.js
+++ b/src/controllers/playback/videoosd.js
@@ -334,24 +334,24 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
 
             if (item) {
                 var imgUrl = seriesImageUrl(item, {
-                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Primary"
                 }) || seriesImageUrl(item, {
-                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Thumb"
                 }) || imageUrl(item, {
-                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Primary"
                 });
 
                 if (!imgUrl && secondaryItem && (imgUrl = seriesImageUrl(secondaryItem, {
-                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Primary"
                 }) || seriesImageUrl(secondaryItem, {
-                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Thumb"
                 }) || imageUrl(secondaryItem, {
-                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Primary"
                 })), imgUrl) {
                     return void (osdPoster.innerHTML = '<img src="' + imgUrl + '" />');
diff --git a/src/controllers/userprofilespage.js b/src/controllers/userprofilespage.js
index 3e41c0485..2a2387ab6 100644
--- a/src/controllers/userprofilespage.js
+++ b/src/controllers/userprofilespage.js
@@ -88,7 +88,7 @@ define(["loading", "dom", "globalize", "humanedate", "paper-icon-button-light",
 
         if (user.PrimaryImageTag) {
             imgUrl = ApiClient.getUserImageUrl(user.Id, {
-                width: 300 * window.devicePixelRatio,
+                width: 300,
                 tag: user.PrimaryImageTag,
                 type: "Primary"
             });
diff --git a/src/libraries/apiclient/apiclient.js b/src/libraries/apiclient/apiclient.js
index d848358c3..58cfa300b 100644
--- a/src/libraries/apiclient/apiclient.js
+++ b/src/libraries/apiclient/apiclient.js
@@ -59,8 +59,8 @@ define(["libraries/apiclient/apiclientcore", "localassetmanager"], function(ApiC
         })
     }
 
-    function ApiClientEx(serverAddress, clientName, applicationVersion, deviceName, deviceId, devicePixelRatio) {
-        ApiClient.call(this, serverAddress, clientName, applicationVersion, deviceName, deviceId, devicePixelRatio)
+    function ApiClientEx(serverAddress, clientName, applicationVersion, deviceName, deviceId) {
+        ApiClient.call(this, serverAddress, clientName, applicationVersion, deviceName, deviceId)
     }
     var localPrefix = "local:",
         localViewPrefix = "localview:";
diff --git a/src/libraries/apiclient/apiclientcore.js b/src/libraries/apiclient/apiclientcore.js
index ec1a329b1..557a4e103 100644
--- a/src/libraries/apiclient/apiclientcore.js
+++ b/src/libraries/apiclient/apiclientcore.js
@@ -58,7 +58,7 @@ define(["events", "appStorage"], function(events, appStorage) {
         return request.data && ("string" == typeof request.data ? fetchRequest.body = request.data : (fetchRequest.body = paramsToString(request.data), contentType = contentType || "application/x-www-form-urlencoded; charset=UTF-8")), contentType && (headers["Content-Type"] = contentType), request.timeout ? fetchWithTimeout(request.url, fetchRequest, request.timeout) : fetch(request.url, fetchRequest)
     }
 
-    function ApiClient(serverAddress, appName, appVersion, deviceName, deviceId, devicePixelRatio) {
+    function ApiClient(serverAddress, appName, appVersion, deviceName, deviceId) {
         if (!serverAddress) {
             throw new Error("Must supply a serverAddress");
         }
@@ -75,7 +75,6 @@ define(["events", "appStorage"], function(events, appStorage) {
         this._deviceName = deviceName;
         this._appName = appName;
         this._appVersion = appVersion;
-        this._devicePixelRatio = devicePixelRatio;
     }
 
     function setSavedEndpointInfo(instance, info) {
@@ -218,7 +217,7 @@ define(["events", "appStorage"], function(events, appStorage) {
     }
 
     function normalizeImageOptions(instance, options) {
-        var ratio = instance._devicePixelRatio || 1;
+        var ratio = window.devicePixelRatio;
         ratio && (options.minScale && (ratio = Math.max(options.minScale, ratio)), options.width && (options.width = Math.round(options.width * ratio)), options.height && (options.height = Math.round(options.height * ratio)), options.maxWidth && (options.maxWidth = Math.round(options.maxWidth * ratio)), options.maxHeight && (options.maxHeight = Math.round(options.maxHeight * ratio))), options.quality = options.quality || instance.getDefaultImageQuality(options.type), instance.normalizeImageOptions && instance.normalizeImageOptions(options)
     }
 
diff --git a/src/libraries/apiclient/connectionmanager.js b/src/libraries/apiclient/connectionmanager.js
index a8e389bd0..dc5ef406e 100644
--- a/src/libraries/apiclient/connectionmanager.js
+++ b/src/libraries/apiclient/connectionmanager.js
@@ -186,7 +186,7 @@ define(["events", "apiclient", "appStorage"], function (events, apiClientFactory
         Manual: 2
     };
 
-    var ConnectionManager = function (credentialProvider, appName, appVersion, deviceName, deviceId, capabilities, devicePixelRatio) {
+    var ConnectionManager = function (credentialProvider, appName, appVersion, deviceName, deviceId, capabilities) {
 
         function onAuthenticated(apiClient, result, options, saveCredentials) {
             var credentials = credentialProvider.credentials();
@@ -540,7 +540,7 @@ define(["events", "apiclient", "appStorage"], function (events, apiClientFactory
             var apiClient = self.getApiClient(server.Id);
 
             if (!apiClient) {
-                apiClient = new apiClientFactory(serverUrl, appName, appVersion, deviceName, deviceId, devicePixelRatio);
+                apiClient = new apiClientFactory(serverUrl, appName, appVersion, deviceName, deviceId);
                 self._apiClients.push(apiClient);
                 apiClient.serverInfo(server);
                 apiClient.onAuthenticated = function (instance, result) {
diff --git a/src/scripts/site.js b/src/scripts/site.js
index 7332ba7b8..5dae39a68 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -280,7 +280,7 @@ var AppInfo = {};
 
                 capabilities.DeviceProfile = deviceProfile;
 
-                var connectionManager = new ConnectionManager(credentialProviderInstance, apphost.appName(), apphost.appVersion(), apphost.deviceName(), apphost.deviceId(), capabilities, window.devicePixelRatio);
+                var connectionManager = new ConnectionManager(credentialProviderInstance, apphost.appName(), apphost.appVersion(), apphost.deviceName(), apphost.deviceId(), capabilities);
 
                 defineConnectionManager(connectionManager);
                 bindConnectionManagerEvents(connectionManager, events, userSettings);
@@ -291,7 +291,7 @@ var AppInfo = {};
                     return require(["apiclient"], function (apiClientFactory) {
                         console.debug("creating ApiClient singleton");
 
-                        var apiClient = new apiClientFactory(Dashboard.serverAddress(), apphost.appName(), apphost.appVersion(), apphost.deviceName(), apphost.deviceId(), window.devicePixelRatio);
+                        var apiClient = new apiClientFactory(Dashboard.serverAddress(), apphost.appName(), apphost.appVersion(), apphost.deviceName(), apphost.deviceId());
 
                         apiClient.enableAutomaticNetworking = false;
                         apiClient.manualAddressOnly = true;

From a2f337b8c382a3d4eb70c92b494e615cdd84aa04 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Thu, 12 Mar 2020 21:11:06 +0100
Subject: [PATCH 06/10] Add comments for hardcoded scaling values

---
 src/controllers/dashboard/dashboard.js | 2 ++
 src/controllers/itemdetailpage.js      | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 6a260d8df..1927abf17 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -634,6 +634,8 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             return "<img src='" + iconUrl + "' />";
         },
         getNowPlayingImageUrl: function (item) {
+            /* Screen width is multiplied by 0.2, as the there is now way to get the width of
+            elements that aren't crated yet. */
             if (item && item.BackdropImageTags && item.BackdropImageTags.length) {
                 return ApiClient.getScaledImageUrl(item.Id, {
                     maxWidth: Math.round(dom.getScreenWidth() * 0.20),
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 5b1f5d9e1..994983763 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -767,6 +767,9 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
         var shape = "portrait";
         var detectRatio = false;
 
+        /* In the following section, getScreenWidth() is multiplied by 0.5 as the posters
+        are 25vw and we need double the resolution to counter Skia's scaling. */
+        // TODO: Find a reliable way to get the poster width
         if (imageTags.Primary) {
             url = apiClient.getScaledImageUrl(item.Id, {
                 type: "Primary",

From def9da2f0d823418e3899532a8007566f05a728f Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Thu, 12 Mar 2020 21:17:13 +0100
Subject: [PATCH 07/10] Use 16:9 instead of 1.78:1 to derive width of screen

---
 src/components/dom.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/dom.js b/src/components/dom.js
index bdd7d5d95..cc37e2fc5 100644
--- a/src/components/dom.js
+++ b/src/components/dom.js
@@ -118,9 +118,7 @@ define([], function () {
         var height = window.innerHeight;
 
         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;
+            width = height * (16.0 / 9.0);
         }
 
         var closest = standardWidths.sort(function (a, b) {

From 639db44ad1d1bd2f080e1d6e94f088b13785c38a Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Fri, 13 Mar 2020 09:22:08 +0100
Subject: [PATCH 08/10] Fix spelling issue in comment

---
 src/controllers/dashboard/dashboard.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 1927abf17..2057deaf6 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -634,8 +634,8 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
             return "<img src='" + iconUrl + "' />";
         },
         getNowPlayingImageUrl: function (item) {
-            /* Screen width is multiplied by 0.2, as the there is now way to get the width of
-            elements that aren't crated yet. */
+            /* Screen width is multiplied by 0.2, as the there is currently no way to get the width of
+            elements that aren't created yet. */
             if (item && item.BackdropImageTags && item.BackdropImageTags.length) {
                 return ApiClient.getScaledImageUrl(item.Id, {
                     maxWidth: Math.round(dom.getScreenWidth() * 0.20),

From faa46f5bad4c50368a5ef484dc90e722feea5e1a Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Sat, 14 Mar 2020 22:48:39 +0100
Subject: [PATCH 09/10] Double size of remotecontrol and listview images

---
 src/components/listview/listview.js           | 2 +-
 src/components/remotecontrol/remotecontrol.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index f0f5440aa..25f7e5291 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 = {
-            maxWidth: width,
+            maxWidth: width * 2,
             type: "Primary"
         };
 
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 90115b3a8..7b620d536 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -122,9 +122,9 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
         }
 
         var url = item ? seriesImageUrl(item, {
-            maxHeight: 300
+            maxHeight: 300 * 2
         }) || imageUrl(item, {
-            maxHeight: 300
+            maxHeight: 300 * 2
         }) : null;
 
         console.debug("updateNowPlayingInfo");

From bdc3ec00c82b8706705fd9ec1fd6993b620000b8 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Sun, 15 Mar 2020 21:29:26 +0100
Subject: [PATCH 10/10] Re-add image maxWidth in listview

---
 src/components/listview/listview.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index 25f7e5291..532ba094a 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -105,6 +105,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
         var apiClient = connectionManager.getApiClient(item.ServerId);
 
         var options = {
+            maxWidth: width * 2,
             type: "Primary"
         };