Improvements to the quality of artworks and user images - Part 2 (#512)

* Improved the overall appearance of user images

* Rounded photo in 'My profile' page

* Improved quality of media artwork

* fix some minor bugs introduced from a merge conflict

CONTRIBUTORS.md

@@ -28,6 +28,7 @@
  - [lewazo](https://github.com/lewazo)
  - [Raghu Saxena](https://github.com/ckcr4lyf)
  - [Nickbert7](https://github.com/Nickbert7)
+ - [ferferga](https://github.com/ferferga)
 
 # Emby Contributors
 

src/components/activitylog.js

@@ -13,8 +13,7 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific
         if (entry.UserId && entry.UserPrimaryImageTag) {
             html += '<i class="listItemIcon md-icon" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ";background-image:url('" + apiClient.getUserImageUrl(entry.UserId, {
                 type: "Primary",
-                tag: entry.UserPrimaryImageTag,
+                tag: entry.UserPrimaryImageTag
-                height: 40
             }) + "');background-repeat:no-repeat;background-position:center center;background-size: cover;\">dvr</i>"
         } else {
             html += '<i class="listItemIcon md-icon" style="background-color:' + color + '">' + icon + '</i>';

src/components/backdrop/backdrop.js

@@ -173,19 +173,6 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./style']
         currentLoadingBackdrop = instance;
     }
 
-    var standardWidths = [480, 720, 1280, 1440, 1920];
-    function getBackdropMaxWidth() {
-        var width = dom.getWindowSize().innerWidth;
-        var roundScreenTo = 100;
-
-        if (standardWidths.indexOf(width) !== -1) {
-            return width;
-        }
-
-        width = Math.floor(width / roundScreenTo) * roundScreenTo;
-        return Math.min(width, 1920);
-    }
-
     function getItemImageUrls(item, imageOptions) {
         imageOptions = imageOptions || {};
 
@@ -195,7 +182,6 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./style']
                 return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
                     type: "Backdrop",
                     tag: imgTag,
-                    maxWidth: getBackdropMaxWidth(),
                     index: index
                 }));
             });
@@ -206,7 +192,6 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./style']
                 return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
                     type: "Backdrop",
                     tag: imgTag,
-                    maxWidth: getBackdropMaxWidth(),
                     index: index
                 }));
             });

src/components/cardbuilder/card.css

@@ -232,9 +232,10 @@ button {
     left: 0;
     right: 0;
     bottom: 0;
-    background-size: contain;
+    background-size: cover;
     background-repeat: no-repeat;
-    background-position: center bottom;
+    background-position: center;
+    border: none;
 }
 
 .cardImage-img {

src/components/cardbuilder/cardBuilder.js

@@ -471,7 +471,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
-                    maxWidth: width,
                     tag: item.ImageTags.Thumb
                 });
 
@@ -479,7 +478,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Banner",
-                    maxWidth: width,
                     tag: item.ImageTags.Banner
                 });
 
@@ -487,7 +485,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Disc",
-                    maxWidth: width,
                     tag: item.ImageTags.Disc
                 });
 
@@ -495,7 +492,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Logo",
-                    maxWidth: width,
                     tag: item.ImageTags.Logo
                 });
 
@@ -503,7 +499,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
                     type: "Logo",
-                    maxWidth: width,
                     tag: item.ParentLogoImageTag
                 });
 
@@ -511,7 +506,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
                     type: "Thumb",
-                    maxWidth: width,
                     tag: item.SeriesThumbImageTag
                 });
 
@@ -519,7 +513,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
                     type: "Thumb",
-                    maxWidth: width,
                     tag: item.ParentThumbImageTag
                 });
 
@@ -527,7 +520,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Backdrop",
-                    maxWidth: width,
                     tag: item.BackdropImageTags[0]
                 });
 
@@ -537,7 +529,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
                     type: "Backdrop",
-                    maxWidth: width,
                     tag: item.ParentBackdropImageTags[0]
                 });
 
@@ -547,8 +538,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Primary",
-                    maxHeight: height,
-                    maxWidth: width,
                     tag: item.ImageTags.Primary
                 });
 
@@ -569,8 +558,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.PrimaryImageItemId || item.Id || item.ItemId, {
                     type: "Primary",
-                    maxHeight: height,
-                    maxWidth: width,
                     tag: item.PrimaryImageTag
                 });
 
@@ -589,7 +576,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
                     type: "Primary",
-                    maxWidth: width,
                     tag: item.ParentPrimaryImageTag
                 });
             }
@@ -597,7 +583,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
                     type: "Primary",
-                    maxWidth: width,
                     tag: item.SeriesPrimaryImageTag
                 });
             }
@@ -607,8 +592,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.AlbumId, {
                     type: "Primary",
-                    maxHeight: height,
-                    maxWidth: width,
                     tag: item.AlbumPrimaryImageTag
                 });
 
@@ -623,7 +606,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
-                    maxWidth: width,
                     tag: item.ImageTags.Thumb
                 });
 
@@ -632,7 +614,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Backdrop",
-                    maxWidth: width,
                     tag: item.BackdropImageTags[0]
                 });
 
@@ -640,7 +621,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
-                    maxWidth: width,
                     tag: item.ImageTags.Thumb
                 });
 
@@ -648,7 +628,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
                     type: "Thumb",
-                    maxWidth: width,
                     tag: item.SeriesThumbImageTag
                 });
 
@@ -656,7 +635,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
                     type: "Thumb",
-                    maxWidth: width,
                     tag: item.ParentThumbImageTag
                 });
 
@@ -664,7 +642,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
                 imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
                     type: "Backdrop",
-                    maxWidth: width,
                     tag: item.ParentBackdropImageTags[0]
                 });
 

src/components/emby-button/emby-button.css

@@ -147,15 +147,14 @@
         vertical-align: middle;
     }
 
-    .paper-icon-button-light > img {
+    .paper-icon-button-light > div {
-        width: 1.72em;
-        /* Can't use 100% height or it will stretch past the boundaries in safari */
-        /*height: 100%;*/
         max-height: 100%;
-        /* Make sure its on top of the ripple */
+        transform: scale(1.8);
         position: relative;
         z-index: 1;
         vertical-align: middle;
+        display: inline;
+        margin: 0 auto;
     }
 
 .emby-button-foreground {

src/controllers/dashboardpage.js

@@ -304,7 +304,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
                 html += "</div>";
                 html += '<div class="flex align-items-center justify-content-center">';
                 var userImage = DashboardPage.getUserImage(session);
-                html += userImage ? '<img style="height:1.71em;border-radius:50px;margin-right:.5em;" src="' + userImage + '" />' : '<div style="height:1.71em;"></div>';
+                html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
                 html += '<div class="sessionUserName">';
                 html += DashboardPage.getUsersHtml(session);
                 html += "</div>";

src/controllers/itemdetailpage.js

@@ -429,31 +429,24 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
             detectRatio = !1;
         imageTags.Primary ? (url = apiClient.getScaledImageUrl(item.Id, {
             type: "Primary",
-            maxHeight: 460,
             tag: item.ImageTags.Primary
         }), detectRatio = !0) : item.BackdropImageTags && item.BackdropImageTags.length ? (url = apiClient.getScaledImageUrl(item.Id, {
             type: "Backdrop",
-            maxHeight: 360,
             tag: item.BackdropImageTags[0]
         }), shape = "thumb") : imageTags.Thumb ? (url = apiClient.getScaledImageUrl(item.Id, {
             type: "Thumb",
-            maxHeight: 360,
             tag: item.ImageTags.Thumb
         }), shape = "thumb") : imageTags.Disc ? (url = apiClient.getScaledImageUrl(item.Id, {
             type: "Disc",
-            maxHeight: 360,
             tag: item.ImageTags.Disc
         }), shape = "square") : item.AlbumId && item.AlbumPrimaryImageTag ? (url = apiClient.getScaledImageUrl(item.AlbumId, {
             type: "Primary",
-            maxHeight: 360,
             tag: item.AlbumPrimaryImageTag
         }), shape = "square") : item.SeriesId && item.SeriesPrimaryImageTag ? url = apiClient.getScaledImageUrl(item.SeriesId, {
             type: "Primary",
-            maxHeight: 360,
             tag: item.SeriesPrimaryImageTag
         }) : item.ParentPrimaryImageItemId && item.ParentPrimaryImageTag && (url = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
             type: "Primary",
-            maxHeight: 360,
             tag: item.ParentPrimaryImageTag
         })), html += '<div style="position:relative;">', editable && (html += "<a class='itemDetailGalleryLink' is='emby-linkbutton' style='display:block;padding:2px;margin:0;' href='#'>"), detectRatio && item.PrimaryImageAspectRatio && (item.PrimaryImageAspectRatio >= 1.48 ? shape = "thumb" : item.PrimaryImageAspectRatio >= .85 && item.PrimaryImageAspectRatio <= 1.34 && (shape = "square")), html += "<img class='itemDetailImage lazy' src='data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' />", editable && (html += "</a>");
         var progressHtml = item.IsFolder || !item.UserData ? "" : indicators.getProgressBarHtml(item);

src/controllers/user/profile.js

@@ -11,14 +11,13 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
             var imageUrl = "img/logindefault.png";
             if (user.PrimaryImageTag) {
                 imageUrl = ApiClient.getUserImageUrl(user.Id, {
-                    height: 200,
                     tag: user.PrimaryImageTag,
                     type: "Primary"
                 });
             }
 
             var userImage = page.querySelector("#image");
-            userImage.src = imageUrl;
+            userImage.style.backgroundImage = "url(" + imageUrl + ")";
 
             Dashboard.getCurrentUser().then(function (loggedInUser) {
                 if (user.PrimaryImageTag) {
@@ -71,7 +70,7 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
         reader.onerror = onFileReaderError;
         reader.onabort = onFileReaderAbort;
         reader.onload = function (evt) {
-            userImage.src = evt.target.result;
+            userImage.style.backgroundImage = "url(" + evt.target.result + ")";
             var userId = getParameterByName("userId");
             ApiClient.uploadUserImage(userId, "Primary", file).then(function () {
                 loading.hide();

src/css/dashboard.css

@@ -252,6 +252,16 @@ div[data-role=controlgroup] a.ui-btn-active {
     width: 100% !important
 }
 
+.activitylogUserPhoto {
+    height:1.71em;
+    width:1.71em;
+    border-radius:100%;
+    margin-right:.5em;
+    background-size:cover;
+    background-repeat:no-repeat;
+    background-position:center;
+}
+
 @media all and (min-width:40em) {
     .activeSession {
         width: 100% !important

src/css/librarybrowser.css

@@ -67,9 +67,12 @@
     display: inline-block
 }
 
-.headerUserButtonRound img {
+.headerUserButtonRound div {
     -webkit-border-radius: 100em;
-    border-radius: 100em
+    border-radius: 100em;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
 }
 
 .headerButton {

src/myprofile.html

@@ -2,7 +2,7 @@
     <div class="padded-left padded-right padded-bottom-page">
         <div class="readOnlyContent" style="margin: 0 auto; padding: 0 1em;">
             <div style="position:relative;display:inline-block;max-width:200px;">
-                <img id="image" width="200px" />
+                <div id="image" style="width:200px;height:200px;background-repeat:no-repeat;background-position:center;border-radius:100%;background-size:cover;"></div>
                 <input id="uploadImage" type="file" accept="image/*" style="position:absolute;right:0;width:100%;height:100%;opacity:0;" />
             </div>
             <div style="vertical-align:top;margin:1em 2em;display:inline-block;">

src/scripts/librarymenu.js

@@ -80,7 +80,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
     function updateHeaderUserButton(src) {
         if (src) {
             headerUserButton.classList.add("headerUserButtonRound");
-            headerUserButton.innerHTML = '<img src="' + src + '" />';
+            headerUserButton.innerHTML = '<div class="headerButton headerButtonRight paper-icon-button-light headerUserButtonRound" style="background-image:url(\'' + src + "');\"></div>";
         } else {
             headerUserButton.classList.remove("headerUserButtonRound");
             headerUserButton.innerHTML = '<i class="md-icon">&#xE7FD;</i>';