added next/previous episode/season links

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;
     }

dashboard-ui/itemdetails.html

@@ -107,6 +107,8 @@
                     </tr>
                 </table>
             </div>
+            <a href="#" id="lnkPreviousItem" class="lnkPreviousItem lnkSibling hide">← Previous</a>
+            <a href="#" id="lnkNextItem" class="lnkNextItem lnkSibling hide">Next →</a>
         </div>
         <div class="ui-body-a" style="text-align: center; padding: .25em 0 .5em;">
             <span id="playButtonContainer" style="display: none;">

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) {
 
+        ApiClient.getThemeSongs(Dashboard.getCurrentUserId(), item.Id).done(function (result) {
             if (result.Items.length) {
 
                 $('#themeSongsCollapsible', page).show();
 
                 $('#themeSongsContent', page).html(LibraryBrowser.getSongTableHtml(result.Items, { showArtist: true, showAlbum: true })).trigger('create');
             }
+        });
+
     }
 
-    function renderThemeVideos(page, item, result) {
+    function renderThemeVideos(page, item) {
 
+        ApiClient.getThemeVideos(Dashboard.getCurrentUserId(), item.Id).done(function (result) {
             if (result.Items.length) {
 
                 $('#themeVideosCollapsible', page).show();
 
                 $('#themeVideosContent', page).html(getVideosHtml(result.Items)).trigger('create');
             }
+        });
+
     }
 
     function renderScenes(page, item, limit) {