mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
music progress and search placeholder
This commit is contained in:
parent
69b9c9c379
commit
6f1e4d2863
9 changed files with 114 additions and 57 deletions
|
@ -1,13 +1,16 @@
|
|||
.detailTable {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
.detailTableContainer {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.centeredDetailTable {
|
||||
margin: auto;
|
||||
.detailTable {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.stretchedDetailTable {
|
||||
|
@ -36,6 +39,7 @@
|
|||
font-weight: normal;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detailTable .imgUserItemRating {
|
||||
|
|
|
@ -293,7 +293,7 @@
|
|||
}
|
||||
|
||||
.libraryTabs .ui-btn-inner {
|
||||
padding: 1em 20px!important;
|
||||
padding: .5em 15px!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -125,6 +125,15 @@ pre, textarea.pre {
|
|||
right: 10px;
|
||||
}
|
||||
|
||||
.headerSearch {
|
||||
display: none;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.headerSearch input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.header .imageLink {
|
||||
display: inline-block;
|
||||
}
|
||||
|
@ -265,6 +274,10 @@ form, .readOnlyContent {
|
|||
|
||||
@media all and (min-width: 650px) {
|
||||
|
||||
.headerSearch {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.imgLogoIcon {
|
||||
height: 50px;
|
||||
}
|
||||
|
|
|
@ -112,9 +112,16 @@
|
|||
<p id="itemLinks"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="itemTabs" style="margin-top: 20px; text-align: center;"></div>
|
||||
<div>
|
||||
<div data-role="collapsible" id="galleryCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
|
||||
<h3>Gallery</h3>
|
||||
<div id="galleryContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="itemTabs" style="text-align: center;"></div>
|
||||
</div>
|
||||
|
||||
<div class="viewSettings">
|
||||
<div class="viewControls">
|
||||
|
|
|
@ -261,13 +261,13 @@
|
|||
|
||||
ParentId: getParameterByName('id'),
|
||||
SortBy: "SortName",
|
||||
Fields: "PrimaryImageAspectRatio,ItemCounts,DisplayMediaType,DateCreated,UserData"
|
||||
Fields: "PrimaryImageAspectRatio,ItemCounts,DisplayMediaType,DateCreated,UserData,AudioInfo"
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
if (item.Type == "MusicAlbum") {
|
||||
|
||||
$('#itemSongs', page).html(LibraryBrowser.getSongTableHtml(result.Items)).trigger('create');
|
||||
$('#itemSongs', page).html(LibraryBrowser.getSongTableHtml(result.Items, { showArtist: true })).trigger('create');
|
||||
|
||||
} else {
|
||||
var html = LibraryBrowser.getPosterDetailViewHtml({
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
getItemPromise = ApiClient.getGenre(name, Dashboard.getCurrentUserId());
|
||||
}
|
||||
else {
|
||||
|
||||
|
||||
name = getParameterByName('artist');
|
||||
|
||||
if (name) {
|
||||
|
@ -72,7 +72,7 @@
|
|||
function renderHeader(page, item) {
|
||||
|
||||
var context = getParameterByName('context');
|
||||
|
||||
|
||||
if (context == "movies") {
|
||||
enableCustomHeader(page, "Movies");
|
||||
$('#standardLogo', page).hide();
|
||||
|
@ -206,6 +206,13 @@
|
|||
});
|
||||
}
|
||||
|
||||
function renderGallery(page, item) {
|
||||
|
||||
var html = LibraryBrowser.getGalleryHtml(item);
|
||||
|
||||
$('#galleryContent', page).html(html).trigger('create');
|
||||
}
|
||||
|
||||
function bindRadioEvents(page) {
|
||||
|
||||
$("#radioMovies", page).on("click", function () {
|
||||
|
@ -293,6 +300,13 @@
|
|||
renderUserDataIcons(page, item);
|
||||
LibraryBrowser.renderLinks($('#itemLinks', page), item);
|
||||
|
||||
if (LibraryBrowser.shouldDisplayGallery(item)) {
|
||||
$('#galleryCollapsible', page).show();
|
||||
renderGallery(page, item);
|
||||
} else {
|
||||
$('#galleryCollapsible', page).hide();
|
||||
}
|
||||
|
||||
if (item.Type == "Person" && item.PremiereDate) {
|
||||
|
||||
try {
|
||||
|
@ -348,7 +362,7 @@
|
|||
else if (currentItem.Type == "Artist") {
|
||||
query.Artists = currentItem.Name;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadItems(page, options) {
|
||||
|
||||
|
|
|
@ -202,13 +202,9 @@
|
|||
|
||||
var html = '';
|
||||
|
||||
var cssClass = options.center ? "centeredDetailTable detailTable" : "detailTable";
|
||||
var cssClass = "detailTable";
|
||||
|
||||
if (options.strech) {
|
||||
cssClass += " stretchedDetailTable";
|
||||
}
|
||||
|
||||
html += '<table class="' + cssClass + '">';
|
||||
html += '<div class="detailTableContainer"><table class="' + cssClass + '">';
|
||||
|
||||
html += '<tr>';
|
||||
|
||||
|
@ -220,7 +216,7 @@
|
|||
html += '<th>Album</th>';
|
||||
}
|
||||
if (options.showArtist) {
|
||||
html += '<th>Artists</th>';
|
||||
html += '<th>Artist</th>';
|
||||
}
|
||||
|
||||
html += '<th>Duration</th>';
|
||||
|
@ -254,8 +250,11 @@
|
|||
|
||||
if (options.showArtist) {
|
||||
|
||||
if (item.Artist) {
|
||||
html += '<td><a href="itembynamedetails.html?context=music&artist=' + item.Artist + '">' + item.Artist + '</a></td>';
|
||||
if (item.Artists && item.Artists.length) {
|
||||
|
||||
var artist = item.Artists[0];
|
||||
|
||||
html += '<td><a href="itembynamedetails.html?context=music&artist=' + artist + '">' + artist + '</a></td>';
|
||||
} else {
|
||||
html += '<td></td>';
|
||||
}
|
||||
|
@ -272,7 +271,7 @@
|
|||
html += '</tr>';
|
||||
}
|
||||
|
||||
html += '</table>';
|
||||
html += '</table></div>';
|
||||
|
||||
return html;
|
||||
},
|
||||
|
@ -445,7 +444,7 @@
|
|||
if (options.showParentTitle) {
|
||||
|
||||
html += "<div class='" + cssclass + "'>";
|
||||
html += item.SeriesName || item.Album || item.Artist || " ";
|
||||
html += item.SeriesName || item.Album || " ";
|
||||
html += "</div>";
|
||||
}
|
||||
|
||||
|
@ -1368,36 +1367,36 @@
|
|||
|
||||
if (imageTags.Banner) {
|
||||
|
||||
html += LibraryBrowser.createGalleryImage(item.Id, "Banner", imageTags.Banner);
|
||||
html += LibraryBrowser.createGalleryImage(item, "Banner", imageTags.Banner);
|
||||
}
|
||||
|
||||
if (imageTags.Logo) {
|
||||
|
||||
html += LibraryBrowser.createGalleryImage(item.Id, "Logo", imageTags.Logo);
|
||||
html += LibraryBrowser.createGalleryImage(item, "Logo", imageTags.Logo);
|
||||
}
|
||||
if (imageTags.Thumb) {
|
||||
|
||||
html += LibraryBrowser.createGalleryImage(item.Id, "Thumb", imageTags.Thumb);
|
||||
html += LibraryBrowser.createGalleryImage(item, "Thumb", imageTags.Thumb);
|
||||
}
|
||||
if (imageTags.Art) {
|
||||
|
||||
html += LibraryBrowser.createGalleryImage(item.Id, "Art", imageTags.Art);
|
||||
html += LibraryBrowser.createGalleryImage(item, "Art", imageTags.Art);
|
||||
|
||||
}
|
||||
if (imageTags.Menu) {
|
||||
|
||||
html += LibraryBrowser.createGalleryImage(item.Id, "Menu", imageTags.Menu);
|
||||
html += LibraryBrowser.createGalleryImage(item, "Menu", imageTags.Menu);
|
||||
|
||||
}
|
||||
if (imageTags.Box) {
|
||||
|
||||
html += LibraryBrowser.createGalleryImage(item.Id, "Box", imageTags.Box);
|
||||
html += LibraryBrowser.createGalleryImage(item, "Box", imageTags.Box);
|
||||
}
|
||||
|
||||
if (item.BackdropImageTags) {
|
||||
|
||||
for (i = 0, length = item.BackdropImageTags.length; i < length; i++) {
|
||||
html += LibraryBrowser.createGalleryImage(item.Id, "Backdrop", item.BackdropImageTags[i], i);
|
||||
html += LibraryBrowser.createGalleryImage(item, "Backdrop", item.BackdropImageTags[i], i);
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1405,18 +1404,18 @@
|
|||
if (item.ScreenshotImageTags) {
|
||||
|
||||
for (i = 0, length = item.ScreenshotImageTags.length; i < length; i++) {
|
||||
html += LibraryBrowser.createGalleryImage(item.Id, "Screenshot", item.ScreenshotImageTags[i], i);
|
||||
html += LibraryBrowser.createGalleryImage(item, "Screenshot", item.ScreenshotImageTags[i], i);
|
||||
}
|
||||
}
|
||||
if (imageTags.Disc) {
|
||||
|
||||
html += LibraryBrowser.createGalleryImage(item.Id, "Disc", imageTags.Disc);
|
||||
html += LibraryBrowser.createGalleryImage(item, "Disc", imageTags.Disc);
|
||||
}
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
createGalleryImage: function (itemId, type, tag, index) {
|
||||
createGalleryImage: function (item, type, tag, index) {
|
||||
|
||||
var downloadWidth = 400;
|
||||
var lightboxWidth = 800;
|
||||
|
@ -1426,21 +1425,19 @@
|
|||
|
||||
html += '<div class="posterViewItem" style="padding-bottom:0px;">';
|
||||
html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(itemId, {
|
||||
type: type,
|
||||
maxwidth: downloadWidth,
|
||||
tag: tag,
|
||||
index: index
|
||||
html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
|
||||
maxwidth: downloadWidth,
|
||||
tag: tag
|
||||
}) + '" />';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="galleryPopup" id="pop_' + index + '_' + tag + '" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
|
||||
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
|
||||
html += '<img class="" src="' + ApiClient.getImageUrl(itemId, {
|
||||
type: type,
|
||||
html += '<img class="" src="' + LibraryBrowser.getImageUrl(item, type, index, {
|
||||
|
||||
maxwidth: lightboxWidth,
|
||||
tag: tag,
|
||||
index: index
|
||||
tag: tag
|
||||
|
||||
}) + '" />';
|
||||
html += '</div>';
|
||||
|
||||
|
|
|
@ -695,6 +695,9 @@ var Dashboard = {
|
|||
headerHtml += '<div class="headerButtons">';
|
||||
|
||||
if (user && !page.hasClass('wizardPage')) {
|
||||
|
||||
headerHtml += Dashboard.getSearchHtml();
|
||||
|
||||
headerHtml += '<a class="imageLink btnCurrentUser" href="#" onclick="Dashboard.showUserFlyout();"><span class="currentUsername">' + user.Name + '</span>';
|
||||
|
||||
if (user.PrimaryImageTag) {
|
||||
|
@ -721,12 +724,32 @@ var Dashboard = {
|
|||
|
||||
header.append(headerHtml);
|
||||
|
||||
$('#searchForm', header).on("submit", Dashboard.onSearchSubmit);
|
||||
|
||||
Dashboard.getPluginSecurityInfo().done(function (pluginSecurityInfo) {
|
||||
if (pluginSecurityInfo.IsMBSupporter) {
|
||||
$('<a class="imageLink" href="supporter.html"><img src="css/images/supporter/supporterbadge.png" /></a>').insertBefore('.btnTools', header);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onSearchSubmit: function() {
|
||||
|
||||
Dashboard.alert('Coming soon.');
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
getSearchHtml: function() {
|
||||
|
||||
var html = '<div class="headerSearch"><form id="searchForm" name="searchForm">';
|
||||
|
||||
html += '<input type="text" />';
|
||||
|
||||
html += '</form></div>';
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
ensureToolsMenu: function (page) {
|
||||
|
||||
|
@ -1087,16 +1110,7 @@ $(function () {
|
|||
|
||||
Dashboard.jQueryMobileInit();
|
||||
|
||||
$(document).on('pagebeforeshow', ".page", function () {
|
||||
|
||||
Dashboard.refreshSystemInfoFromServer();
|
||||
|
||||
var page = $(this);
|
||||
|
||||
Dashboard.ensureHeader(page);
|
||||
Dashboard.ensurePageTitle(page);
|
||||
|
||||
}).on('pageinit', ".page", function () {
|
||||
$(document).on('pageinit', ".page", function () {
|
||||
|
||||
var page = $(this);
|
||||
|
||||
|
@ -1120,4 +1134,14 @@ $(document).on('pagebeforeshow', ".page", function () {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
}).on('pagebeforeshow', ".page", function () {
|
||||
|
||||
Dashboard.refreshSystemInfoFromServer();
|
||||
|
||||
var page = $(this);
|
||||
|
||||
Dashboard.ensureHeader(page);
|
||||
Dashboard.ensurePageTitle(page);
|
||||
|
||||
});
|
|
@ -24,9 +24,7 @@
|
|||
|
||||
html += LibraryBrowser.getSongTableHtml(result.Items, {
|
||||
showAlbum: true,
|
||||
showArtist: true,
|
||||
center: true,
|
||||
strech: true
|
||||
showArtist: true
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue