display video backdrops on detail page

ApiClient.js

@@ -1733,6 +1733,35 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
             });
         };
 
+        self.getVideoBackdrops = function (userId, itemId) {
+
+            if (!userId) {
+                throw new Error("null userId");
+            }
+            if (!itemId) {
+                throw new Error("null itemId");
+            }
+
+            var url = self.getUrl("Users/" + userId + "/Items/" + itemId + "/VideoBackdrops");
+
+            return self.ajax({
+                type: "GET",
+                url: url,
+                dataType: "json"
+            });
+        };
+
+        self.getSearchHints = function (options) {
+
+            var url = self.getUrl("Search/Hints", options);
+
+            return self.ajax({
+                type: "GET",
+                url: url,
+                dataType: "json"
+            });
+        };
+
         /**
          * Gets special features for an item
          */

dashboard-ui/itemdetails.html

@@ -170,6 +170,12 @@
                         <div id="scenesContent"></div>
                     </div>
                 </div>
+                <div>
+                    <div data-role="collapsible" id="videoBackdropsCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
+                        <h3>Video Backdrops</h3>
+                        <div id="videoBackdropsContent"></div>
+                    </div>
+                </div>
             </div>
 
             <div data-role="popup" id="playMenu" data-corners="false" data-theme="c">

dashboard-ui/scripts/Itemdetailpage.js

@@ -221,10 +221,15 @@
         }
 
         $('#themeSongsCollapsible', page).hide();
+        $('#videoBackdropsCollapsible', page).hide();
 
         ApiClient.getThemeSongs(Dashboard.getCurrentUserId(), item.Id).done(function (result) {
             renderThemeSongs(page, item, result);
         });
+
+        ApiClient.getVideoBackdrops(Dashboard.getCurrentUserId(), item.Id).done(function (result) {
+            renderVideoBackdrops(page, item, result);
+        });
     }
 
     function renderDetails(page, item, context) {
@@ -310,6 +315,16 @@
         }
     }
 
+    function renderVideoBackdrops(page, item, result) {
+
+        if (result.Items.length) {
+
+            $('#videoBackdropsCollapsible', page).show();
+
+            $('#videoBackdropsContent', page).html(getVideosHtml(result.Items)).trigger('create');
+        }
+    }
+
     function renderScenes(page, item) {
         var html = '';
 
@@ -446,98 +461,65 @@
         $('#mediaInfoContent', page).html(html).trigger('create');
     }
 
-    function renderSpecials(page, item) {
+    function getVideosHtml(items) {
+
         var html = '';
 
+        for (var i = 0, length = items.length; i < length; i++) {
+
+            var item = items[i];
+
+            html += '<div class="posterViewItem posterViewItemWithDualText">';
+            html += '<a href="#" onclick="ItemDetailPage.playById(\'' + item.Id + '\');">';
+
+            var imageTags = item.ImageTags || {};
+
+            if (imageTags.Primary) {
+
+                var imgUrl = ApiClient.getImageUrl(item.Id, {
+                    maxwidth: 500,
+                    tag: imageTags.Primary,
+                    type: "primary"
+                });
+
+                html += '<img src="' + imgUrl + '" />';
+            } else {
+                html += '<img src="css/images/items/detail/video.png"/>';
+            }
+
+            html += '<div class="posterViewItemText posterViewItemPrimaryText">' + item.Name + '</div>';
+            html += '<div class="posterViewItemText">';
+
+            if (item.RunTimeTicks != "") {
+                html += ticks_to_human(item.RunTimeTicks);
+            }
+            else {
+                html += "&nbsp;";
+            }
+            html += '</div>';
+
+            html += '</a>';
+
+            html += '</div>';
+        }
+
+        return html;
+    }
+
+    function renderSpecials(page, item) {
+
         ApiClient.getSpecialFeatures(Dashboard.getCurrentUserId(), item.Id).done(function (specials) {
 
-            for (var i = 0, length = specials.length; i < length; i++) {
+            $('#specialsContent', page).html(getVideosHtml(specials));
-
-                var special = specials[i];
-
-                html += '<div class="posterViewItem posterViewItemWithDualText">';
-                html += '<a href="#play-Special-' + i + '" onclick="ItemDetailPage.playSpecial(' + i + ');">';
-
-                var imageTags = special.ImageTags || {};
-
-                if (imageTags.Primary) {
-
-                    var imgUrl = ApiClient.getImageUrl(special.Id, {
-                        maxwidth: 500,
-                        tag: imageTags.Primary,
-                        type: "primary"
-                    });
-
-                    html += '<img src="' + imgUrl + '" />';
-                } else {
-                    html += '<img src="css/images/items/detail/video.png"/>';
-                }
-
-                html += '<div class="posterViewItemText posterViewItemPrimaryText">' + special.Name + '</div>';
-                html += '<div class="posterViewItemText">';
-
-                if (special.RunTimeTicks != "") {
-                    html += ticks_to_human(special.RunTimeTicks);
-                }
-                else {
-                    html += "&nbsp;";
-                }
-                html += '</div>';
-
-                html += '</a>';
-
-                html += '</div>';
-            }
-
-            $('#specialsContent', page).html(html);
 
         });
     }
 
     function renderTrailers(page, item) {
-        var html = '';
 
         ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), item.Id).done(function (trailers) {
 
-            for (var i = 0, length = trailers.length; i < length; i++) {
+            $('#trailersContent', page).html(getVideosHtml(trailers));
-
-                var trailer = trailers[i];
-
-                html += '<div class="posterViewItem posterViewItemWithDualText">';
-                html += '<a href="#play-Trailer-' + i + '" onclick="ItemDetailPage.playTrailer(' + i + ');">';
-
-                var imageTags = trailer.ImageTags || {};
-
-                if (imageTags.Primary) {
-
-                    var imgUrl = ApiClient.getImageUrl(trailer.Id, {
-                        maxwidth: 500,
-                        tag: imageTags.Primary,
-                        type: "primary"
-                    });
-
-                    html += '<img src="' + imgUrl + '" />';
-                } else {
-                    html += '<img src="css/images/items/detail/video.png"/>';
-                }
-
-                html += '<div class="posterViewItemText posterViewItemPrimaryText">' + trailer.Name + '</div>';
-                html += '<div class="posterViewItemText">';
-
-                if (trailer.RunTimeTicks != "") {
-                    html += ticks_to_human(trailer.RunTimeTicks);
-                }
-                else {
-                    html += "&nbsp;";
-                }
-                html += '</div>';
-
-                html += '</a>';
-
-                html += '</div>';
-            }
-
-            $('#trailersContent', page).html(html);
 
         });
     }
@@ -633,15 +615,9 @@
 
         self.play = play;
 
-        self.playTrailer = function (index) {
+        self.playById = function (id) {
-            ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), currentItem.Id).done(function (trailers) {
+            ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
-                MediaPlayer.play([trailers[index]]);
+                MediaPlayer.play([item]);
-            });
-        };
-
-        self.playSpecial = function (index) {
-            ApiClient.getSpecialFeatures(Dashboard.getCurrentUserId(), currentItem.Id).done(function (specials) {
-                MediaPlayer.play([specials[index]]);
             });
         };
     }

dashboard-ui/scripts/search.js

@@ -64,7 +64,7 @@
 
         var currentTimeout = searchHintTimeout;
 
-        $.getJSON(ApiClient.getUrl("Search/Hints", { userId: Dashboard.getCurrentUserId(), searchTerm: searchTerm, limit: 10 })).done(function (result) {
+        ApiClient.getSearchHints(ApiClient.getUrl({ userId: Dashboard.getCurrentUserId(), searchTerm: searchTerm, limit: 10 })).done(function (result) {
 
             if (currentTimeout != searchHintTimeout) {
                 return;
@@ -253,7 +253,7 @@
     }
 
     window.Search = new search();
-    
+
     $(document).on('pagehide', ".libraryPage", function () {
 
         hideFlyout(this);

packages.config

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
-  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.86" targetFramework="net45" />
+  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.87" targetFramework="net45" />
   <package id="ServiceStack.Common" version="3.9.43" targetFramework="net45" />
   <package id="ServiceStack.Text" version="3.9.43" targetFramework="net45" />
 </packages>