cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 10:58:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

better detail page context

Browse Source
This commit is contained in:
Luke Pulverenti 2013-04-22 10:44:11 -04:00
parent 7304a6584e
commit dd808d8298
12 changed files with 302 additions and 798 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
dashboard-ui/boxset.html
View File

@ -1,60 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="boxsetPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
<img src="css/images/mblogoicon.png"></a>Movies</h1>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="moviesrecommended.html" data-role="button">Suggested</a>
<a href="movies.html" data-role="button">Movies</a>
<a href="boxsets.html" data-role="button" class="ui-btn-active">Box Sets</a>
<a href="movietrailers.html" data-role="button">Trailers</a>
<a href="moviegenres.html" data-role="button">Genres</a>
<a href="moviepeople.html" data-role="button">People</a>
<a href="moviestudios.html" data-role="button">Studios</a>
</div>
<div class="detailPagePrimaryInfo">
<div class="itemImageBlock">
<div id="itemMedia" style="position: relative;">
<div id="itemImage"></div>
</div>
</div>
<div class="itemDetailBlock">
<h1 id="itemName" class="detailPageName"></h1>
<p id="itemTagline" style="font-style: italic;"></p>
<p id="itemOverview"></p>
<p id="itemRatings"></p>
<p id="itemCommunityRating"></p>
<p id="itemMiscInfo" class="itemMiscInfo"></p>
<p id="itemGenres"></p>
<p id="itemStudios"></p>
<p id="itemLinks"></p>
</div>
</div>
<div data-role="collapsible" id="moviesCollapsible" data-mini="true">
<h3><span class="collapsibleTitle">Titles</span></h3>
<div id="moviesContent"></div>
</div>
<div data-role="collapsible" id="trailersCollapsible" class="hide" data-mini="true">
<h3><span class="collapsibleTitle">Trailers</span></h3>
<div id="trailersContent"></div>
</div>
<div data-role="collapsible" id="galleryCollapsible" data-mini="true">
<h3>Gallery</h3>
<div id="galleryContent"></div>
</div>
</div>
</div>
</body>
</html>

21
dashboard-ui/css/librarybrowser.css
View File

@ -89,6 +89,11 @@
/*.libraryPage:not(.folderListPage) > .ui-content, .libraryPage:not(.folderListPage) > .ui-panel-content-wrap {
margin-top: -35px!important;
}*/
.detailPageContent {
width: 90%;
margin: 0 auto;
}
}
@media all and (min-width: 1200px) {
@ -106,6 +111,10 @@
.ehsContent {
max-width: 900px;
}
.detailPageContent {
width: 70%;
}
}
@media all and (min-width: 1920px) {
@ -148,12 +157,12 @@
border-bottom: 1px solid #555;
padding-bottom: 5px;
margin-bottom: .5em;
font-weight: bold;
}
.mediaInfoDetails {
margin: 0 0 0 2em;
margin: 0 0 0 1.5em;
padding: 0;
list-style-type: circle;
}
.mediaInfoLabel {
@ -237,6 +246,10 @@
margin: 1em 0 1.5em;
}
.scenePosterViewItem img {
max-width: 150px!important;
}
@media all and (min-width: 650px) {
.detailPagePrimaryInfo {
padding: 0 10px;
@ -278,6 +291,10 @@
.posterDetailViewItem {
width: 31%;
}
.scenePosterViewItem img {
max-width: 200px!important;
}
}
@media all and (min-width: 1440px) {

19
dashboard-ui/css/site.css
View File

@ -660,7 +660,6 @@ progress {
.itemDetailImage {
max-width: 100%;
max-height: 300px;
}
.itemImageBlock {
@ -712,8 +711,8 @@ progress {
display: inline-block;
}
.itemDetailImage, .itemImageBlock {
max-width: 220px;
.itemDetailImage {
width: 220px;
}
.itemDetailBlock {
@ -731,11 +730,7 @@ progress {
@media all and (min-width: 750px) {
.itemDetailImage {
max-height: 400px;
}
.itemDetailImage, .itemImageBlock {
max-width: 300px;
width: 300px;
}
.itemDetailBlock {
@ -753,10 +748,6 @@ progress {
@media all and (min-width: 1200px) {
.itemDetailBlock {
width: 70%;
}
.galleryImage {
width: 200px;
}
@ -764,8 +755,8 @@ progress {
@media all and (min-width: 1440px) {
.itemDetailImage, .itemImageBlock {
max-width: 400px;
.itemDetailImage {
width: 400px;
}
.itemDetailBlock {

189
dashboard-ui/itemdetails.html
View File

@ -4,71 +4,146 @@
<title></title>
</head>
<body>
<div id="itemDetailPage" data-role="page" class="page libraryPage" data-theme="a">
<div id="itemDetailPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
<div id="genericHeader" class="header">
<a class="logo" href="index.html" id="standardLogo" style="display: none;">
<img class="imgLogoIcon" src="css/images/mblogoicon.png"><img class="imgLogoText" src="css/images/mblogotextwhite.png"></a>
</div>
<h1 class="libraryPageHeader" style="display: none;"><a href="index.html" class="imageLink">
<img src="css/images/mblogoicon.png"></a><span></span></h1>
<div data-role="content">
<div id="movieTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="moviesrecommended.html" data-role="button">Suggested</a>
<a href="movies.html" data-role="button" class="ui-btn-active">Movies</a>
<a href="boxsets.html" data-role="button">Box Sets</a>
<a href="movietrailers.html" data-role="button">Trailers</a>
<a href="moviegenres.html" data-role="button">Genres</a>
<a href="moviepeople.html" data-role="button">People</a>
<a href="moviestudios.html" data-role="button">Studios</a>
</div>
</div>
<div id="boxsetTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="moviesrecommended.html" data-role="button">Suggested</a>
<a href="movies.html" data-role="button">Movies</a>
<a href="boxsets.html" data-role="button" class="ui-btn-active">Box Sets</a>
<a href="movietrailers.html" data-role="button">Trailers</a>
<a href="moviegenres.html" data-role="button">Genres</a>
<a href="moviepeople.html" data-role="button">People</a>
<a href="moviestudios.html" data-role="button">Studios</a>
</div>
</div>
<div id="trailerTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="moviesrecommended.html" data-role="button">Suggested</a>
<a href="movies.html" data-role="button">Movies</a>
<a href="boxsets.html" data-role="button">Box Sets</a>
<a href="movietrailers.html" data-role="button" class="ui-btn-active">Trailers</a>
<a href="moviegenres.html" data-role="button">Genres</a>
<a href="moviepeople.html" data-role="button">People</a>
<a href="moviestudios.html" data-role="button">Studios</a>
</div>
</div>
<div id="tvShowsTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="tvrecommended.html" data-role="button">Suggested</a>
<a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a>
<a href="tvgenres.html" data-role="button">Genres</a>
<a href="tvpeople.html" data-role="button">Actors</a>
<a href="tvstudios.html" data-role="button">Networks</a>
</div>
</div>
<div id="songTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="musicrecommended.html" data-role="button">Suggested</a>
<a href="#" data-role="button" class="ui-btn-active">Songs</a>
<a href="musicalbums.html" data-role="button">Albums</a>
<a href="musicartists.html" data-role="button">Artists</a>
<a href="musicgenres.html" data-role="button">Genres</a>
</div>
</div>
<div class="detailPageContent">
<div class="detailPagePrimaryInfo">
<div class="itemImageBlock">
<div id="itemMedia" style="position: relative;">
<div id="itemImage"></div>
<div class="detailPagePrimaryInfo">
<div class="itemImageBlock">
<div id="itemMedia" style="position: relative;">
<div id="itemImage"></div>
<div id="playButtonShadow" style="display: none; height: 48px; position: absolute; bottom: 0; left: 0; right: 0; background: black; opacity: .75;"></div>
<button id="btnPlayMenu" type="button" class="imageButton" style="display: none; position: absolute; bottom: 5px; left: 10px;" data-role="none" title="Play">
<img src="css/images/media/playCircle.png" style="height: 28px;" />
</button>
<div id="playButtonShadow" style="display: none; height: 48px; position: absolute; bottom: 0; left: 0; right: 0; background: black; opacity: .75;"></div>
<button id="btnPlayMenu" type="button" class="imageButton" style="display: none; position: absolute; bottom: 5px; left: 10px;" data-role="none" title="Play">
<img src="css/images/media/playCircle.png" style="height: 28px;" />
</button>
<button id="btnQueueMenu" type="button" class="imageButton" style="display: none; position: absolute; bottom: 5px; left: 50px;" data-role="none" title="Queue">
<img src="css/images/media/queue.png" style="height: 28px;" />
</button>
</div>
<div id="playMenuAnchor"></div>
<div id="queueMenuAnchor"></div>
<button id="btnQueueMenu" type="button" class="imageButton" style="display: none; position: absolute; bottom: 5px; left: 50px;" data-role="none" title="Queue">
<img src="css/images/media/queue.png" style="height: 28px;" />
</button>
</div>
<div id="playMenuAnchor"></div>
<div id="queueMenuAnchor"></div>
<div class="itemDetailBlock">
<h1 id="seriesName" class="detailPageName hide"></h1>
<h1 id="itemName" class="detailPageName"></h1>
<p id="itemTagline" style="font-style: italic;"></p>
<p id="itemOverview"></p>
<p id="itemRatings"></p>
<p id="itemCommunityRating"></p>
<p id="itemMiscInfo" class="itemMiscInfo"></p>
<p id="itemPremiereDate"></p>
<p id="itemBudget"></p>
<p id="itemRevenue"></p>
<p id="itemGenres"></p>
<p id="itemStudios"></p>
<p id="itemLinks"></p>
</div>
</div>
<div class="itemDetailBlock">
<h1 id="seriesName" class="detailPageName hide"></h1>
<h1 id="itemName" class="detailPageName"></h1>
<p id="itemTagline" style="font-style: italic;"></p>
<p id="itemOverview"></p>
<p id="itemRatings"></p>
<p id="itemCommunityRating"></p>
<p id="itemMiscInfo" class="itemMiscInfo"></p>
<p id="itemPremiereDate"></p>
<p id="itemBudget"></p>
<p id="itemRevenue"></p>
<p id="itemGenres"></p>
<p id="itemStudios"></p>
<p id="itemLinks"></p>
<div style="vertical-align: top;">
<div data-role="collapsible" id="childrenCollapsible" class="hide" data-mini="true" data-collapsed="false" data-corners="false">
<h3><span id="childrenTitle" class="collapsibleTitle"></span></h3>
<div id="childrenContent"></div>
</div>
</div>
<div style="display: inline-block; vertical-align: top;">
<div data-role="collapsible" id="mediaInfoCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Media Info</h3>
<div id="mediaInfoContent"></div>
</div>
</div>
<div style="display: inline-block; vertical-align: top;">
<div data-role="collapsible" id="trailersCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Trailers</h3>
<div id="trailersContent"></div>
</div>
</div>
<div style="display: inline-block; vertical-align: top;">
<div data-role="collapsible" id="specialsCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Special Features</h3>
<div id="specialsContent"></div>
</div>
</div>
<div style="display: inline-block; vertical-align: top;">
<div data-role="collapsible" id="galleryCollapsible" style="display: none;" data-collapsed="false" data-corners="false">
<h3>Gallery</h3>
<div id="galleryContent"></div>
</div>
</div>
<div style="display: inline-block; vertical-align: top;">
<div data-role="collapsible" id="scenesCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Scenes</h3>
<div id="scenesContent"></div>
</div>
</div>
<div style="display: inline-block; vertical-align: top;">
<div data-role="collapsible" id="castCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Cast & Crew</h3>
<div id="castContent"></div>
</div>
</div>
</div>
<div data-role="collapsible" id="mediaInfoCollapsible" class="hide" data-mini="true">
<h3>Media Info</h3>
<div id="mediaInfoContent"></div>
</div>
<div data-role="collapsible" id="scenesCollapsible" class="hide" data-mini="true">
<h3>Scenes</h3>
<div id="scenesContent"></div>
</div>
<div data-role="collapsible" id="specialsCollapsible" class="hide" data-mini="true">
<h3>Special Features</h3>
<div id="specialsContent"></div>
</div>
<div data-role="collapsible" id="trailersCollapsible" class="hide" data-mini="true">
<h3>Trailers</h3>
<div id="trailersContent"></div>
</div>
<div data-role="collapsible" id="castCollapsible" class="hide" data-mini="true">
<h3>Cast & Crew</h3>
<div id="castContent"></div>
</div>
<div data-role="collapsible" id="galleryCollapsible" data-mini="true">
<h3>Gallery</h3>
<div id="galleryContent"></div>
</div>
<div data-role="popup" id="playMenu" data-corners="false" data-theme="c">

180
dashboard-ui/scripts/Itemdetailpage.js
View File

@ -12,6 +12,8 @@
currentItem = item;
renderHeader(page, item);
var name = item.Name;
if (item.IndexNumber != null) {
@ -29,11 +31,11 @@
if (item.SeriesName) {
$('#seriesName', page).html('<a class="detailPageParentLink" href="tvseries.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>').show().trigger('create');
$('#seriesName', page).html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>').show().trigger('create');
}
else if (item.Album) {
$('#seriesName', page).html(item.Album).show();
} else {
$('#seriesName', page).hide();
}
@ -45,51 +47,117 @@
$('#btnPlayMenu', page).show();
$('#playButtonShadow', page).show();
if (MediaPlayer.isPlaying())
$('#btnQueueMenu', page).show();
else
$('#btnQueueMenu', page).hide();
$('#btnQueueMenu', page).show();
else
$('#btnQueueMenu', page).hide();
} else {
$('#btnPlayMenu', page).hide();
$('#playButtonShadow', page).hide();
$('#btnQueueMenu', page).hide();
}
if (LibraryBrowser.shouldDisplayGallery(item)) {
$('#galleryCollapsible', page).show();
} else {
$('#galleryCollapsible', page).hide();
}
Dashboard.hideLoadingMsg();
});
}
function enableCustomHeader(page, text) {
var elem = $('.libraryPageHeader', page).show();
$('span', elem).html(text);
}
function renderHeader(page, item) {
if (item.Type == "Movie" || item.Type == "Trailer" || item.Type == "BoxSet") {
enableCustomHeader(page, "Movies");
$('#standardLogo', page).hide();
}
else if (item.Type == "Episode" || item.Type == "Season" || item.Type == "Series") {
enableCustomHeader(page, "TV Shows");
$('#standardLogo', page).hide();
}
else if (item.Type == "Audio") {
enableCustomHeader(page, "Music");
$('#standardLogo', page).hide();
}
else {
$('.libraryPageHeader', page).hide();
$('#standardLogo', page).show();
}
if (item.Type == "Audio") {
$('#songTabs', page).show();
} else {
$('#songTabs', page).hide();
}
if (item.Type == "Movie") {
$('#movieTabs', page).show();
} else {
$('#movieTabs', page).hide();
}
if (item.Type == "BoxSet") {
$('#boxsetTabs', page).show();
} else {
$('#boxsetTabs', page).hide();
}
if (item.Type == "Trailer") {
$('#trailerTabs', page).show();
} else {
$('#trailerTabs', page).hide();
}
if (item.Type == "Episode" || item.Type == "Season" || item.Type == "Series") {
$('#tvShowsTabs', page).show();
} else {
$('#tvShowsTabs', page).hide();
}
}
function setInitialCollapsibleState(page, item) {
if (item.ChildCount) {
$('#childrenCollapsible', page).show();
renderChildren(page, item);
} else {
$('#childrenCollapsible', page).hide();
}
if (LibraryBrowser.shouldDisplayGallery(item)) {
$('#galleryCollapsible', page).show();
renderGallery(page, item);
} else {
$('#galleryCollapsible', page).hide();
}
if (!item.MediaStreams || !item.MediaStreams.length) {
$('#mediaInfoCollapsible', page).hide();
} else {
$('#mediaInfoCollapsible', page).show();
renderMediaInfo(page, item);
}
if (!item.Chapters || !item.Chapters.length) {
$('#scenesCollapsible', page).hide();
} else {
$('#scenesCollapsible', page).show();
renderScenes(page, item);
}
if (!item.LocalTrailerCount || item.LocalTrailerCount == 0) {
$('#trailersCollapsible', page).hide();
} else {
$('#trailersCollapsible', page).show();
renderTrailers(page, item);
}
if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0) {
$('#specialsCollapsible', page).hide();
} else {
$('#specialsCollapsible', page).show();
renderSpecials(page, item);
}
if (!item.People || !item.People.length) {
$('#castCollapsible', page).hide();
} else {
$('#castCollapsible', page).show();
renderCast(page, item);
}
}
@ -121,6 +189,37 @@
LibraryBrowser.renderLinks($('#itemLinks', page), item);
}
function renderChildren(page, item) {
ApiClient.getItems(Dashboard.getCurrentUserId(), {
ParentId: getParameterByName('id'),
SortBy: "SortName",
Fields: "PrimaryImageAspectRatio,ItemCounts,DisplayMediaType,DateCreated,UserData"
}).done(function (result) {
var html = LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
});
$('#childrenContent', page).html(html);
});
if (item.Type == "Season") {
$('#childrenTitle', page).html('Episodes (' + item.ChildCount + ')');
}
else if (item.Type == "Series") {
$('#childrenTitle', page).html('Seasons (' + item.ChildCount + ')');
}
else if (item.Type == "BoxSet") {
$('#childrenTitle', page).html('Movies (' + item.ChildCount + ')');
}
else {
$('#childrenTitle', page).html('Items (' + item.ChildCount + ')');
}
}
function renderUserDataIcons(page, item) {
$('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
}
@ -135,13 +234,13 @@
var chapter = chapters[i];
var chapterName = chapter.Name || "Chapter " + i;
html += '<div class="posterViewItem posterViewItemWithDualText">';
html += '<div class="scenePosterViewItem posterViewItem posterViewItemWithDualText">';
html += '<a href="#play-Chapter-' + i + '" onclick="ItemDetailPage.play(' + chapter.StartPositionTicks + ');">';
if (chapter.ImageTag) {
var imgUrl = ApiClient.getImageUrl(item.Id, {
width: 500,
width: 400,
tag: chapter.ImageTag,
type: "Chapter",
index: i
@ -259,8 +358,6 @@
}
$('#mediaInfoContent', page).html(html).trigger('create');
$('#mediaInfoCollapsible', page).show();
}
function renderSpecials(page, item) {
@ -366,9 +463,9 @@
for (var i = 0, length = casts.length; i < length; i++) {
var cast = casts[i];
var cast = casts[i];
html += LibraryBrowser.createCastImage(cast);
html += LibraryBrowser.createCastImage(cast);
}
$('#castContent', page).html(html);
@ -439,58 +536,9 @@
reload(page);
$('#mediaInfoCollapsible', page).on('expand.lazyload', function () {
renderMediaInfo(page, currentItem);
$(this).off('expand.lazyload');
});
$('#scenesCollapsible', page).on('expand.lazyload', function () {
if (currentItem) {
renderScenes(page, currentItem);
$(this).off('expand.lazyload');
}
});
$('#specialsCollapsible', page).on('expand.lazyload', function () {
renderSpecials(page, currentItem);
$(this).off('expand.lazyload');
});
$('#trailersCollapsible', page).on('expand.lazyload', function () {
renderTrailers(page, currentItem);
$(this).off('expand.lazyload');
});
$('#castCollapsible', page).on('expand.lazyload', function () {
renderCast(page, currentItem);
$(this).off('expand.lazyload');
});
$('#galleryCollapsible', page).on('expand.lazyload', function () {
renderGallery(page, currentItem);
$(this).off('expand.lazyload');
});
}).on('pagehide', "#itemDetailPage", function () {
currentItem = null;
var page = this;
$('#mediaInfoCollapsible', page).off('expand.lazyload');
$('#scenesCollapsible', page).off('expand.lazyload');
$('#specialsCollapsible', page).off('expand.lazyload');
$('#trailersCollapsible', page).off('expand.lazyload');
$('#castCollapsible', page).off('expand.lazyload');
$('#galleryCollapsible', page).off('expand.lazyload');
});
function itemDetailPage() {

121
dashboard-ui/scripts/boxset.js
View File

@ -1,121 +0,0 @@
(function ($, document, LibraryBrowser) {
var currentItem;
function reload(page) {
var id = getParameterByName('id');
Dashboard.showLoadingMsg();
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
currentItem = item;
var name = item.Name;
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
Dashboard.setPageTitle(name);
$('#itemName', page).html(name);
renderDetails(page, item);
if (LibraryBrowser.shouldDisplayGallery(item)) {
$('#galleryCollapsible', page).show();
} else {
$('#galleryCollapsible', page).hide();
}
$('#moviesCollapsible .collapsibleTitle', page).html('Titles (' + item.ChildCount + ')');
Dashboard.hideLoadingMsg();
});
}
function renderDetails(page, item) {
if (item.Taglines && item.Taglines.length) {
$('#itemTagline', page).html(item.Taglines[0]).show();
} else {
$('#itemTagline', page).hide();
}
LibraryBrowser.renderOverview($('#itemOverview', page), item);
if (item.CommunityRating) {
$('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating);
} else {
$('#itemCommunityRating', page).hide();
}
$('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
LibraryBrowser.renderGenres($('#itemGenres', page), item);
LibraryBrowser.renderStudios($('#itemStudios', page), item);
renderUserDataIcons(page, item);
LibraryBrowser.renderLinks($('#itemLinks', page), item);
}
function renderUserDataIcons(page, item) {
$('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
}
function renderMovies(page) {
ApiClient.getItems(Dashboard.getCurrentUserId(), {
ParentId: getParameterByName('id'),
SortBy: "SortName",
Fields: "PrimaryImageAspectRatio,ItemCounts,DisplayMediaType,DateCreated,UserData"
}).done(function (result) {
var html = LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
});
$('#moviesContent', page).html(html);
});
}
function renderGallery(page, item) {
var html = LibraryBrowser.getGalleryHtml(item);
$('#galleryContent', page).html(html).trigger('create');
}
$(document).on('pageshow', "#boxsetPage", function () {
var page = this;
reload(page);
$('#moviesCollapsible', page).on('expand.lazyload', function () {
renderMovies(page);
$(this).off('expand.lazyload');
});
$('#galleryCollapsible', page).on('expand.lazyload', function () {
renderGallery(page, currentItem);
$(this).off('expand.lazyload');
});
}).on('pagehide', "#boxsetPage", function () {
var page = this;
$('#moviesCollapsible', page).off('expand.lazyload');
$('#galleryCollapsible', page).off('expand.lazyload');
});
})(jQuery, document, LibraryBrowser);

14
dashboard-ui/scripts/librarybrowser.js
View File

@ -159,13 +159,13 @@
}
if (item.Type == "Series") {
return "tvseries.html?id=" + item.Id;
return "itemdetails.html?id=" + item.Id;
}
if (item.Type == "Season") {
return "tvseason.html?id=" + item.Id;
return "itemdetails.html?id=" + item.Id;
}
if (item.Type == "BoxSet") {
return "boxset.html?id=" + item.Id;
return "itemdetails.html?id=" + item.Id;
}
if (item.Type == "Genre") {
return "itembynamedetails.html?genre=" + item.Name;
@ -1246,10 +1246,6 @@
html += LibraryBrowser.createGalleryImage(item.Id, "Menu", imageTags.Menu);
}
if (imageTags.Disc) {
html += LibraryBrowser.createGalleryImage(item.Id, "Disc", imageTags.Disc);
}
if (imageTags.Box) {
html += LibraryBrowser.createGalleryImage(item.Id, "Box", imageTags.Box);
@ -1269,6 +1265,10 @@
html += LibraryBrowser.createGalleryImage(item.Id, "Screenshot", item.ScreenshotImageTags[i], i);
}
}
if (imageTags.Disc) {
html += LibraryBrowser.createGalleryImage(item.Id, "Disc", imageTags.Disc);
}
return html;
},

39
dashboard-ui/scripts/site.js
View File

@ -632,7 +632,7 @@ var Dashboard = {
ensureHeader: function (page) {
if (!$('.header', page).length) {
if (!$('.headerButtons', page).length) {
var isLoggedIn = Dashboard.getCurrentUserId();
@ -652,28 +652,39 @@ var Dashboard = {
renderHeader: function (page, user) {
var headerHtml = '';
headerHtml += '<div class="header">';
var isLibraryPage = page.hasClass('libraryPage');
if (!page.hasClass('noLogoPage')) {
headerHtml += '<a class="logo" href="index.html">';
var header = $('.header', page);
if (!header.length) {
headerHtml += '<div class="header">';
if (page.hasClass('standalonePage')) {
if (!page.hasClass('noLogoPage')) {
headerHtml += '<a class="logo" href="index.html">';
headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextblack.png" />';
if (page.hasClass('standalonePage')) {
headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextblack.png" />';
}
else if (isLibraryPage) {
headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextwhite.png" />';
}
headerHtml += '</a>';
}
else if (isLibraryPage) {
headerHtml += '</div>';
page.prepend(headerHtml);
headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextwhite.png" />';
}
headerHtml += '</a>';
header = $('.header', page);
}
var imageColor = isLibraryPage ? "white" : "black";
headerHtml = '';
headerHtml += '<div class="headerButtons">';
if (user && !page.hasClass('wizardPage')) {
headerHtml += '<div class="headerButtons">';
headerHtml += '<a class="imageLink btnCurrentUser" href="#" onclick="Dashboard.showUserFlyout();"><span class="currentUsername">' + user.Name + '</span>';
if (user.PrimaryImageTag) {
@ -694,15 +705,15 @@ var Dashboard = {
headerHtml += '<a class="imageLink btnTools" href="dashboard.html"><img src="css/images/tools' + imageColor + '.png" /></a>';
}
headerHtml += '</div>';
}
headerHtml += '</div>';
page.prepend(headerHtml);
header.append(headerHtml);
Dashboard.getPluginSecurityInfo().done(function (pluginSecurityInfo) {
if (pluginSecurityInfo.IsMBSupporter) {
$('<a class="imageLink" href="supporter.html"><img src="css/images/supporter/supporterbadge.png" /></a>').insertBefore('.btnTools', page);
$('<a class="imageLink" href="supporter.html"><img src="css/images/supporter/supporterbadge.png" /></a>').insertBefore('.btnTools', header);
}
});
},

153
dashboard-ui/scripts/tvseason.js
View File

@ -1,153 +0,0 @@
(function ($, document, LibraryBrowser, window) {
var currentItem;
function reload(page) {
var id = getParameterByName('id');
Dashboard.showLoadingMsg();
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
currentItem = item;
var name = item.Name;
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
Dashboard.setPageTitle(name);
$('#itemName', page).html(name);
$('#seriesName', page).html('<a class="detailPageParentLink" href="tvseries.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>').trigger('create');
setInitialCollapsibleState(page, item);
renderDetails(page, item);
if (LibraryBrowser.shouldDisplayGallery(item)) {
$('#galleryCollapsible', page).show();
} else {
$('#galleryCollapsible', page).hide();
}
$('#episodesCollapsible .collapsibleTitle', page).html('Episodes (' + item.ChildCount + ')');
Dashboard.hideLoadingMsg();
});
}
function setInitialCollapsibleState(page, item) {
if (!item.People || !item.People.length) {
$('#castCollapsible', page).hide();
} else {
$('#castCollapsible', page).show();
}
}
function renderDetails(page, item) {
if (item.Taglines && item.Taglines.length) {
$('#itemTagline', page).html(item.Taglines[0]).show();
} else {
$('#itemTagline', page).hide();
}
LibraryBrowser.renderOverview($('#itemOverview', page), item);
if (item.CommunityRating) {
$('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating);
} else {
$('#itemCommunityRating', page).hide();
}
$('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
LibraryBrowser.renderGenres($('#itemGenres', page), item);
LibraryBrowser.renderStudios($('#itemStudios', page), item);
renderUserDataIcons(page, item);
LibraryBrowser.renderLinks($('#itemLinks', page), item);
}
function renderUserDataIcons(page, item) {
$('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
}
function renderSeasons(page) {
ApiClient.getItems(Dashboard.getCurrentUserId(), {
ParentId: getParameterByName('id'),
SortBy: "SortName",
Fields: "PrimaryImageAspectRatio,ItemCounts,DisplayMediaType,DateCreated,UserData"
}).done(function (result) {
var html = LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
});
$('#episodesContent', page).html(html);
});
}
function renderGallery(page, item) {
var html = LibraryBrowser.getGalleryHtml(item);
$('#galleryContent', page).html(html).trigger('create');
}
function renderCast(page, item) {
var html = '';
var casts = item.People || [];
for (var i = 0, length = casts.length; i < length; i++) {
var cast = casts[i];
html += LibraryBrowser.createCastImage(cast);
}
$('#castContent', page).html(html);
}
$(document).on('pageshow', "#tvSeasonPage", function () {
var page = this;
reload(page);
$('#episodesCollapsible', page).on('expand.lazyload', function () {
renderSeasons(page);
$(this).off('expand.lazyload');
});
$('#castCollapsible', page).on('expand.lazyload', function () {
renderCast(page, currentItem);
$(this).off('expand.lazyload');
});
$('#galleryCollapsible', page).on('expand.lazyload', function () {
renderGallery(page, currentItem);
$(this).off('expand.lazyload');
});
}).on('pagehide', "#tvSeasonPage", function () {
currentItem = null;
var page = this;
$('#episodesCollapsible', page).off('expand.lazyload');
$('#castCollapsible', page).off('expand.lazyload');
$('#galleryCollapsible', page).off('expand.lazyload');
});
})(jQuery, document, LibraryBrowser, window);

172
dashboard-ui/scripts/tvseries.js
View File

@ -1,172 +0,0 @@
(function ($, document, LibraryBrowser, window) {
var currentItem;
function reload(page) {
var id = getParameterByName('id');
Dashboard.showLoadingMsg();
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
currentItem = item;
var name = item.Name;
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item));
Dashboard.setPageTitle(name);
$('#itemName', page).html(name);
setInitialCollapsibleState(page, item);
renderDetails(page, item);
if (LibraryBrowser.shouldDisplayGallery(item)) {
$('#galleryCollapsible', page).show();
} else {
$('#galleryCollapsible', page).hide();
}
Dashboard.hideLoadingMsg();
});
}
function setInitialCollapsibleState(page, item) {
if (!item.People || !item.People.length) {
$('#castCollapsible', page).hide();
} else {
$('#castCollapsible', page).show();
}
}
function renderDetails(page, item) {
if (item.Taglines && item.Taglines.length) {
$('#itemTagline', page).html(item.Taglines[0]).show();
} else {
$('#itemTagline', page).hide();
}
LibraryBrowser.renderOverview($('#itemOverview', page), item);
if (item.CommunityRating) {
$('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating);
} else {
$('#itemCommunityRating', page).hide();
}
$('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
$('#seasonsCollapsible .collapsibleTitle', page).html('Seasons (' + item.ChildCount + ')');
LibraryBrowser.renderPremiereDate($('#itemPremiereDate', page), item);
LibraryBrowser.renderGenres($('#itemGenres', page), item);
LibraryBrowser.renderStudios($('#itemStudios', page), item);
renderUserDataIcons(page, item);
LibraryBrowser.renderLinks($('#itemLinks', page), item);
var airs = item.Status == "Ended" ? "Aired" : "Airs";
if (item.AirDays && item.AirDays.length) {
airs += " " + item.AirDays.map(function (i) {
return i.substring(0, 3);
}).join(',');
}
if (item.AirTime) {
airs += " at " + item.AirTime;
}
if (item.Studios && item.Studios.length) {
airs += " on " + item.Studios[0];
}
$('#itemAirTime', page).html(airs);
}
function renderUserDataIcons(page, item) {
$('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
}
function renderSeasons(page) {
ApiClient.getItems(Dashboard.getCurrentUserId(), {
ParentId: getParameterByName('id'),
SortBy: "SortName",
Fields: "PrimaryImageAspectRatio,ItemCounts,DisplayMediaType,DateCreated,UserData"
}).done(function (result) {
var html = LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
useAverageAspectRatio: true
});
$('#seasonsContent', page).html(html);
});
}
function renderGallery(page, item) {
var html = LibraryBrowser.getGalleryHtml(item);
$('#galleryContent', page).html(html).trigger('create');
}
function renderCast(page, item) {
var html = '';
var casts = item.People || [];
for (var i = 0, length = casts.length; i < length; i++) {
var cast = casts[i];
html += LibraryBrowser.createCastImage(cast);
}
$('#castContent', page).html(html);
}
$(document).on('pageshow', "#tvSeriesPage", function () {
var page = this;
reload(page);
$('#seasonsCollapsible', page).on('expand.lazyload', function () {
renderSeasons(page);
$(this).off('expand.lazyload');
});
$('#castCollapsible', page).on('expand.lazyload', function () {
renderCast(page, currentItem);
$(this).off('expand.lazyload');
});
$('#galleryCollapsible', page).on('expand.lazyload', function () {
renderGallery(page, currentItem);
$(this).off('expand.lazyload');
});
}).on('pagehide', "#tvSeriesPage", function () {
currentItem = null;
var page = this;
$('#seasonsCollapsible', page).off('expand.lazyload');
$('#castCollapsible', page).off('expand.lazyload');
$('#galleryCollapsible', page).off('expand.lazyload');
});
})(jQuery, document, LibraryBrowser, window);

66
dashboard-ui/tvseason.html
View File

@ -1,66 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="tvSeasonPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
<img src="css/images/mblogoicon.png"></a>TV Shows</h1>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="tvrecommended.html" data-role="button">Suggested</a>
<a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a>
<a href="tvgenres.html" data-role="button">Genres</a>
<a href="tvpeople.html" data-role="button">Actors</a>
<a href="tvstudios.html" data-role="button">Networks</a>
</div>
<div class="detailPagePrimaryInfo">
<div class="itemImageBlock">
<div id="itemMedia" style="position: relative;">
<div id="itemImage"></div>
</div>
</div>
<div class="itemDetailBlock">
<h1 id="seriesName" class="detailPageName"></h1>
<h1 id="itemName" class="detailPageName"></h1>
<p id="itemTagline" style="font-style: italic;"></p>
<p id="itemOverview"></p>
<p id="itemRatings"></p>
<p id="itemCommunityRating"></p>
<p id="itemMiscInfo" class="itemMiscInfo"></p>
<p id="itemGenres"></p>
<p id="itemStudios"></p>
<p id="itemLinks"></p>
</div>
</div>
<div data-role="collapsible" id="episodesCollapsible" data-mini="true">
<h3><span class="collapsibleTitle">Episodes</span></h3>
<div id="episodesContent"></div>
</div>
<div data-role="collapsible" id="trailersCollapsible" class="hide" data-mini="true">
<h3><span class="collapsibleTitle">Trailers</span></h3>
<div id="trailersContent"></div>
</div>
<div data-role="collapsible" id="castCollapsible" class="hide" data-mini="true">
<h3>Cast & Crew</h3>
<div id="castContent"></div>
</div>
<div data-role="collapsible" id="galleryCollapsible" data-mini="true">
<h3>Gallery</h3>
<div id="galleryContent"></div>
</div>
</div>
</div>
</body>
</html>

66
dashboard-ui/tvseries.html
View File

@ -1,66 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="tvSeriesPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
<img src="css/images/mblogoicon.png"></a>TV Shows</h1>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="tvrecommended.html" data-role="button">Suggested</a>
<a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a>
<a href="tvgenres.html" data-role="button">Genres</a>
<a href="tvpeople.html" data-role="button">Actors</a>
<a href="tvstudios.html" data-role="button">Networks</a>
</div>
<div class="detailPagePrimaryInfo">
<div class="itemImageBlock">
<div id="itemMedia" style="position: relative;">
<div id="itemImage"></div>
</div>
</div>
<div class="itemDetailBlock">
<h1 id="itemName" class="detailPageName"></h1>
<p id="itemTagline" style="font-style: italic;"></p>
<p id="itemOverview"></p>
<p id="itemRatings"></p>
<p id="itemCommunityRating"></p>
<p id="itemMiscInfo" class="itemMiscInfo"></p>
<p id="itemAirTime"></p>
<p id="itemPremiereDate"></p>
<p id="itemGenres"></p>
<p id="itemStudios"></p>
<p id="itemLinks"></p>
</div>
</div>
<div data-role="collapsible" id="seasonsCollapsible" data-mini="true">
<h3><span class="collapsibleTitle">Seasons</span></h3>
<div id="seasonsContent"></div>
</div>
<div data-role="collapsible" id="trailersCollapsible" class="hide" data-mini="true">
<h3><span class="collapsibleTitle">Trailers</span></h3>
<div id="trailersContent"></div>
</div>
<div data-role="collapsible" id="castCollapsible" class="hide" data-mini="true">
<h3>Cast & Crew</h3>
<div id="castContent"></div>
</div>
<div data-role="collapsible" id="galleryCollapsible" data-mini="true">
<h3>Gallery</h3>
<div id="galleryContent"></div>
</div>
</div>
</div>
</body>
</html>