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

Improve image loading speed and sizes

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
                 }));
             });

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]
                 });
 

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

src/components/dom.js

@@ -112,6 +112,22 @@ define([], function () {
         return windowSize;
     }
 
+    var standardWidths = [480, 720, 1280, 1440, 1920, 2560, 3840, 5120, 7680];
+    function getScreenWidth() {
+        var width = window.innerWidth;
+        var height = window.innerHeight;
+
+        if (height > width) {
+            width = height * (16.0 / 9.0);
+        }
+
+        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 +191,7 @@ define([], function () {
         addEventListener: addEventListenerWithOptions,
         removeEventListener: removeEventListenerWithOptions,
         getWindowSize: getWindowSize,
+        getScreenWidth: getScreenWidth,
         whichTransitionEvent: whichTransitionEvent,
         whichAnimationEvent: whichAnimationEvent,
         whichAnimationCancelEvent: whichAnimationCancelEvent

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 * 2,
             type: "Primary"
         };
 
@@ -105,7 +105,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
         var apiClient = connectionManager.getApiClient(item.ServerId);
 
         var options = {
-            width: width,
+            maxWidth: width * 2,
             type: "Primary"
         };
 

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");

src/controllers/dashboard/dashboard.js

@@ -634,8 +634,11 @@ 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 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),
                     type: "Backdrop",
                     tag: item.BackdropImageTags[0]
                 });
@@ -643,6 +646,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
                 return ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Backdrop",
                     tag: item.ParentBackdropImageTags[0]
                 });
@@ -650,6 +654,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.BackdropImageTag) {
                 return ApiClient.getScaledImageUrl(item.BackdropItemId, {
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Backdrop",
                     tag: item.BackdropImageTag
                 });
@@ -659,6 +664,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && imageTags.Thumb) {
                 return ApiClient.getScaledImageUrl(item.Id, {
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Thumb",
                     tag: imageTags.Thumb
                 });
@@ -666,6 +672,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.ParentThumbImageTag) {
                 return ApiClient.getScaledImageUrl(item.ParentThumbItemId, {
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Thumb",
                     tag: item.ParentThumbImageTag
                 });
@@ -673,6 +680,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.ThumbImageTag) {
                 return ApiClient.getScaledImageUrl(item.ThumbItemId, {
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Thumb",
                     tag: item.ThumbImageTag
                 });
@@ -680,6 +688,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && imageTags.Primary) {
                 return ApiClient.getScaledImageUrl(item.Id, {
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Primary",
                     tag: imageTags.Primary
                 });
@@ -687,6 +696,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.PrimaryImageTag) {
                 return ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Primary",
                     tag: item.PrimaryImageTag
                 });
@@ -694,6 +704,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
 
             if (item && item.AlbumPrimaryImageTag) {
                 return ApiClient.getScaledImageUrl(item.AlbumId, {
+                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                     type: "Primary",
                     tag: item.AlbumPrimaryImageTag
                 });

src/controllers/itemdetailpage.js

@@ -468,6 +468,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
             });
@@ -477,6 +478,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
             });
@@ -486,6 +488,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]
             });
@@ -495,6 +498,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]
             });
@@ -504,6 +508,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
             });
@@ -761,44 +766,54 @@ 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",
+                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: Math.round(dom.getScreenWidth() * 0.5),
                 tag: item.BackdropImageTags[0]
             });
             shape = "thumb";
         } else if (imageTags.Thumb) {
             url = apiClient.getScaledImageUrl(item.Id, {
                 type: "Thumb",
+                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: 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: 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: Math.round(dom.getScreenWidth() * 0.5),
                 tag: item.SeriesPrimaryImageTag
             });
         } else if (item.ParentPrimaryImageItemId && item.ParentPrimaryImageTag) {
             url = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
                 type: "Primary",
+                maxWidth: Math.round(dom.getScreenWidth() * 0.5),
                 tag: item.ParentPrimaryImageTag
             });
         }
@@ -1805,7 +1820,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
             require(["chaptercardbuilder"], function (chaptercardbuilder) {
                 chaptercardbuilder.buildChapterCards(item, chapters, {
                     itemsContainer: scenesContent,
-                    width: 400,
                     backdropShape: "overflowBackdrop",
                     squareShape: "overflowSquare"
                 });
@@ -1858,7 +1872,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
                 itemsContainer: castContent,
                 coverImage: true,
                 serverId: item.ServerId,
-                width: 160,
                 shape: "overflowPortrait"
             });
         });

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: Math.round(dom.getScreenWidth() * 0.40),
                 type: "Primary"
             });
         }

src/controllers/playback/videoosd.js

@@ -334,18 +334,24 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
 
             if (item) {
                 var imgUrl = seriesImageUrl(item, {
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Primary"
                 }) || seriesImageUrl(item, {
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Thumb"
                 }) || imageUrl(item, {
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Primary"
                 });
 
                 if (!imgUrl && secondaryItem && (imgUrl = seriesImageUrl(secondaryItem, {
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Primary"
                 }) || seriesImageUrl(secondaryItem, {
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Thumb"
                 }) || imageUrl(secondaryItem, {
+                    maxWidth: osdPoster.clientWidth * 2,
                     type: "Primary"
                 })), imgUrl) {
                     return void (osdPoster.innerHTML = '<img src="' + imgUrl + '" />');

src/libraries/apiclient/apiclient.js

@@ -59,8 +59,8 @@ define(["libraries/apiclient/apiclientcore", "localassetmanager"], function(ApiC
         })
     }
 
-    function ApiClientEx(serverAddress, clientName, applicationVersion, deviceName, deviceId, devicePixelRatio) {
+    function ApiClientEx(serverAddress, clientName, applicationVersion, deviceName, deviceId) {
-        ApiClient.call(this, serverAddress, clientName, applicationVersion, deviceName, deviceId, devicePixelRatio)
+        ApiClient.call(this, serverAddress, clientName, applicationVersion, deviceName, deviceId)
     }
     var localPrefix = "local:",
         localViewPrefix = "localview:";

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)
     }
 

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) {

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;