update details

dashboard-ui/itemdetails.html

@@ -92,6 +92,12 @@
                     <p class="itemOverview topOverview"></p>
                 </div>
                 <div class="collectionItems"></div>
+                <div class="nextUpSection detailSection hide">
+                    <h1>
+                        ${HeaderNextUp}
+                    </h1>
+                    <div class="smallItemsContainer nextUpItems"></div>
+                </div>
                 <div id="childrenCollapsible" class="hide detailSection">
                     <h1 class="childrenSectionHeader">
                         <span id="childrenTitle"></span>

dashboard-ui/scripts/itemdetailpage.js

@@ -1,4 +1,4 @@
-(function ($, document, window) {
+define(['layoutManager'], function (layoutManager) {
 
     var currentItem;
 
@@ -71,7 +71,7 @@
             var hasBackdrop = false;
 
             // For these types, make the backdrop a little smaller so that the items are more quickly accessible
-            if (item.Type == 'MusicArtist' || item.Type == "MusicAlbum" || item.Type == "Playlist" || item.Type == "BoxSet" || item.Type == "Audio") {
+            if (item.Type == 'MusicArtist' || item.Type == "MusicAlbum" || item.Type == "Playlist" || item.Type == "BoxSet" || item.Type == "Audio" || !layoutManager.mobile) {
                 $('#itemBackdrop', page).addClass('noBackdrop').css('background-image', 'none');
                 require(['backdrop'], function (backdrop) {
                     backdrop.setBackdrops([item]);
@@ -324,6 +324,45 @@
         }
     }
 
+    function renderNextUp(page, item, user) {
+
+        var section = page.querySelector('.nextUpSection');
+
+        var userData = item.UserData || {};
+
+        if (item.Type != 'Series' || !userData.PlayedPercentage) {
+            section.classList.add('hide');
+            return;
+        }
+
+        ApiClient.getNextUpEpisodes({
+
+            SeriesId: item.Id,
+            UserId: user.Id
+
+        }).then(function (result) {
+
+            if (result.Items.length) {
+                section.classList.remove('hide');
+            } else {
+                section.classList.add('hide');
+            }
+
+            var html = LibraryBrowser.getPosterViewHtml({
+                items: result.Items,
+                shape: "detailPage169",
+                showTitle: true,
+                displayAsSpecial: item.Type == "Season" && item.IndexNumber,
+                overlayText: true,
+                lazy: true,
+                overlayPlayButton: true
+            });
+
+            section.querySelector('.nextUpItems').innerHTML = html;
+            ImageLoader.lazyChildren(section);
+        });
+    }
+
     function setInitialCollapsibleState(page, item, context, user) {
 
         $('.collectionItems', page).empty();
@@ -356,6 +395,13 @@
             $('#childrenCollapsible', page).addClass('hide');
         }
 
+        if (item.Type == 'Series') {
+
+            renderNextUp(page, item, user);
+        } else {
+            page.querySelector('.nextUpSection').classList.add('hide');
+        }
+
         if (item.MediaSources && item.MediaSources.length) {
             renderMediaSources(page, item);
         }
@@ -2101,4 +2147,4 @@
 
     window.ItemDetailPage = new itemDetailPage();
 
-})(jQuery, document, window);
+});