display similar items on detail page

ApiClient.js

@@ -257,6 +257,17 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
             });
         };
 
+        self.getSimilarItems = function (itemId, options) {
+
+            var url = self.getUrl("Items/" + itemId + "/Similar", options);
+
+            return self.ajax({
+                type: "GET",
+                url: url,
+                dataType: "json"
+            });
+        };
+
         /**
          * Gets all cultures known to the server
          */

dashboard-ui/css/librarybrowser.css

@@ -203,6 +203,7 @@
 
 .criticRatingSummary {
     background-color: #FFE482!important;
+    background-color: rgba(255,228,130,0.7);
     color: #000!important;
 }
 
@@ -368,6 +369,9 @@ a.itemTag:hover {
     border: 1px solid #181818;
     background: #222;
     margin-top: 2em;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .detailSectionContent {

dashboard-ui/itemdetails.html

@@ -130,10 +130,10 @@
                         <p id="itemPremiereDate"></p>
                         <p class="itemStudios"></p>
                         <p class="itemExternalLinks"></p>
-                        <p class="itemTags"></p>
 
                         <p id="itemBudget"></p>
                         <p id="itemRevenue"></p>
+                        <p class="itemTags"></p>
                     </div>
                 </div>
                 <div id="childrenCollapsible" class="hide">
@@ -170,6 +170,12 @@
                     </div>
                     <div id="castContent" class="detailSectionContent"></div>
                 </div>
+                <div id="similarCollapsible" style="display: none;">
+                    <div class="detailSectionHeader">
+                        Similar
+                    </div>
+                    <div id="similarContent" class="detailSectionContent"></div>
+                </div>
                 <div id="galleryCollapsible" style="display: none;">
                     <div class="detailSectionHeader">
                         Gallery

dashboard-ui/scripts/Itemdetailpage.js

@@ -232,24 +232,65 @@
         }
 
         renderSeriesAirTime(page, item, context);
+        renderSimiliarItems(page, item);
     }
-    
+
+    function renderSimiliarItems(page, item) {
+
+        if (item.Type != "Movie" &&
+            item.Type != "Trailer" &&
+            item.Type != "MusicAlbum" &&
+            item.Type != "Series" &&
+            item.MediaType != "Game") {
+
+            $('#similarCollapsible', page).hide();
+            return;
+        }
+
+        ApiClient.getSimilarItems(item.Id, {
+
+            userId: Dashboard.getCurrentUserId(),
+            limit: 8
+
+        }).done(function (result) {
+
+            if (!result.Items.length) {
+
+                $('#similarCollapsible', page).hide();
+                return;
+            }
+
+            var elem = $('#similarCollapsible', page).show();
+
+            $('.detailSectionHeader', elem).html('If you like ' + item.Name + ', check these out...');
+
+            var html = LibraryBrowser.getPosterViewHtml({
+                items: result.Items,
+                useAverageAspectRatio: true,
+                showNewIndicator: true,
+                shape: item.Type == "MusicAlbum" ? "square" : "portrait"
+            });
+
+            $('#similarContent', page).html(html);
+        });
+    }
+
     function renderSeriesAirTime(page, item, context) {
-        
+
         if (item.Type != "Series") {
             $('#seriesAirTime', page).hide();
             return;
         }
 
         var html = item.Status == 'Ended' ? 'Aired' : 'Airs';
-        
+
         if (item.AirDays.length) {
-            html += ' ' + item.AirDays.map(function(a) {
+            html += ' ' + item.AirDays.map(function (a) {
                 return a + "s";
 
             }).join(',');
         }
-        
+
         if (item.Studios.length) {
             html += ' on <a class="textlink" href="itembynamedetails.html?context=' + context + '&studio=' + ApiClient.encodeName(item.Studios[0].Name) + '">' + item.Studios[0].Name + '</a>';
         }
@@ -283,7 +324,7 @@
     function renderChildren(page, item) {
 
         var sortBy = item.Type == "Boxset" ? "ProductionYear,SortName" : "SortName";
-        
+
         ApiClient.getItems(Dashboard.getCurrentUserId(), {
 
             ParentId: getParameterByName('id'),

packages.config

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