cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 10:58:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #747 from MrTimscampi/details-placeholder

Browse Source 
Add placeholder image to detail pages and more placeholder icons
This commit is contained in:
Vasily 2020-02-12 14:23:09 +03:00 committed by GitHub
commit 59b1ec6431
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/assets/css/librarybrowser.css
View File

@ -609,6 +609,25 @@
-webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}
div.itemDetailGalleryLink.defaultCardBackground {
text-align: center;
}
.itemDetailGalleryLink.defaultCardBackground {
height: 23vw; /* Dirty hack to get it to look somewhat square. Less than ideal. */
}
.btnSyncComplete i {
-webkit-border-radius: 100em;
border-radius: 100em;
}
.itemDetailGalleryLink.defaultCardBackground > i {
font-size: 15vw;
margin-top: 50%;
transform: translateY(-50%);
}
@media all and (max-width: 62.5em) {
.detailPageWrapperContainer {
position: relative;
@ -629,11 +648,6 @@
background: #673ab7 !important;
}
.btnSyncComplete i {
-webkit-border-radius: 100em;
border-radius: 100em;
}
.emby-button.detailFloatingButton {
position: absolute;
background-color: rgba(0, 0, 0, 0.5) !important;

25
src/components/cardbuilder/cardBuilder.js
View File

@ -1397,7 +1397,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
//}
if (!imgUrl) {
cardImageContainerOpen += getCardDefaultText(item, options);
cardImageContainerOpen += getDefaultText(item, options);
}
var tagName = (layoutManager.tv) && !overlayButtons ? 'button' : 'div';
@ -1485,17 +1485,24 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
return html;
}
function getCardDefaultText(item, options) {
function getDefaultText(item, options) {
if (item.CollectionType) {
return '<i class="cardImageIcon material-icons">' + imageHelper.getLibraryIcon(item.CollectionType) + '</i>'
}
if (item.Type === 'MusicAlbum') {
return '<i class="cardImageIcon material-icons">album</i>';
switch (item.Type) {
case 'MusicAlbum':
return '<i class="cardImageIcon material-icons">album</i>';
case 'MusicArtist':
case 'Person':
return '<i class="cardImageIcon material-icons">person</i>';
case 'Movie':
return '<i class="cardImageIcon material-icons">movie</i>'
case 'Series':
return '<i class="cardImageIcon material-icons">tv</i>'
}
if (item.Type === 'MusicArtist' || item.Type === 'Person') {
return '<i class="cardImageIcon material-icons">person</i>';
}
if (options.defaultCardImageIcon) {
if (options && options.defaultCardImageIcon) {
return '<i class="cardImageIcon material-icons">' + options.defaultCardImageIcon + '</i>';
}
@ -1702,6 +1709,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
return {
getCardsHtml: getCardsHtml,
getDefaultBackgroundClass: getDefaultBackgroundClass,
getDefaultText: getDefaultText,
buildCards: buildCards,
onUserDataChanged: onUserDataChanged,
onTimerCreated: onTimerCreated,

28
src/controllers/itemdetailpage.js
View File

@ -798,22 +798,26 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
});
}
if (editable) {
if (editable && url === undefined) {
html += "<a class='itemDetailGalleryLink itemDetailImage defaultCardBackground defaultCardBackground"+ cardBuilder.getDefaultBackgroundClass(item.Name) + "' is='emby-linkbutton' style='display:block;margin:0;padding:0;' href='#'>";
} else if (!editable && url === undefined) {
html += "<div class='itemDetailGalleryLink itemDetailImage defaultCardBackground defaultCardBackground"+ cardBuilder.getDefaultBackgroundClass(item.Name) + "' is='emby-linkbutton' style='display:block;margin:0;padding:0;' href='#'>";
} else if (editable) {
html += "<a class='itemDetailGalleryLink' is='emby-linkbutton' style='display:block;margin:0;padding:0;' href='#'>";
}
if (detectRatio && item.PrimaryImageAspectRatio) {
if (item.PrimaryImageAspectRatio >= 1.48) {
shape = "thumb";
} else if (item.PrimaryImageAspectRatio >= 0.85 && item.PrimaryImageAspectRatio <= 1.34) {
shape = "square";
}
if (url) {
html += "<img class='itemDetailImage lazy' src='data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' />";
}
html += "<img class='itemDetailImage lazy' src='data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' />";
if (url === undefined) {
html += cardBuilder.getDefaultText(item);
}
if (editable) {
html += "</a>";
} else if (!editable && url === undefined) {
html += "</div>"
}
var progressHtml = item.IsFolder || !item.UserData ? "" : indicators.getProgressBarHtml(item);
@ -826,6 +830,14 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
html += "</div>";
elem.innerHTML = html;
if (detectRatio && item.PrimaryImageAspectRatio) {
if (item.PrimaryImageAspectRatio >= 1.48) {
shape = "thumb";
} else if (item.PrimaryImageAspectRatio >= 0.85 && item.PrimaryImageAspectRatio <= 1.34) {
shape = "square";
}
}
if ("thumb" == shape) {
elem.classList.add("thumbDetailImageContainer");
elem.classList.remove("portraitDetailImageContainer");

5
yarn.lock
View File

@ -5639,6 +5639,11 @@ serialize-javascript@^2.1.2:
resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
serialize-javascript@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
serve-index@^1.9.1:
version "1.9.1"
resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"