milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* 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
This commit is contained in:
Fernando 2019-10-13 21:46:22 +02:00 • committed by Anthony Lavado
parent f6617cb28c
commit e538a6d62c
13 changed files with 29 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CONTRIBUTORS.md
View file

@ -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

3
src/components/activitylog.js
View file

@ -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,
height: 40
tag: entry.UserPrimaryImageTag
}) + "');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>';

15
src/components/backdrop/backdrop.js
View file

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

5
src/components/cardbuilder/card.css
View file

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

23
src/components/cardbuilder/cardBuilder.js
View file

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

9
src/components/emby-button/emby-button.css
View file

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

2
src/controllers/dashboardpage.js
View file

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

7
src/controllers/itemdetailpage.js
View file

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

5
src/controllers/user/profile.js
View file

@ -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();

10
src/css/dashboard.css
View file

@ -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

7
src/css/librarybrowser.css
View file

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

2
src/myprofile.html
View file

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

2
src/scripts/librarymenu.js
View file

@ -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>';