From e538a6d62ca60e5ecd88b95d9458d3544513cede Mon Sep 17 00:00:00 2001 From: Fernando Date: Sun, 13 Oct 2019 21:46:22 +0200 Subject: [PATCH] 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 | 1 + src/components/activitylog.js | 3 +-- src/components/backdrop/backdrop.js | 15 -------------- src/components/cardbuilder/card.css | 5 +++-- src/components/cardbuilder/cardBuilder.js | 23 ---------------------- src/components/emby-button/emby-button.css | 9 ++++----- src/controllers/dashboardpage.js | 2 +- src/controllers/itemdetailpage.js | 7 ------- src/controllers/user/profile.js | 5 ++--- src/css/dashboard.css | 10 ++++++++++ src/css/librarybrowser.css | 7 +++++-- src/myprofile.html | 2 +- src/scripts/librarymenu.js | 2 +- 13 files changed, 29 insertions(+), 62 deletions(-) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index c7c8a07162..d18a7ddae3 100644 --- a/CONTRIBUTORS.md +++ b/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 diff --git a/src/components/activitylog.js b/src/components/activitylog.js index a6206477e7..2556680a6a 100644 --- a/src/components/activitylog.js +++ b/src/components/activitylog.js @@ -13,8 +13,7 @@ define(["events", "globalize", "dom", "datetime", "userSettings", "serverNotific if (entry.UserId && entry.UserPrimaryImageTag) { html += 'dvr" } else { html += '' + icon + ''; diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js index c648e8491d..61f458dd87 100644 --- a/src/components/backdrop/backdrop.js +++ b/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 })); }); diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index 9a74085917..942e05c77a 100644 --- a/src/components/cardbuilder/card.css +++ b/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 { diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 0344300d39..d91802dc71 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/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] }); diff --git a/src/components/emby-button/emby-button.css b/src/components/emby-button/emby-button.css index f6da6b040f..0273de9d7d 100644 --- a/src/components/emby-button/emby-button.css +++ b/src/components/emby-button/emby-button.css @@ -147,15 +147,14 @@ vertical-align: middle; } - .paper-icon-button-light > img { - width: 1.72em; - /* Can't use 100% height or it will stretch past the boundaries in safari */ - /*height: 100%;*/ + .paper-icon-button-light > div { 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 { diff --git a/src/controllers/dashboardpage.js b/src/controllers/dashboardpage.js index 24b3cda5c1..229befdeda 100644 --- a/src/controllers/dashboardpage.js +++ b/src/controllers/dashboardpage.js @@ -304,7 +304,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa html += ""; html += '
'; var userImage = DashboardPage.getUserImage(session); - html += userImage ? '' : '
'; + html += userImage ? '
" : '
'; html += '
'; html += DashboardPage.getUsersHtml(session); html += "
"; diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index cd701a481a..03e0f68a9b 100644 --- a/src/controllers/itemdetailpage.js +++ b/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 += '
', editable && (html += ""), detectRatio && item.PrimaryImageAspectRatio && (item.PrimaryImageAspectRatio >= 1.48 ? shape = "thumb" : item.PrimaryImageAspectRatio >= .85 && item.PrimaryImageAspectRatio <= 1.34 && (shape = "square")), html += "", editable && (html += ""); var progressHtml = item.IsFolder || !item.UserData ? "" : indicators.getProgressBarHtml(item); diff --git a/src/controllers/user/profile.js b/src/controllers/user/profile.js index 9e08ee0099..8bd2bdd376 100644 --- a/src/controllers/user/profile.js +++ b/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(); diff --git a/src/css/dashboard.css b/src/css/dashboard.css index b07adc96ef..1c69dfccb4 100644 --- a/src/css/dashboard.css +++ b/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 diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 39d7025533..8a7b2d247e 100644 --- a/src/css/librarybrowser.css +++ b/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 { diff --git a/src/myprofile.html b/src/myprofile.html index 96ec06b4f7..fdb071dde5 100644 --- a/src/myprofile.html +++ b/src/myprofile.html @@ -2,7 +2,7 @@
- +
diff --git a/src/scripts/librarymenu.js b/src/scripts/librarymenu.js index 9c303d3bde..3c7918d66c 100644 --- a/src/scripts/librarymenu.js +++ b/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 = ''; + headerUserButton.innerHTML = '
"; } else { headerUserButton.classList.remove("headerUserButtonRound"); headerUserButton.innerHTML = '';