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

display songs in a table

Browse source
This commit is contained in:
Luke Pulverenti 2013-04-22 16:06:43 -04:00
parent 7603892906
commit 3798443c4c
4 changed files with 157 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

84
dashboard-ui/css/librarybrowser.css
View file

@ -188,7 +188,7 @@
font-weight: bold; font-weight: bold;
} }
.posterDetailViewItem { .tileItem {
background: #333; background: #333;
padding: 10px 10px 3px; padding: 10px 10px 3px;
margin: 3px 0; margin: 3px 0;
@ -200,30 +200,38 @@
} }
.posterDetailViewItem .itemProgress { .tileItem .itemProgress {
font-size: 14px; font-size: 14px;
} }
.posterDetailViewItem .starRating { .tileItem .starRating {
width: 15px; width: 15px;
height: 13px; height: 13px;
} }
.posterDetailViewImage { .tileImage {
max-height: 90px; height: 90px;
max-width: 46.5%; 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; margin: .35em 0;
} }
.posterDetailViewItem .imgUserItemRating { .tileItem .imgUserItemRating {
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
.posterDetailViewContentContainer { .tileContent {
display: inline-block; display: inline-block;
width: 50%; width: 50%;
padding-left: 10px; padding-left: 10px;
@ -233,11 +241,11 @@
overflow: hidden; overflow: hidden;
} }
.posterDetailViewName { .tileName {
font-weight: bold; font-weight: bold;
} }
.posterDetailViewItem .userDataIcons img { .tileItem .userDataIcons img {
height: 14px; height: 14px;
width: 14px; width: 14px;
} }
@ -262,33 +270,33 @@
} }
@media all and (min-width: 850px) { @media all and (min-width: 850px) {
.posterDetailViewItem { .tileItem {
width: 46%; width: 46%;
display: inline-block; display: inline-block;
margin-left: 3px; margin-left: 3px;
margin-right: 3px; margin-right: 3px;
} }
.posterDetailViewImage { .tileImage {
max-height: 140px; height: 140px;
} }
.posterDetailViewItem .userDataIcons img { .tileItem .userDataIcons img {
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
.posterDetailViewItem p { .tileItem p {
margin: .75em 0; margin: .75em 0;
} }
.posterDetailViewItem .itemProgress { .tileItem .itemProgress {
font-size: 17px; font-size: 17px;
} }
} }
@media all and (min-width: 1200px) { @media all and (min-width: 1200px) {
.posterDetailViewItem { .tileItem {
width: 30.6%; width: 30.6%;
} }
@ -298,30 +306,56 @@
} }
@media all and (min-width: 1440px) { @media all and (min-width: 1440px) {
.posterDetailViewImage { .tileImage {
max-height: 170px; height: 170px;
} }
} }
@media all and (min-width: 1920px) { @media all and (min-width: 1920px) {
.posterDetailViewItem { .tileItem {
width: 31.3%; width: 31.3%;
} }
.posterDetailViewImage { .tileImage {
max-height: 200px; height: 200px;
} }
} }
@media all and (min-width: 2000px) { @media all and (min-width: 2000px) {
.posterDetailViewItem { .tileItem {
width: 23%; width: 23%;
} }
} }
@media all and (min-width: 2540px) { @media all and (min-width: 2540px) {
.posterDetailViewItem { .tileItem {
width: 18.75%; 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;
}

19
dashboard-ui/scripts/Itemdetailpage.js
View file

@ -205,12 +205,19 @@
}).done(function (result) { }).done(function (result) {
var html = LibraryBrowser.getPosterDetailViewHtml({ if (item.Type == "MusicAlbum") {
items: result.Items,
useAverageAspectRatio: true
});
$('#childrenContent', page).html(html); $('#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") { if (item.Type == "Season") {
@ -223,7 +230,7 @@
$('#childrenTitle', page).html('Movies (' + item.ChildCount + ')'); $('#childrenTitle', page).html('Movies (' + item.ChildCount + ')');
} }
else if (item.Type == "MusicAlbum") { else if (item.Type == "MusicAlbum") {
$('#childrenTitle', page).html('Songs (' + item.ChildCount + ')'); $('#childrenTitle', page).html('Tracks (' + item.ChildCount + ')');
} }
else { else {
$('#childrenTitle', page).html('Items (' + item.ChildCount + ')'); $('#childrenTitle', page).html('Items (' + item.ChildCount + ')');

2
dashboard-ui/scripts/dashboardpage.js
View file

@ -224,7 +224,7 @@
ticks -= (minutes * ticksPerMinute); ticks -= (minutes * ticksPerMinute);
if (minutes < 10) { if (minutes < 10 && hours) {
minutes = '0' + minutes; minutes = '0' + minutes;
} }
parts.push(minutes); parts.push(minutes);

109
dashboard-ui/scripts/librarybrowser.js
View file

@ -24,76 +24,86 @@
var item = items[i]; 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) { 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, height: 198,
width: 352 width: 352
});
}) + "' />";
} }
else if (options.preferBackdrop && item.ImageTags && item.ImageTags.Thumb) { 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", type: "Thumb",
height: 198, height: 198,
width: 352, width: 352,
tag: item.ImageTags.Thumb tag: item.ImageTags.Thumb
});
}) + "' />";
} }
else if (item.ImageTags && item.ImageTags.Primary) { else if (item.ImageTags && item.ImageTags.Primary) {
var height = 300; var height = 300;
var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null; 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, height: height,
width: width width: width
});
}) + "' />";
} }
else if (item.BackdropImageTags && item.BackdropImageTags.length) { 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, height: 198,
width: 352 width: 352
});
}) + "' />";
} }
else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") { 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") { 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") { 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") { 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") { 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 { 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) { if (item.SeriesName || item.Album) {
var seriesName = 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; var name = item.Name;
@ -105,7 +115,7 @@
name = item.ParentIndexNumber + "." + name; name = item.ParentIndexNumber + "." + name;
} }
html += '<div class="posterDetailViewName">' + name + '</div>'; html += '<div class="tileName">' + name + '</div>';
if (item.CommunityRating) { if (item.CommunityRating) {
html += '<p>' + LibraryBrowser.getFiveStarRatingHtml(item) + '</p>'; html += '<p>' + LibraryBrowser.getFiveStarRatingHtml(item) + '</p>';
@ -152,6 +162,50 @@
return html; 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) { getHref: function (item) {
if (item.url) { if (item.url) {
@ -995,11 +1049,16 @@
if (item.RunTimeTicks) { if (item.RunTimeTicks) {
var minutes = item.RunTimeTicks / 600000000; if (item.Type == "Audio") {
minutes = minutes || 1; miscInfo.push(DashboardPage.getDisplayText(item.RunTimeTicks));
} else {
var minutes = item.RunTimeTicks / 600000000;
miscInfo.push(parseInt(minutes) + "min"); minutes = minutes || 1;
miscInfo.push(parseInt(minutes) + "min");
}
} }
if (item.MediaType && item.DisplayMediaType && item.DisplayMediaType != item.Type) { if (item.MediaType && item.DisplayMediaType && item.DisplayMediaType != item.Type) {