mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
detail page enhancements
This commit is contained in:
parent
7348edef90
commit
50654e4a8f
4 changed files with 43 additions and 18 deletions
|
@ -74,6 +74,10 @@ pre, textarea.pre {
|
|||
color: #1B58B8;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Page / Base styles
|
||||
*/
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
<div id="itemDetailPage" data-role="page" class="page libraryPage" data-theme="a">
|
||||
<div data-role="content" style="padding-top: 0;">
|
||||
|
||||
<h1 id="seriesName" style="padding-left: 10px; margin: 0;" class="hide"></h1>
|
||||
<h1 id="itemName" style="padding-left: 10px; margin: 0;"></h1>
|
||||
|
||||
<div style="padding: 10px;">
|
||||
|
@ -36,27 +37,27 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="collapsible" data-content-theme="a" id="mediaInfoCollapsible">
|
||||
<div data-role="collapsible" data-content-theme="a" id="mediaInfoCollapsible" class="hide">
|
||||
<h3>Media Info</h3>
|
||||
<div id="mediaInfoContent"></div>
|
||||
</div>
|
||||
<div data-role="collapsible" data-content-theme="a" id="scenesCollapsible">
|
||||
<div data-role="collapsible" data-content-theme="a" id="scenesCollapsible" class="hide">
|
||||
<h3>Scenes</h3>
|
||||
<div id="scenesContent"></div>
|
||||
</div>
|
||||
<div data-role="collapsible" data-content-theme="a" id="specialsCollapsible">
|
||||
<div data-role="collapsible" data-content-theme="a" id="specialsCollapsible" class="hide">
|
||||
<h3>Special Features</h3>
|
||||
<div id="specialsContent"></div>
|
||||
</div>
|
||||
<div data-role="collapsible" data-content-theme="a" id="trailersCollapsible">
|
||||
<div data-role="collapsible" data-content-theme="a" id="trailersCollapsible" class="hide">
|
||||
<h3>Trailers</h3>
|
||||
<div id="trailersContent"></div>
|
||||
</div>
|
||||
<div data-role="collapsible" data-content-theme="a" id="castCollapsible">
|
||||
<div data-role="collapsible" data-content-theme="a" id="castCollapsible" class="hide">
|
||||
<h3>Cast & Crew</h3>
|
||||
<div id="castContent"></div>
|
||||
</div>
|
||||
<div data-role="collapsible" data-content-theme="a" id="galleryCollapsible">
|
||||
<div data-role="collapsible" data-content-theme="a" id="galleryCollapsible" class="">
|
||||
<h3>Gallery</h3>
|
||||
<div id="galleryContent"></div>
|
||||
</div>
|
||||
|
|
|
@ -4,11 +4,17 @@
|
|||
|
||||
ItemDetailPage.reload();
|
||||
|
||||
$('#scenesCollapsible', this).on('expand', ItemDetailPage.onScenesExpand);
|
||||
$('#specialsCollapsible', this).on('expand', ItemDetailPage.onSpecialsExpand);
|
||||
$('#trailersCollapsible', this).on('expand', ItemDetailPage.onTrailersExpand);
|
||||
$('#galleryCollapsible', this).on('expand', ItemDetailPage.onGalleryExpand);
|
||||
},
|
||||
|
||||
onPageHide: function () {
|
||||
|
||||
$('#scenesCollapsible', this).off('expand', ItemDetailPage.onScenesExpand);
|
||||
$('#specialsCollapsible', this).off('expand', ItemDetailPage.onSpecialsExpand);
|
||||
$('#trailersCollapsible', this).off('expand', ItemDetailPage.onTrailersExpand);
|
||||
$('#galleryCollapsible', this).off('expand', ItemDetailPage.onGalleryExpand);
|
||||
|
||||
ItemDetailPage.item = null;
|
||||
|
@ -35,6 +41,9 @@
|
|||
if (item.IndexNumber != null) {
|
||||
name = item.IndexNumber + " - " + name;
|
||||
}
|
||||
if (item.ParentIndexNumber != null) {
|
||||
name = item.ParentIndexNumber + "." + name;
|
||||
}
|
||||
|
||||
Dashboard.setPageTitle(name);
|
||||
|
||||
|
@ -46,21 +55,29 @@
|
|||
if (!item.Chapters || !item.Chapters.length) {
|
||||
$('#scenesCollapsible', page).hide();
|
||||
} else {
|
||||
$('#scenesCollapsible', page).show();
|
||||
ItemDetailPage.renderScenes(item);
|
||||
}
|
||||
if (!item.LocalTrailerCount || item.LocalTrailerCount == 0) {
|
||||
$('#trailersCollapsible', page).hide();
|
||||
} else {
|
||||
$('#trailersCollapsible', page).show();
|
||||
ItemDetailPage.renderTrailers(item);
|
||||
}
|
||||
if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0) {
|
||||
$('#specialsCollapsible', page).hide();
|
||||
} else {
|
||||
$('#specialsCollapsible', page).show();
|
||||
ItemDetailPage.renderSpecials(item);
|
||||
}
|
||||
|
||||
$('#itemName', page).html(name);
|
||||
|
||||
if (item.SeriesName || item.Album) {
|
||||
var series_name = item.SeriesName || item.Album;
|
||||
$('#seriesName', page).html(series_name).show();
|
||||
}
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
},
|
||||
|
||||
|
@ -131,7 +148,7 @@
|
|||
},
|
||||
|
||||
renderOverviewBlock: function (item) {
|
||||
|
||||
console.log(item);
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
if (item.Taglines && item.Taglines.length) {
|
||||
|
@ -140,8 +157,13 @@
|
|||
$('#itemTagline', page).hide();
|
||||
}
|
||||
|
||||
if (item.Overview) {
|
||||
$('#itemOverview', page).html(item.Overview).show();
|
||||
if (item.Overview || item.OverviewHtml) {
|
||||
var overview = item.OverviewHtml || item.Overview;
|
||||
|
||||
$('#itemOverview', page).html(overview).show();
|
||||
$('#itemOverview a').each(function(){
|
||||
$(this).attr("target","_blank");
|
||||
});
|
||||
} else {
|
||||
$('#itemOverview', page).hide();
|
||||
}
|
||||
|
@ -305,12 +327,8 @@
|
|||
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + chapter_name + '</div>';
|
||||
html += '<div class="posterViewItemText">';
|
||||
|
||||
if (chapter.StartPositionTicks != "") {
|
||||
html += ticks_to_human(chapter.StartPositionTicks);
|
||||
}
|
||||
else {
|
||||
html += " ";
|
||||
}
|
||||
html += ticks_to_human(chapter.StartPositionTicks);
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</a>';
|
||||
|
@ -399,7 +417,7 @@
|
|||
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,
|
||||
width: lightboxWidth,
|
||||
maxwidth: lightboxWidth,
|
||||
tag: tag,
|
||||
index: index
|
||||
}) + '" />';
|
||||
|
|
|
@ -685,13 +685,15 @@ function ticks_to_human(str) {
|
|||
|
||||
var in_seconds = (str / 10000000);
|
||||
var hours = Math.floor(in_seconds/3600);
|
||||
var minutes = '0'+Math.floor((in_seconds-(hours*3600))/60);
|
||||
var minutes = Math.floor((in_seconds-(hours*3600))/60);
|
||||
var seconds = '0'+Math.round(in_seconds-(hours*3600)-(minutes*60));
|
||||
|
||||
var time = '';
|
||||
|
||||
if (hours > 0) time += hours+":";
|
||||
time += minutes.substr(-2) + ":" +seconds.substr(-2);
|
||||
if (minutes < 10 && hours == 0) time += minutes;
|
||||
else time += ('0'+minutes).substr(-2);
|
||||
time += ":" + seconds.substr(-2);
|
||||
|
||||
return time;
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue