added theme song support

ApiClient.js

@@ -1712,6 +1712,27 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
             });
         };
 
+        /**
+         * Gets theme songs for an item
+         */
+        self.getThemeSongs = 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 + "/ThemeSongs");
+
+            return self.ajax({
+                type: "GET",
+                url: url,
+                dataType: "json"
+            });
+        };
+
         /**
          * Gets special features for an item
          */

dashboard-ui/css/librarybrowser.css

@@ -559,7 +559,7 @@
 .detailTable {
     border-collapse: collapse;
     border-spacing: 0;
-    width: 70%;
+    width: 100%;
     max-width: 1200px;
     text-align: left;
 }

dashboard-ui/itemdetails.html

@@ -143,9 +143,9 @@
                     </div>
                 </div>
                 <div style="display: inline-block; vertical-align: top;">
-                    <div data-role="collapsible" id="scenesCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
+                    <div data-role="collapsible" id="themeSongsCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
-                        <h3>Scenes</h3>
+                        <h3>Theme Songs</h3>
-                        <div id="scenesContent"></div>
+                        <div id="themeSongsContent"></div>
                     </div>
                 </div>
                 <div style="display: inline-block; vertical-align: top;">
@@ -154,6 +154,12 @@
                         <div id="castContent"></div>
                     </div>
                 </div>
+                <div style="display: inline-block; vertical-align: top;">
+                    <div data-role="collapsible" id="scenesCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
+                        <h3>Scenes</h3>
+                        <div id="scenesContent"></div>
+                    </div>
+                </div>
             </div>
 
             <div data-role="popup" id="playMenu" data-corners="false" data-theme="c">

dashboard-ui/musicartists.html

@@ -70,7 +70,7 @@
                     <legend></legend>
 
                     <input class="chkIsOnTour" type="checkbox" name="chkIsOnTour" id="chkIsOnTour" data-theme="c" data-mini="true">
-                    <label for="chkIsOnTour">Is on tour</label>
+                    <label for="chkIsOnTour">On tour</label>
                 </fieldset>
             </form>
         </div>

dashboard-ui/scripts/Itemdetailpage.js

@@ -33,7 +33,7 @@
 
                 $('#seriesName', page).html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.SeriesId + '">' + item.SeriesName + '</a>').show().trigger('create');
             }
-            else if (item.Album && item.Type == "Audio") {
+            else if (item.Album && item.Type == "Audio" && item.ParentId) {
                 $('#seriesName', page).html('<a class="detailPageParentLink" href="itemdetails.html?id=' + item.ParentId + '">' + item.Album + '</a>').show().trigger('create');
 
             }
@@ -198,6 +198,12 @@
             $('#castCollapsible', page).show();
             renderCast(page, item, context);
         }
+
+        $('#themeSongsCollapsible', page).hide();
+
+        ApiClient.getThemeSongs(Dashboard.getCurrentUserId(), item.Id).done(function(songs) {
+            renderThemeSongs(page, item, songs);
+        });
     }
 
     function renderDetails(page, item, context) {
@@ -273,6 +279,16 @@
         $('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item));
     }
     
+    function renderThemeSongs(page, item, songs) {
+        
+        if (songs.length) {
+            
+            $('#themeSongsCollapsible', page).show();
+
+            $('#themeSongsContent', page).html(LibraryBrowser.getSongTableHtml(songs, {})).trigger('create');
+        }
+    }
+
     function renderScenes(page, item) {
         var html = '';
 

dashboard-ui/scripts/librarybrowser.js

@@ -245,7 +245,7 @@
                 html += '<td><a href="' + LibraryBrowser.getHref(item, "music") + '">' + (item.Name || "") + '</a></td>';
 
                 if (options.showAlbum) {
-                    if (item.Album) {
+                    if (item.Album && item.ParentId) {
                         html += '<td><a href="itemdetails.html?id=' + item.ParentId + '">' + item.Album + '</a></td>';
                     } else {
                         html += '<td></td>';

packages.config

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