mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add placeholder image to detail pages

Browse source
This commit is contained in:
MrTimscampi 2020-01-29 18:59:18 +01:00
parent e3de93dae6
commit d989d7b007
4 changed files with 318 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/assets/css/librarybrowser.css
View file

@ -542,6 +542,16 @@
-webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}
.itemDetailGalleryLink.defaultCardBackground {
height: 23vw; /* Dirty hack to get it to look somewhat square. Less than ideal. */
}
.itemDetailGalleryLink.defaultCardBackground > i {
font-size: 15vw;
margin-top: 50%;
transform: translateY(-50%);
}
@media all and (max-width: 62.5em) {
.detailPageContent {
position: relative;

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,

12
src/controllers/itemdetailpage.js
View file

@ -795,7 +795,9 @@ 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) {
html += "<a class='itemDetailGalleryLink' is='emby-linkbutton' style='display:block;margin:0;padding:0;' href='#'>";
}
@ -807,7 +809,13 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
}
}
html += "<img class='itemDetailImage lazy' src='data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' />";
if (url) {
html += "<img class='itemDetailImage lazy' src='data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' />";
}
if (url === undefined) {
html += cardBuilder.getDefaultText(item);
}
if (editable) {
html += "</a>";