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

detail page enhancements

Browse source
This commit is contained in:
Techywarrior 2013-03-26 15:53:06 -07:00
parent 7348edef90
commit 50654e4a8f
4 changed files with 43 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
dashboard-ui/css/site.css
View file

@ -74,6 +74,10 @@ pre, textarea.pre {
color: #1B58B8; color: #1B58B8;
} }
.hide {
display: none;
}
/* /*
Page / Base styles Page / Base styles
*/ */

13
dashboard-ui/itemdetails.html
View file

@ -7,6 +7,7 @@
<div id="itemDetailPage" data-role="page" class="page libraryPage" data-theme="a"> <div id="itemDetailPage" data-role="page" class="page libraryPage" data-theme="a">
<div data-role="content" style="padding-top: 0;"> <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> <h1 id="itemName" style="padding-left: 10px; margin: 0;"></h1>
<div style="padding: 10px;"> <div style="padding: 10px;">
@ -36,27 +37,27 @@
</div> </div>
</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> <h3>Media Info</h3>
<div id="mediaInfoContent"></div> <div id="mediaInfoContent"></div>
</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> <h3>Scenes</h3>
<div id="scenesContent"></div> <div id="scenesContent"></div>
</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> <h3>Special Features</h3>
<div id="specialsContent"></div> <div id="specialsContent"></div>
</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> <h3>Trailers</h3>
<div id="trailersContent"></div> <div id="trailersContent"></div>
</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> <h3>Cast & Crew</h3>
<div id="castContent"></div> <div id="castContent"></div>
</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> <h3>Gallery</h3>
<div id="galleryContent"></div> <div id="galleryContent"></div>
</div> </div>

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

@ -4,11 +4,17 @@
ItemDetailPage.reload(); 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); $('#galleryCollapsible', this).on('expand', ItemDetailPage.onGalleryExpand);
}, },
onPageHide: function () { 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); $('#galleryCollapsible', this).off('expand', ItemDetailPage.onGalleryExpand);
ItemDetailPage.item = null; ItemDetailPage.item = null;
@ -35,6 +41,9 @@
if (item.IndexNumber != null) { if (item.IndexNumber != null) {
name = item.IndexNumber + " - " + name; name = item.IndexNumber + " - " + name;
} }
if (item.ParentIndexNumber != null) {
name = item.ParentIndexNumber + "." + name;
}
Dashboard.setPageTitle(name); Dashboard.setPageTitle(name);
@ -46,21 +55,29 @@
if (!item.Chapters || !item.Chapters.length) { if (!item.Chapters || !item.Chapters.length) {
$('#scenesCollapsible', page).hide(); $('#scenesCollapsible', page).hide();
} else { } else {
$('#scenesCollapsible', page).show();
ItemDetailPage.renderScenes(item); ItemDetailPage.renderScenes(item);
} }
if (!item.LocalTrailerCount || item.LocalTrailerCount == 0) { if (!item.LocalTrailerCount || item.LocalTrailerCount == 0) {
$('#trailersCollapsible', page).hide(); $('#trailersCollapsible', page).hide();
} else { } else {
$('#trailersCollapsible', page).show();
ItemDetailPage.renderTrailers(item); ItemDetailPage.renderTrailers(item);
} }
if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0) { if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0) {
$('#specialsCollapsible', page).hide(); $('#specialsCollapsible', page).hide();
} else { } else {
$('#specialsCollapsible', page).show();
ItemDetailPage.renderSpecials(item); ItemDetailPage.renderSpecials(item);
} }
$('#itemName', page).html(name); $('#itemName', page).html(name);
if (item.SeriesName || item.Album) {
var series_name = item.SeriesName || item.Album;
$('#seriesName', page).html(series_name).show();
}
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
}, },
@ -131,7 +148,7 @@
}, },
renderOverviewBlock: function (item) { renderOverviewBlock: function (item) {
console.log(item);
var page = $.mobile.activePage; var page = $.mobile.activePage;
if (item.Taglines && item.Taglines.length) { if (item.Taglines && item.Taglines.length) {
@ -140,8 +157,13 @@
$('#itemTagline', page).hide(); $('#itemTagline', page).hide();
} }
if (item.Overview) { if (item.Overview || item.OverviewHtml) {
$('#itemOverview', page).html(item.Overview).show(); var overview = item.OverviewHtml || item.Overview;
$('#itemOverview', page).html(overview).show();
$('#itemOverview a').each(function(){
$(this).attr("target","_blank");
});
} else { } else {
$('#itemOverview', page).hide(); $('#itemOverview', page).hide();
} }
@ -305,12 +327,8 @@
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + chapter_name + '</div>'; html += '<div class="posterViewItemText posterViewItemPrimaryText">' + chapter_name + '</div>';
html += '<div class="posterViewItemText">'; html += '<div class="posterViewItemText">';
if (chapter.StartPositionTicks != "") { html += ticks_to_human(chapter.StartPositionTicks);
html += ticks_to_human(chapter.StartPositionTicks);
}
else {
html += "&nbsp;";
}
html += '</div>'; html += '</div>';
html += '</a>'; 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 += '<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, { html += '<img class="" src="' + ApiClient.getImageUrl(itemId, {
type: type, type: type,
width: lightboxWidth, maxwidth: lightboxWidth,
tag: tag, tag: tag,
index: index index: index
}) + '" />'; }) + '" />';

6
dashboard-ui/scripts/extensions.js
View file

@ -685,13 +685,15 @@ function ticks_to_human(str) {
var in_seconds = (str / 10000000); var in_seconds = (str / 10000000);
var hours = Math.floor(in_seconds/3600); 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 seconds = '0'+Math.round(in_seconds-(hours*3600)-(minutes*60));
var time = ''; var time = '';
if (hours > 0) time += hours+":"; 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; return time;
}; };