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

rework detail page a little

This commit is contained in:
Luke Pulverenti 2015-02-02 23:54:52 -05:00
parent 0eb55addaa
commit 911880340e
28 changed files with 464 additions and 179 deletions

View file

@ -299,6 +299,10 @@
var commands = [];
if (BoxSetEditor.supportsAddingToCollection(item)) {
commands.push('addtocollection');
}
if (PlaylistManager.supportsPlaylists(item)) {
commands.push('playlist');
}
@ -377,6 +381,10 @@
html += '<ul data-role="listview" style="min-width: 180px;">';
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
if (commands.indexOf('addtocollection') != -1) {
html += '<li><a href="#" onclick="$(\'.playFlyout\').popup(\'close\');BoxSetEditor.showPanel([\'' + itemId + '\']);">' + Globalize.translate('ButtonAddToCollection') + '</a></li>';
}
if (commands.indexOf('playlist') != -1) {
html += '<li><a href="#" onclick="$(\'.playFlyout\').popup(\'close\');PlaylistManager.showPanel([\'' + itemId + '\']);">' + Globalize.translate('ButtonAddToPlaylist') + '</a></li>';
}
@ -2118,13 +2126,13 @@
var url;
var imageHeight = 280;
var imageHeight = 360;
if (preferThumb && imageTags.Thumb) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
maxHeight: imageHeight,
height: imageHeight,
tag: item.ImageTags.Thumb
});
}
@ -2132,7 +2140,7 @@
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Primary",
maxHeight: imageHeight,
height: imageHeight,
tag: item.ImageTags.Primary
});
}
@ -2140,7 +2148,7 @@
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
maxHeight: imageHeight,
height: imageHeight,
tag: item.BackdropImageTags[0]
});
}
@ -2148,7 +2156,7 @@
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
maxHeight: imageHeight,
height: imageHeight,
tag: item.ImageTags.Thumb
});
}
@ -2156,7 +2164,7 @@
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Disc",
maxHeight: imageHeight,
height: imageHeight,
tag: item.ImageTags.Disc
});
}
@ -2164,7 +2172,7 @@
url = ApiClient.getScaledImageUrl(item.AlbumId, {
type: "Primary",
maxHeight: imageHeight,
height: imageHeight,
tag: item.AlbumPrimaryImageTag
});
@ -2218,6 +2226,175 @@
return html;
},
renderDetailImage: function (elem, item, href, preferThumb) {
var imageTags = item.ImageTags || {};
if (item.PrimaryImageTag) {
imageTags.Primary = item.PrimaryImageTag;
}
var html = '';
var url;
var shape = 'portrait';
var imageHeight = 360;
var detectRatio = false;
if (preferThumb && imageTags.Thumb) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
height: imageHeight,
tag: item.ImageTags.Thumb
});
shape = 'thumb';
}
else if (imageTags.Primary) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Primary",
height: imageHeight,
tag: item.ImageTags.Primary
});
detectRatio = true;
}
else if (item.BackdropImageTags && item.BackdropImageTags.length) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
height: imageHeight,
tag: item.BackdropImageTags[0]
});
shape = 'thumb';
}
else if (imageTags.Thumb) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
height: imageHeight,
tag: item.ImageTags.Thumb
});
shape = 'thumb';
}
else if (imageTags.Disc) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Disc",
height: imageHeight,
tag: item.ImageTags.Disc
});
shape = 'square';
}
else if (item.AlbumId && item.AlbumPrimaryImageTag) {
url = ApiClient.getScaledImageUrl(item.AlbumId, {
type: "Primary",
height: imageHeight,
tag: item.AlbumPrimaryImageTag
});
shape = 'square';
}
else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicGenre") {
url = "css/images/items/detail/audio.png";
shape = 'square';
}
else if (item.MediaType == "Game" || item.Type == "GameGenre") {
url = "css/images/items/detail/game.png";
shape = 'square';
}
else if (item.Type == "Person") {
url = "css/images/items/detail/person.png";
shape = 'square';
}
else if (item.Type == "Genre" || item.Type == "Studio") {
url = "css/images/items/detail/video.png";
shape = 'square';
}
else if (item.Type == "TvChannel") {
url = "css/images/items/detail/tv.png";
shape = 'square';
}
else {
url = "css/images/items/detail/video.png";
shape = 'square';
}
if (!href) {
href = "itemgallery.html?id=" + item.Id;
}
var linkToGallery = LibraryBrowser.shouldDisplayGallery(item);
html += '<div style="position:relative;">';
if (linkToGallery) {
html += "<a class='itemDetailGalleryLink' href='" + href + "'>";
}
if (detectRatio && item.PrimaryImageAspectRatio) {
if (Math.abs(item.PrimaryImageAspectRatio - 1.777777778) < .3) {
shape = 'thumb';
} else if (Math.abs(item.PrimaryImageAspectRatio - 1) < .2) {
shape = 'square';
}
}
var imgCssClass = 'itemDetailImage';
if (shape == 'thumb') {
imgCssClass += ' thumbDetailImage';
}
else if (shape == 'square') {
imgCssClass += ' squareDetailImage';
} else {
imgCssClass += ' portraitDetailImage';
}
html += "<img class='" + imgCssClass + "' src='" + url + "' />";
if (linkToGallery) {
html += "</a>";
}
var progressHtml = item.IsFolder ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
if (progressHtml) {
html += '<div class="detailImageProgressContainer">';
html += progressHtml;
html += "</div>";
}
html += "</div>";
elem.html(html);
var page = $(elem).parents('.page');
var detailContentEffectedByImage = $('.detailContentEffectedByImage', page);
if (shape == 'thumb') {
detailContentEffectedByImage.addClass('detailContentEffectedByThumbImage');
detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
detailContentEffectedByImage.addClass('detailContentEffectedByThumbImage');
detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
}
else if (shape == 'square') {
detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage');
detailContentEffectedByImage.addClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
} else {
detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage');
detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.addClass('detailContentEffectedByPortraitImage');
}
},
getMiscInfoHtml: function (item) {
var miscInfo = [];