movie browser progress

dashboard-ui/css/librarybrowser.css

@@ -61,6 +61,10 @@
     text-align: left;
 }
 
+.libraryGridImage {
+    width: 50px;
+}
+
 @media all and (min-width: 650px) {
     .libraryPage .ui-content {
         padding: 15px 30px 100px;
@@ -79,13 +83,23 @@
     .ehsContent {
         max-width: 800px;
     }
+
+    .libraryItemsGridContainer {
+        padding: 0 10%;
+    }
 }
 
 @media all and (min-width: 1440px) {
+    .libraryItemsGridContainer {
+        padding: 0 20%;
+    }
 }
 
 @media all and (min-width: 1920px) {
     .ehsContent {
         max-width: 1000px;
     }
+    .libraryItemsGridContainer {
+        padding: 0 25%;
+    }
 }

dashboard-ui/scripts/movies.js

@@ -12,15 +12,17 @@
 
     function getTableHtml(items) {
 
-        var html = '<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke libraryItemsGrid">';
+        var html = '<div class="libraryItemsGridContainer"><table data-role="table" data-mode="reflow" class="ui-responsive table-stroke libraryItemsGrid">';
 
         html += '<thead>';
 
         html += '<tr>';
+        html += '<th>&nbsp;</th>';
         html += '<th>Name</th>';
         html += '<th>Year</th>';
         html += '<th>Official Rating</th>';
         html += '<th>Runtime</th>';
+        html += '<th>Community Rating</th>';
         html += '</tr>';
 
         html += '</thead>';
@@ -34,7 +36,7 @@
 
         html += '</tbody>';
 
-        html += '</table>';
+        html += '</table></div>';
 
         return html;
     }
@@ -43,12 +45,36 @@
 
         var html = '<tr>';
 
-        html += '<td>' + (item.Name || "") + '</td>';
+        html += '<td>';
+
+        var url = "itemdetails.html?id=" + item.Id;
+
+        var imageTags = item.ImageTags;
+
+        html += '<a href="' + url + '">';
+
+        if (imageTags.Primary) {
+
+            html += '<img class="libraryGridImage" src="' + ApiClient.getImageUrl(item.Id, {
+                type: "Primary",
+                height: 150,
+                tag: item.ImageTags.Primary
+            }) + '" />';
+
+        }
+        else {
+            html += '<img class="libraryGridImage" style="background:' + Dashboard.getMetroColor(item.Id) + ';" src="css/images/items/list/collection.png" />';
+        }
+
+        html += '</a></td>';
+
+        html += '<td><a href="' + url + '">' + item.Name + '</a></td>';
 
         html += '<td>' + (item.ProductionYear || "") + '</td>';
 
         html += '<td>' + (item.OfficialRating || "") + '</td>';
-        html += '<td>' + (item.OfficialRating || "") + '</td>';
+        html += '<td>' + (item.RunTimeTicks || "") + '</td>';
+        html += '<td>' + (item.CommunityRating || "") + '</td>';
 
         html += '</tr>';
         return html;
@@ -65,7 +91,7 @@
                 items: result.Items,
                 useAverageAspectRatio: true
 
-            })).html(getTableHtml(result.Items)).trigger('create');
+            }))/*.html(getTableHtml(result.Items)).trigger('create')*/;
 
             Dashboard.hideLoadingMsg();
         });

dashboard-ui/tvrecommended.html

@@ -13,7 +13,6 @@
                 <a href="tvshows.html" data-role="button">Shows</a>
                 <a href="#" data-role="button">Genres</a>
                 <a href="#" data-role="button">Actors</a>
-                <a href="#" data-role="button">Favorites</a>
             </div>
             <div class="ehsContent">
                 <h1 class="listHeader firstListHeader">Latest Episodes</h1>