mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
fixes #238 - MBServer Client Theme Background
This commit is contained in:
Luke Pulverenti
parent
443299c687
commit
d9cf304d0f
37 changed files with 824 additions and 722 deletions
|
|
@ -26,11 +26,13 @@
|
|||
|
||||
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
|
||||
|
||||
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page));
|
||||
LibraryBrowser.renderName(item, $('.itemName', page));
|
||||
LibraryBrowser.renderParentName(item, $('.parentName', page));
|
||||
|
||||
var context = getContext(item);
|
||||
setInitialCollapsibleState(page, item, context);
|
||||
renderDetails(page, item, context);
|
||||
LibraryBrowser.renderDetailPageBackdrop(page, item);
|
||||
|
||||
if (MediaPlayer.canPlay(item)) {
|
||||
$('#playButtonContainer', page).show();
|
||||
|
|
@ -116,18 +118,11 @@
|
|||
|
||||
function setInitialCollapsibleState(page, item, context) {
|
||||
|
||||
if (item.ChildCount && item.Type == "MusicAlbum") {
|
||||
$('#itemSongs', page).show();
|
||||
$('#childrenCollapsible', page).hide();
|
||||
renderChildren(page, item);
|
||||
}
|
||||
else if (item.ChildCount) {
|
||||
$('#itemSongs', page).hide();
|
||||
if (item.ChildCount) {
|
||||
$('#childrenCollapsible', page).show();
|
||||
renderChildren(page, item);
|
||||
}
|
||||
else {
|
||||
$('#itemSongs', page).hide();
|
||||
$('#childrenCollapsible', page).hide();
|
||||
}
|
||||
if (LibraryBrowser.shouldDisplayGallery(item)) {
|
||||
|
|
@ -190,12 +185,12 @@
|
|||
$('#itemTagline', page).hide();
|
||||
}
|
||||
|
||||
LibraryBrowser.renderOverview($('#itemOverview', page), item);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), item);
|
||||
|
||||
if (item.CommunityRating || item.CriticRating) {
|
||||
$('#itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item)).show();
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item)).show();
|
||||
} else {
|
||||
$('#itemCommunityRating', page).hide();
|
||||
$('.itemCommunityRating', page).hide();
|
||||
}
|
||||
|
||||
if (item.Type != "Episode" && item.Type != "Movie") {
|
||||
|
|
@ -208,16 +203,18 @@
|
|||
LibraryBrowser.renderBudget($('#itemBudget', page), item);
|
||||
LibraryBrowser.renderRevenue($('#itemRevenue', page), item);
|
||||
|
||||
$('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
|
||||
$('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
|
||||
|
||||
LibraryBrowser.renderGenres($('#itemGenres', page), item, context);
|
||||
LibraryBrowser.renderStudios($('#itemStudios', page), item, context);
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
|
||||
LibraryBrowser.renderStudios($('.itemStudios', page), item, context);
|
||||
renderUserDataIcons(page, item);
|
||||
LibraryBrowser.renderLinks($('#itemLinks', page), item);
|
||||
LibraryBrowser.renderLinks($('.itemExternalLinks', page), item);
|
||||
|
||||
$('.criticRatingScore', page).html((item.CriticRating || '0') + '%');
|
||||
|
||||
if (item.CriticRatingSummary) {
|
||||
$('#criticRatingSummary', page).show();
|
||||
$('#criticRatingSummaryText', page).html(item.CriticRatingSummary);
|
||||
$('.criticRatingSummaryText', page).html(item.CriticRatingSummary);
|
||||
|
||||
} else {
|
||||
$('#criticRatingSummary', page).hide();
|
||||
|
|
@ -238,10 +235,10 @@
|
|||
|
||||
}
|
||||
|
||||
$('#itemTags', page).show().html(html);
|
||||
$('.itemTags', page).show().html(html);
|
||||
|
||||
} else {
|
||||
$('#itemTags', page).hide();
|
||||
$('.itemTags', page).hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -257,7 +254,7 @@
|
|||
|
||||
if (item.Type == "MusicAlbum") {
|
||||
|
||||
$('#itemSongs', page).html(LibraryBrowser.getSongTableHtml(result.Items, { showArtist: true })).trigger('create');
|
||||
$('#childrenContent', page).html(LibraryBrowser.getSongTableHtml(result.Items, { showArtist: true })).trigger('create');
|
||||
|
||||
} else {
|
||||
|
||||
|
|
@ -298,7 +295,7 @@
|
|||
}
|
||||
}
|
||||
function renderUserDataIcons(page, item) {
|
||||
$('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||
}
|
||||
|
||||
function renderCriticReviews(page, item, limit) {
|
||||
|
|
@ -311,7 +308,7 @@
|
|||
|
||||
ApiClient.getCriticReviews(item.Id, options).done(function (result) {
|
||||
|
||||
if (result.TotalRecordCount) {
|
||||
if (result.TotalRecordCount || item.CriticRatingSummary) {
|
||||
$('#criticReviewsCollapsible', page).show();
|
||||
renderCriticReviewsContent(page, result, limit);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
|
||||
currentItem = item;
|
||||
|
||||
LibraryBrowser.renderTitle(item, $('#itemName', page), $('#parentName', page), $('#grandParentName', page), true);
|
||||
LibraryBrowser.renderName(item, $('.itemName', page), true);
|
||||
LibraryBrowser.renderParentName(item, $('.parentName', page));
|
||||
|
||||
ApiClient.getItemImageInfos(currentItem.Id).done(function (imageInfos) {
|
||||
renderStandardImages(page, item, imageInfos);
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
|
||||
var image = images[i];
|
||||
|
||||
html += '<div style="display:inline-block;margin:5px;background:#202020;padding:10px;font-size:14px;">';
|
||||
html += '<div style="display:inline-block;margin:5px;background:#202020;padding:10px;">';
|
||||
|
||||
html += '<div style="float:left;height:100px;width:175px;vertical-align:top;background-repeat:no-repeat;background-size:contain;background-image:url(\'' + LibraryBrowser.getImageUrl(currentItem, image.ImageType, image.ImageIndex, { maxwidth: 300 }) + '\');"></div>';
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
Dashboard.setPageTitle(name);
|
||||
|
||||
$('#itemName', page).html(name);
|
||||
$('.itemName', page).html(name);
|
||||
|
||||
renderDetails(page, item);
|
||||
renderTabs(page, item);
|
||||
|
|
@ -287,7 +287,8 @@
|
|||
|
||||
function renderDetails(page, item) {
|
||||
|
||||
LibraryBrowser.renderOverview($('#itemOverview', page), item);
|
||||
LibraryBrowser.renderDetailPageBackdrop(page, item);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), item);
|
||||
|
||||
renderUserDataIcons(page, item);
|
||||
LibraryBrowser.renderLinks($('#itemLinks', page), item);
|
||||
|
|
@ -337,7 +338,7 @@
|
|||
}
|
||||
|
||||
function renderUserDataIcons(page, item) {
|
||||
$('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||
}
|
||||
|
||||
function addCurrentItemToQuery(query) {
|
||||
|
|
|
|||
|
|
@ -297,7 +297,7 @@
|
|||
|
||||
var html = '<div data-role="popup" class="playFlyout" style="max-width:300px;" data-corners="false" data-theme="c" data-history="false">';
|
||||
|
||||
html += '<ul data-role="listview" style="min-width: 150px;font-size:14px;" data-theme="c">';
|
||||
html += '<ul data-role="listview" style="min-width: 150px;" data-theme="c">';
|
||||
html += '<li data-role="list-divider" data-theme="a">Play Menu</li>';
|
||||
|
||||
html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
|
||||
|
|
@ -637,7 +637,7 @@
|
|||
|
||||
},
|
||||
|
||||
renderTitle: function (item, nameElem, parentNameElem, grandParentNameElem, linkToElement) {
|
||||
renderName: function (item, nameElem, linkToElement) {
|
||||
|
||||
var name = item.Name;
|
||||
|
||||
|
|
@ -655,42 +655,47 @@
|
|||
} else {
|
||||
nameElem.html(name);
|
||||
}
|
||||
},
|
||||
|
||||
renderParentName: function (item, parentNameElem) {
|
||||
|
||||
var html = [];
|
||||
|
||||
if (item.AlbumArtist && item.Type == "Audio") {
|
||||
grandParentNameElem.html('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>').show().trigger('create');
|
||||
html.push('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>');
|
||||
}
|
||||
else if (item.AlbumArtist && item.Type == "MusicAlbum") {
|
||||
grandParentNameElem.html('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>').show().trigger('create');
|
||||
html.push('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>');
|
||||
}
|
||||
else if (item.SeriesName && item.Type == "Episode") {
|
||||
|
||||
grandParentNameElem.html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>').show().trigger('create');
|
||||
}
|
||||
else {
|
||||
grandParentNameElem.hide();
|
||||
html.push('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>');
|
||||
}
|
||||
|
||||
if (item.SeriesName && item.Type == "Season") {
|
||||
|
||||
parentNameElem.html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>').show().trigger('create');
|
||||
html.push('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>');
|
||||
}
|
||||
else if (item.ParentIndexNumber && item.Type == "Episode") {
|
||||
|
||||
parentNameElem.html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.ParentId + '">Season ' + item.ParentIndexNumber + '</a>').show().trigger('create');
|
||||
html.push('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.ParentId + '">Season ' + item.ParentIndexNumber + '</a>');
|
||||
}
|
||||
else if (item.Album && item.Type == "Audio" && item.ParentId) {
|
||||
parentNameElem.html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.ParentId + '">' + item.Album + '</a>').show().trigger('create');
|
||||
html.push('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.ParentId + '">' + item.Album + '</a>');
|
||||
|
||||
}
|
||||
else if (item.AlbumArtist && item.Type == "MusicAlbum") {
|
||||
grandParentNameElem.html('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>').show().trigger('create');
|
||||
html.push('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>');
|
||||
|
||||
}
|
||||
else if (item.Album) {
|
||||
parentNameElem.html(item.Album).show();
|
||||
html.push(item.Album);
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
if (html.length) {
|
||||
parentNameElem.show().html(html.join(' - ')).trigger('create');
|
||||
} else {
|
||||
parentNameElem.hide();
|
||||
}
|
||||
},
|
||||
|
|
@ -1097,35 +1102,33 @@
|
|||
var html = '';
|
||||
|
||||
var url;
|
||||
var useBackgroundColor;
|
||||
var maxwidth;
|
||||
|
||||
if (imageTags.Primary) {
|
||||
|
||||
if (item.Type == "Person") {
|
||||
url = ApiClient.getPersonImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: imageTags.Primary,
|
||||
type: "Primary"
|
||||
});
|
||||
}
|
||||
else if (item.Type == "Genre") {
|
||||
url = ApiClient.getGenreImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: imageTags.Primary,
|
||||
type: "Primary"
|
||||
});
|
||||
}
|
||||
else if (item.Type == "Studio") {
|
||||
url = ApiClient.getStudioImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: imageTags.Primary,
|
||||
type: "Primary"
|
||||
});
|
||||
}
|
||||
else if (item.Type == "Artist") {
|
||||
url = ApiClient.getArtistImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: imageTags.Primary,
|
||||
type: "Primary"
|
||||
});
|
||||
|
|
@ -1133,7 +1136,7 @@
|
|||
else {
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: item.ImageTags.Primary
|
||||
});
|
||||
}
|
||||
|
|
@ -1142,28 +1145,28 @@
|
|||
|
||||
if (item.Type == "Person") {
|
||||
url = ApiClient.getPersonImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: item.BackdropImageTags[0],
|
||||
type: "Backdrop"
|
||||
});
|
||||
}
|
||||
else if (item.Type == "Genre") {
|
||||
url = ApiClient.getGenreImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: item.BackdropImageTags[0],
|
||||
type: "Backdrop"
|
||||
});
|
||||
}
|
||||
else if (item.Type == "Studio") {
|
||||
url = ApiClient.getStudioImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: item.BackdropImageTags[0],
|
||||
type: "Backdrop"
|
||||
});
|
||||
}
|
||||
else if (item.Type == "Artist") {
|
||||
url = ApiClient.getArtistImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: item.BackdropImageTags[0],
|
||||
type: "Backdrop"
|
||||
});
|
||||
|
|
@ -1171,7 +1174,7 @@
|
|||
else {
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
}
|
||||
|
|
@ -1180,28 +1183,28 @@
|
|||
|
||||
if (item.Type == "Person") {
|
||||
url = ApiClient.getPersonImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: imageTags.Thumb,
|
||||
type: "Thumb"
|
||||
});
|
||||
}
|
||||
else if (item.Type == "Genre") {
|
||||
url = ApiClient.getGenreImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: imageTags.Thumb,
|
||||
type: "Thumb"
|
||||
});
|
||||
}
|
||||
else if (item.Type == "Studio") {
|
||||
url = ApiClient.getStudioImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: imageTags.Thumb,
|
||||
type: "Thumb"
|
||||
});
|
||||
}
|
||||
else if (item.Type == "Artist") {
|
||||
url = ApiClient.getArtistImageUrl(item.Name, {
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: imageTags.Thumb,
|
||||
type: "Thumb"
|
||||
});
|
||||
|
|
@ -1209,7 +1212,7 @@
|
|||
else {
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
}
|
||||
|
|
@ -1218,43 +1221,29 @@
|
|||
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Disc",
|
||||
maxwidth: 800,
|
||||
maxheight: 400,
|
||||
tag: item.ImageTags.Disc
|
||||
});
|
||||
}
|
||||
else if (item.MediaType == "Audio" || item.Type == "MusicAlbum") {
|
||||
url = "css/images/items/detail/audio.png";
|
||||
useBackgroundColor = true;
|
||||
}
|
||||
else if (item.MediaType == "Game") {
|
||||
url = "css/images/items/detail/game.png";
|
||||
useBackgroundColor = true;
|
||||
}
|
||||
else if (item.Type == "Person") {
|
||||
url = "css/images/items/detail/person.png";
|
||||
useBackgroundColor = true;
|
||||
maxwidth = 125;
|
||||
}
|
||||
else if (item.Type == "Genre" || item.Type == "Studio") {
|
||||
url = "css/images/items/detail/video.png";
|
||||
useBackgroundColor = true;
|
||||
maxwidth = 125;
|
||||
}
|
||||
else {
|
||||
url = "css/images/items/detail/video.png";
|
||||
useBackgroundColor = true;
|
||||
maxwidth = 150;
|
||||
}
|
||||
|
||||
if (url) {
|
||||
|
||||
var style = useBackgroundColor ? "background-color:" + defaultBackground + ";" : "";
|
||||
|
||||
if (maxwidth) {
|
||||
style += "max-width:" + maxwidth + "px;";
|
||||
}
|
||||
|
||||
html += "<img class='itemDetailImage' src='" + url + "' style='" + style + "' />";
|
||||
html += "<img class='itemDetailImage' src='" + url + "' />";
|
||||
}
|
||||
|
||||
return html;
|
||||
|
|
@ -1371,7 +1360,8 @@
|
|||
|
||||
if (item.Studios && item.Studios.length) {
|
||||
|
||||
var html = 'Studios: ';
|
||||
var prefix = item.Studios.length > 1 ? "Studios" : "Studio";
|
||||
var html = prefix + ': ';
|
||||
|
||||
for (var i = 0, length = item.Studios.length; i < length; i++) {
|
||||
|
||||
|
|
@ -1393,7 +1383,9 @@
|
|||
renderGenres: function (elem, item, context) {
|
||||
|
||||
if (item.Genres && item.Genres.length) {
|
||||
var html = 'Genres: ';
|
||||
|
||||
var prefix = item.Genres.length > 1 ? "Genres" : "Genre";
|
||||
var html = prefix + ': ';
|
||||
|
||||
for (var i = 0, length = item.Genres.length; i < length; i++) {
|
||||
|
||||
|
|
@ -1420,7 +1412,7 @@
|
|||
|
||||
var text = new Date().getTime() > date.getTime() ? "Premiered" : "Premieres";
|
||||
|
||||
elem.show().html(text + ' ' + date.toDateString());
|
||||
elem.show().html(text + ' ' + date.toLocaleDateString());
|
||||
} catch (err) {
|
||||
elem.hide();
|
||||
}
|
||||
|
|
@ -1445,6 +1437,33 @@
|
|||
}
|
||||
},
|
||||
|
||||
renderDetailPageBackdrop: function (page, item) {
|
||||
var imgUrl;
|
||||
|
||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
|
||||
imgUrl = LibraryBrowser.getImageUrl(item, 'Backdrop', 0, {});
|
||||
|
||||
$('#itemBackdrop', page).removeClass('noBackdrop').css('background-image', 'url("' + imgUrl + '")');
|
||||
|
||||
}
|
||||
else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
||||
|
||||
imgUrl = ApiClient.getImageUrl(item.ParentBackdropItemId, {
|
||||
type: 'Backdrop',
|
||||
index: 0,
|
||||
tag: item.ParentBackdropImageTags[0]
|
||||
});
|
||||
|
||||
$('#itemBackdrop', page).removeClass('noBackdrop').css('background-image', 'url("' + imgUrl + '")');
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
$('#itemBackdrop', page).addClass('noBackdrop').css('background-image', 'none');
|
||||
}
|
||||
},
|
||||
|
||||
shouldDisplayGallery: function (item) {
|
||||
|
||||
var imageTags = item.ImageTags || {};
|
||||
|
|
@ -1612,8 +1631,8 @@
|
|||
}
|
||||
|
||||
if (counts.EpisodeCount || counts.SeriesCount) {
|
||||
html += '<a class="viewMenuLink viewMenuImageLink" href="tvrecommended.html" title="TV Shows"><img src="css/images/views/tvshows.png" alt="TV Shows" /></a>';
|
||||
html += '<a class="viewMenuLink viewMenuTextLink' + (view == 'tvshows' ? selectedCssClass : '') + '" href="tvrecommended.html">' + (view == 'tvshows' ? selectedHtml : '') + '<span class="viewName">TV Shows</span></a>';
|
||||
html += '<a class="viewMenuLink viewMenuImageLink" href="tvrecommended.html" title="TV"><img src="css/images/views/tvshows.png" alt="TV" /></a>';
|
||||
html += '<a class="viewMenuLink viewMenuTextLink' + (view == 'tvshows' ? selectedCssClass : '') + '" href="tvrecommended.html">' + (view == 'tvshows' ? selectedHtml : '') + '<span class="viewName">TV</span></a>';
|
||||
}
|
||||
|
||||
if (counts.SongCount) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue