mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
display songs in a table
This commit is contained in:
Luke Pulverenti
parent
7603892906
commit
3798443c4c
4 changed files with 157 additions and 57 deletions
|
|
@ -188,7 +188,7 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.posterDetailViewItem {
|
||||
.tileItem {
|
||||
background: #333;
|
||||
padding: 10px 10px 3px;
|
||||
margin: 3px 0;
|
||||
|
|
@ -200,30 +200,38 @@
|
|||
}
|
||||
|
||||
|
||||
.posterDetailViewItem .itemProgress {
|
||||
.tileItem .itemProgress {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.posterDetailViewItem .starRating {
|
||||
.tileItem .starRating {
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.posterDetailViewImage {
|
||||
max-height: 90px;
|
||||
max-width: 46.5%;
|
||||
.tileImage {
|
||||
height: 90px;
|
||||
width: 45%;
|
||||
display: inline-block;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
}
|
||||
|
||||
.posterDetailViewItem p {
|
||||
.defaultTileImage {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.tileItem p {
|
||||
margin: .35em 0;
|
||||
}
|
||||
|
||||
.posterDetailViewItem .imgUserItemRating {
|
||||
.tileItem .imgUserItemRating {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.posterDetailViewContentContainer {
|
||||
.tileContent {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
padding-left: 10px;
|
||||
|
|
@ -233,11 +241,11 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.posterDetailViewName {
|
||||
.tileName {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.posterDetailViewItem .userDataIcons img {
|
||||
.tileItem .userDataIcons img {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
|
@ -262,33 +270,33 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 850px) {
|
||||
.posterDetailViewItem {
|
||||
.tileItem {
|
||||
width: 46%;
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.posterDetailViewImage {
|
||||
max-height: 140px;
|
||||
.tileImage {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.posterDetailViewItem .userDataIcons img {
|
||||
.tileItem .userDataIcons img {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.posterDetailViewItem p {
|
||||
.tileItem p {
|
||||
margin: .75em 0;
|
||||
}
|
||||
|
||||
.posterDetailViewItem .itemProgress {
|
||||
.tileItem .itemProgress {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
.posterDetailViewItem {
|
||||
.tileItem {
|
||||
width: 30.6%;
|
||||
}
|
||||
|
||||
|
|
@ -298,30 +306,56 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 1440px) {
|
||||
.posterDetailViewImage {
|
||||
max-height: 170px;
|
||||
.tileImage {
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1920px) {
|
||||
.posterDetailViewItem {
|
||||
.tileItem {
|
||||
width: 31.3%;
|
||||
}
|
||||
|
||||
.posterDetailViewImage {
|
||||
max-height: 200px;
|
||||
.tileImage {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2000px) {
|
||||
.posterDetailViewItem {
|
||||
.tileItem {
|
||||
width: 23%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2540px) {
|
||||
.posterDetailViewItem {
|
||||
.tileItem {
|
||||
width: 18.75%;
|
||||
}
|
||||
}
|
||||
|
||||
.detailTable {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
min-width: 70%;
|
||||
}
|
||||
|
||||
.detailTable td {
|
||||
border-spacing: 0;
|
||||
border-top: 1px solid #444;
|
||||
border-bottom: 1px solid #444;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.detailTable th {
|
||||
border-spacing: 0;
|
||||
border-bottom: 1px solid #444;
|
||||
padding: 5px;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.detailTable .imgUserItemRating {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -205,12 +205,19 @@
|
|||
|
||||
}).done(function (result) {
|
||||
|
||||
if (item.Type == "MusicAlbum") {
|
||||
|
||||
$('#childrenContent', page).html(LibraryBrowser.getSongTableHtml(result.Items)).trigger('create');
|
||||
|
||||
} else {
|
||||
var html = LibraryBrowser.getPosterDetailViewHtml({
|
||||
items: result.Items,
|
||||
useAverageAspectRatio: true
|
||||
});
|
||||
|
||||
$('#childrenContent', page).html(html);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
if (item.Type == "Season") {
|
||||
|
|
@ -223,7 +230,7 @@
|
|||
$('#childrenTitle', page).html('Movies (' + item.ChildCount + ')');
|
||||
}
|
||||
else if (item.Type == "MusicAlbum") {
|
||||
$('#childrenTitle', page).html('Songs (' + item.ChildCount + ')');
|
||||
$('#childrenTitle', page).html('Tracks (' + item.ChildCount + ')');
|
||||
}
|
||||
else {
|
||||
$('#childrenTitle', page).html('Items (' + item.ChildCount + ')');
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@
|
|||
|
||||
ticks -= (minutes * ticksPerMinute);
|
||||
|
||||
if (minutes < 10) {
|
||||
if (minutes < 10 && hours) {
|
||||
minutes = '0' + minutes;
|
||||
}
|
||||
parts.push(minutes);
|
||||
|
|
|
|||
|
|
@ -24,76 +24,86 @@
|
|||
|
||||
var item = items[i];
|
||||
|
||||
html += '<a class="posterDetailViewItem" href="' + LibraryBrowser.getHref(item) + '">';
|
||||
var imgUrl;
|
||||
var isDefault = false;
|
||||
|
||||
html += '<a class="tileItem" href="' + LibraryBrowser.getHref(item) + '">';
|
||||
|
||||
if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
|
||||
html += "<img class='posterDetailViewImage' src='" + LibraryBrowser.getImageUrl(item, 'Backdrop', 0, {
|
||||
imgUrl = LibraryBrowser.getImageUrl(item, 'Backdrop', 0, {
|
||||
height: 198,
|
||||
width: 352
|
||||
|
||||
}) + "' />";
|
||||
});
|
||||
|
||||
}
|
||||
else if (options.preferBackdrop && item.ImageTags && item.ImageTags.Thumb) {
|
||||
|
||||
html += "<img class='posterDetailViewImage' src='" + ApiClient.getImageUrl(item.Id, {
|
||||
imgUrl = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
height: 198,
|
||||
width: 352,
|
||||
tag: item.ImageTags.Thumb
|
||||
|
||||
}) + "' />";
|
||||
});
|
||||
}
|
||||
else if (item.ImageTags && item.ImageTags.Primary) {
|
||||
|
||||
var height = 300;
|
||||
var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null;
|
||||
|
||||
html += "<img class='posterDetailViewImage' src='" + LibraryBrowser.getImageUrl(item, 'Primary', 0, {
|
||||
imgUrl = LibraryBrowser.getImageUrl(item, 'Primary', 0, {
|
||||
height: height,
|
||||
width: width
|
||||
|
||||
}) + "' />";
|
||||
});
|
||||
|
||||
}
|
||||
else if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
html += "<img class='posterDetailViewImage' src='" + LibraryBrowser.getImageUrl(item, 'Backdrop', 0, {
|
||||
|
||||
imgUrl = LibraryBrowser.getImageUrl(item, 'Backdrop', 0, {
|
||||
height: 198,
|
||||
width: 352
|
||||
|
||||
}) + "' />";
|
||||
});
|
||||
}
|
||||
else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
|
||||
|
||||
html += "<img class='posterDetailViewImage' style='background:" + defaultBackground + ";' src='css/images/items/list/audio.png' />";
|
||||
imgUrl = "css/images/items/list/audio.png";
|
||||
isDefault = true;
|
||||
}
|
||||
else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") {
|
||||
|
||||
html += "<img class='posterDetailViewImage' style='background:" + defaultBackground + ";' src='css/images/items/list/video.png' />";
|
||||
imgUrl = "css/images/items/list/video.png";
|
||||
isDefault = true;
|
||||
}
|
||||
else if (item.Type == "Person") {
|
||||
|
||||
html += "<img class='posterDetailViewImage' style='background:" + defaultBackground + ";' src='css/images/items/list/person.png' />";
|
||||
imgUrl = "css/images/items/list/person.png";
|
||||
isDefault = true;
|
||||
}
|
||||
else if (item.Type == "Artist") {
|
||||
|
||||
html += "<img class='posterDetailViewImage' style='background:" + defaultBackground + ";' src='css/images/items/list/audiocollection.png' />";
|
||||
imgUrl = "css/images/items/list/audiocollection.png";
|
||||
isDefault = true;
|
||||
}
|
||||
else if (item.MediaType == "Game") {
|
||||
|
||||
html += "<img class='posterDetailViewImage' style='background:" + defaultBackground + ";' src='css/images/items/list/game.png' />";
|
||||
imgUrl = "css/images/items/list/game.png";
|
||||
isDefault = true;
|
||||
}
|
||||
else {
|
||||
|
||||
html += "<img class='posterDetailViewImage' style='background:" + defaultBackground + ";' src='css/images/items/list/collection.png' />";
|
||||
imgUrl = "css/images/items/list/collection.png";
|
||||
isDefault = true;
|
||||
}
|
||||
|
||||
html += '<div class="posterDetailViewContentContainer">';
|
||||
var cssClass = isDefault ? "tileImage defaultTileImage" : "tileImage";
|
||||
|
||||
html += '<div class="' + cssClass + '" style="background-image: url(\'' + imgUrl + '\');"></div>';
|
||||
|
||||
html += '<div class="tileContent">';
|
||||
|
||||
if (item.SeriesName || item.Album) {
|
||||
var seriesName = item.SeriesName || item.Album;
|
||||
html += '<div class="posterDetailViewName">' + seriesName + '</div>';
|
||||
html += '<div class="tileName">' + seriesName + '</div>';
|
||||
}
|
||||
|
||||
var name = item.Name;
|
||||
|
|
@ -105,7 +115,7 @@
|
|||
name = item.ParentIndexNumber + "." + name;
|
||||
}
|
||||
|
||||
html += '<div class="posterDetailViewName">' + name + '</div>';
|
||||
html += '<div class="tileName">' + name + '</div>';
|
||||
|
||||
if (item.CommunityRating) {
|
||||
html += '<p>' + LibraryBrowser.getFiveStarRatingHtml(item) + '</p>';
|
||||
|
|
@ -152,6 +162,50 @@
|
|||
return html;
|
||||
},
|
||||
|
||||
getSongTableHtml: function (items) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<table class="detailTable">';
|
||||
|
||||
html += '<tr>';
|
||||
|
||||
html += '<th></th>';
|
||||
html += '<th>Track</th>';
|
||||
html += '<th>Duration</th>';
|
||||
html += '<th></th>';
|
||||
|
||||
html += '</tr>';
|
||||
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
var item = items[i];
|
||||
|
||||
html += '<tr>';
|
||||
|
||||
var num = item.IndexNumber;
|
||||
|
||||
if (num && item.ParentIndexNumber) {
|
||||
num = item.ParentIndexNumber + "." + num;
|
||||
}
|
||||
html += '<td>' + (num || "") + '</td>';
|
||||
|
||||
html += '<td><a href="' + LibraryBrowser.getHref(item) + '">' + (item.Name || "") + '</a></td>';
|
||||
|
||||
var time = DashboardPage.getDisplayText(item.RunTimeTicks || 0);
|
||||
|
||||
html += '<td>' + time + '</td>';
|
||||
|
||||
html += '<td>' + LibraryBrowser.getUserDataIconsHtml(item) + '</td>';
|
||||
|
||||
html += '</tr>';
|
||||
}
|
||||
|
||||
html += '</table>';
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
getHref: function (item) {
|
||||
|
||||
if (item.url) {
|
||||
|
|
@ -995,12 +1049,17 @@
|
|||
|
||||
if (item.RunTimeTicks) {
|
||||
|
||||
if (item.Type == "Audio") {
|
||||
|
||||
miscInfo.push(DashboardPage.getDisplayText(item.RunTimeTicks));
|
||||
} else {
|
||||
var minutes = item.RunTimeTicks / 600000000;
|
||||
|
||||
minutes = minutes || 1;
|
||||
|
||||
miscInfo.push(parseInt(minutes) + "min");
|
||||
}
|
||||
}
|
||||
|
||||
if (item.MediaType && item.DisplayMediaType && item.DisplayMediaType != item.Type) {
|
||||
miscInfo.push(item.DisplayMediaType);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue