diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 53a282e026..47fa7ed1bd 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -309,6 +309,36 @@ a.itemTag:hover {
white-space: nowrap;
}
+.lnkSibling {
+ position: absolute;
+ bottom: 240px;
+ text-decoration: none;
+ color: #fff!important;
+ font-weight: normal!important;
+ display: none;
+ background-color: rgba(0,0,0,0.4);
+ border-radius: 3px;
+ padding: 3px 5px;
+}
+
+ .lnkSibling:hover {
+ text-decoration: underline;
+ }
+
+.noBackdrop .lnkSibling {
+ background-color: transparent;
+ border-radius: 0;
+ padding: 0;
+}
+
+.lnkPreviousItem {
+ left: 15px;
+}
+
+.lnkNextItem {
+ right: 15px;
+}
+
.itemDetailImage {
height: 240px;
-moz-box-shadow: 0px 0 20px #000;
@@ -408,6 +438,18 @@ a.itemTag:hover {
@media all and (min-width: 750px) {
+ .lnkSibling:not(.hide) {
+ display: block;
+ }
+
+ .lnkSibling {
+ bottom: 270px;
+ }
+
+ .noBackdrop .lnkSibling {
+ bottom: 260px;
+ }
+
.galleryImage {
max-height: 90px;
}
@@ -430,6 +472,10 @@ a.itemTag:hover {
.itemBackdrop {
background-size: 100% auto;
}
+
+ .noBackdrop .lnkSibling {
+ bottom: 205px;
+ }
}
@media all and (min-width: 650px) {
@@ -481,6 +527,14 @@ a.itemTag:hover {
@media all and (min-width: 1440px) {
+ .lnkSibling {
+ bottom: 205px;
+ color: #ddd!important;
+ background-color: transparent;
+ border-radius: 0;
+ padding: 0;
+ }
+
.ehsContent {
max-width: 1070px;
}
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index b755e5e05f..680153600a 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -107,6 +107,8 @@
+ ← Previous
+ Next →
diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js
index 8534152ed2..922acc3cf1 100644
--- a/dashboard-ui/scripts/Itemdetailpage.js
+++ b/dashboard-ui/scripts/Itemdetailpage.js
@@ -163,19 +163,16 @@
$('#themeSongsCollapsible', page).hide();
$('#themeVideosCollapsible', page).hide();
- ApiClient.getThemeSongs(Dashboard.getCurrentUserId(), item.Id).done(function (result) {
- renderThemeSongs(page, item, result);
- });
-
- ApiClient.getThemeVideos(Dashboard.getCurrentUserId(), item.Id).done(function (result) {
- renderThemeVideos(page, item, result);
- });
-
+ renderThemeSongs(page, item);
+ renderThemeVideos(page, item);
renderCriticReviews(page, item, 1);
}
function renderDetails(page, item, context) {
+ renderSimilarItems(page, item);
+ renderSiblingLinks(page, item);
+
if (item.Taglines && item.Taglines.length) {
$('#itemTagline', page).html(item.Taglines[0]).show();
} else {
@@ -219,6 +216,8 @@
renderTags(page, item);
+ renderSeriesAirTime(page, item, context);
+
var detailsSection = $('#detailsSection', page);
var elem = $('.detailSectionContent', detailsSection)[0];
var text = elem.textContent || elem.innerText;
@@ -229,9 +228,6 @@
detailsSection.removeClass('hide');
}
- renderSeriesAirTime(page, item, context);
- renderSimiliarItems(page, item);
-
if (item.Players) {
$('#players', page).show().html(item.Players + ' Player');
} else {
@@ -243,9 +239,47 @@
} else {
$('#artist', page).hide();
}
+
}
- function renderSimiliarItems(page, item) {
+ function renderSiblingLinks(page, item) {
+
+ $('.lnkSibling', page).addClass('hide');
+
+ if ((item.Type != "Episode" && item.Type != "Season" && item.Type != "Audio") || item.IndexNumber == null) {
+ return;
+ }
+
+ var friendly = item.Type == "Audio" ? "song" : item.Type.toLowerCase();
+
+ ApiClient.getItems(Dashboard.getCurrentUserId(), {
+
+ AdjacentTo: item.Id,
+ ParentId: item.ParentId
+
+ }).done(function (result) {
+
+ for (var i = 0, length = result.Items.length; i < length; i++) {
+
+ var curr = result.Items[i];
+
+ if (curr.IndexNumber == null) {
+ continue;
+ }
+
+ if (curr.IndexNumber < item.IndexNumber) {
+
+ $('.lnkPreviousItem', page).removeClass('hide').attr('href', 'itemdetails.html?id=' + curr.Id).html('← Previous ' + friendly);
+ }
+ else if (curr.IndexNumber > item.IndexNumber) {
+
+ $('.lnkNextItem', page).removeClass('hide').attr('href', 'itemdetails.html?id=' + curr.Id).html('Next ' + friendly + ' →');
+ }
+ }
+ });
+ }
+
+ function renderSimilarItems(page, item) {
if (item.Type != "Movie" &&
item.Type != "Trailer" &&
@@ -390,6 +424,11 @@
function renderCriticReviews(page, item, limit) {
+ if (item.Type != "Movie" && item.Type != "Trailer") {
+ $('#criticReviewsCollapsible', page).hide();
+ return;
+ }
+
var options = {};
if (limit) {
@@ -479,24 +518,30 @@
$('#criticReviewsContent', page).html(html).trigger('create');
}
- function renderThemeSongs(page, item, result) {
+ function renderThemeSongs(page, item) {
- if (result.Items.length) {
+ ApiClient.getThemeSongs(Dashboard.getCurrentUserId(), item.Id).done(function (result) {
+ if (result.Items.length) {
- $('#themeSongsCollapsible', page).show();
+ $('#themeSongsCollapsible', page).show();
+
+ $('#themeSongsContent', page).html(LibraryBrowser.getSongTableHtml(result.Items, { showArtist: true, showAlbum: true })).trigger('create');
+ }
+ });
- $('#themeSongsContent', page).html(LibraryBrowser.getSongTableHtml(result.Items, { showArtist: true, showAlbum: true })).trigger('create');
- }
}
- function renderThemeVideos(page, item, result) {
+ function renderThemeVideos(page, item) {
- if (result.Items.length) {
+ ApiClient.getThemeVideos(Dashboard.getCurrentUserId(), item.Id).done(function (result) {
+ if (result.Items.length) {
- $('#themeVideosCollapsible', page).show();
+ $('#themeVideosCollapsible', page).show();
+
+ $('#themeVideosContent', page).html(getVideosHtml(result.Items)).trigger('create');
+ }
+ });
- $('#themeVideosContent', page).html(getVideosHtml(result.Items)).trigger('create');
- }
}
function renderScenes(page, item, limit) {
@@ -759,7 +804,7 @@
html += '' + cast.Name + '
';
var role = cast.Role ? "as " + cast.Role : cast.Type;
-
+
if (role == "GuestStar") {
role = "Guest star";
}