progress bars on resumable items

dashboard-ui/css/librarybrowser.css

@@ -113,11 +113,21 @@
         width: 70%;
         max-width: 1200px;
     }
+
+    .ehsContent {
+        max-width: 1070px;
+    }
 }
 
 @media all and (min-width: 1920px) {
     .ehsContent {
-        max-width: 1000px;
+        max-width: 1200px;
+    }
+}
+
+@media all and (min-width: 2300px) {
+    .ehsContent {
+        max-width: 1500px;
     }
 }
 
@@ -230,6 +240,9 @@
     border: 0;
     margin: 0;
     height: 14px;
+    border: 1px solid #666;
+    border-radius: 0;
+    width: 100px;
 }
 
     /* Polyfill */
@@ -281,7 +294,6 @@
     position: relative;
     top: 3px;
     margin-right: 1em;
-    width: 50px;
 }
 
 .tileItem .itemProgressBar {

dashboard-ui/css/posteritem.css

@@ -9,6 +9,7 @@
     text-decoration: none;
     text-align: left;
     overflow: hidden;
+    border: 1px solid #666;
 }
 
     .posterItem:hover {
@@ -37,7 +38,7 @@
     overflow: hidden;
     text-wrap: none;
     white-space: nowrap;
-    padding: 4px;
+    padding: 5px 4px 4px;
     background: #181818;
     text-shadow: none;
 }
@@ -48,6 +49,7 @@
 
 .posterItemText + .posterItemText {
     padding-top: 2px;
+    border-top: 0;
 }
 
 .posterItemDefaultText {
@@ -84,6 +86,11 @@
 
 .portraitPosterItem {
     width: 100px;
+    border-color: #555;
+}
+
+.smallBackdropPosterItem {
+    border-color: #555;
 }
 
 .portraitPosterItem .posterItemImage {
@@ -91,6 +98,29 @@
 }
 
 
+.posterItemProgress {
+    font-size: 12px;
+    color: #bbb;
+    vertical-align: middle;
+}
+
+    .posterItemProgress .itemProgressBar {
+        height: 12px;
+        width: 35%;
+    }
+
+.portraitPosterItem .itemProgressText {
+    display: none;
+}
+
+.portraitPosterItem .itemProgressBar {
+    width: 100%;
+}
+
+.posterItem .itemProgressText {
+    margin-left: 5px;
+    vertical-align: middle;
+}
 
 @media all and (min-width: 650px) {
 
@@ -124,6 +154,10 @@
             height: 126px;
         }
 
+        .backdropPosterItem .itemProgressBar {
+            width: 55%;
+        }
+
     .portraitPosterItem {
         width: 108px;
     }
@@ -144,33 +178,57 @@
         }
 
     .portraitPosterItem {
-        width: 120px;
+        width: 134px;
     }
 
         .portraitPosterItem .posterItemImage {
-            height: 180px;
+            height: 201px;
+        }
+
+    .backdropPosterItem {
+        width: 256px;
+    }
+
+        .backdropPosterItem .posterItemImage {
+            height: 144px;
+        }
+
+    .portraitPosterItem .itemProgressText {
+        display: inline;
+    }
+
+    .portraitPosterItem .itemProgressBar {
+        width: 20%;
     }
 }
 
 @media all and (min-width: 1920px) {
 
     .squarePosterItem {
-        width: 185px;
+        width: 200px;
     }
 
         .squarePosterItem .posterItemImage {
-            height: 185px;
+            height: 200px;
         }
 
     .portraitPosterItem {
-        width: 136px;
+        width: 160px;
     }
 
         .portraitPosterItem .posterItemImage {
-            height: 204px;
+            height: 240px;
         }
 
-    .posterItem {
+    .backdropPosterItem {
-        font-size: 16px;
+        width: 288px;
+    }
+
+        .backdropPosterItem .posterItemImage {
+            height: 162px;
+        }
+
+    .portraitPosterItem .itemProgressBar {
+        width: 30%;
     }
 }

dashboard-ui/scripts/librarybrowser.js

@@ -534,6 +534,13 @@
                     html += "</div>";
                 }
 
+                if (options.showProgressBar) {
+                    
+                    html += "<div class='posterItemText posterItemProgress'>";
+                    html += LibraryBrowser.getItemProgressBarHtml(item, true) || "&nbsp;";
+                    html += "</div>";
+                }
+
                 if (options.showNewIndicator !== false) {
                     html += LibraryBrowser.getNewIndicatorHtml(item);
                 }
@@ -785,7 +792,7 @@
             return html;
         },
 
-        getUserDataIconsHtml: function (item) {
+        getItemProgressBarHtml: function (item, showProgressText) {
 
             var html = '';
 
@@ -809,7 +816,20 @@
 
                 html += '<progress title="' + tooltip + '" class="itemProgressBar" min="0" max="100" value="' + pct + '">';
                 html += '</progress>';
+
+                if (showProgressText) {
+                    html += '<span class="itemProgressText">' + tooltip + '</span>';
                 }
+            }
+
+            return html;
+        },
+
+        getUserDataIconsHtml: function (item) {
+
+            var html = '';
+
+            html += LibraryBrowser.getItemProgressBarHtml(item);
 
             var userData = item.UserData || {};
 

dashboard-ui/scripts/moviesrecommended.js

@@ -11,7 +11,7 @@
             IncludeItemTypes: "Movie",
             Limit: 7,
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio",
+            Fields: "PrimaryImageAspectRatio,DateCreated,UserData",
             Filters: "IsUnplayed"
         };
 
@@ -34,7 +34,7 @@
             Filters: "IsResumable",
             Limit: 7,
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio"
+            Fields: "PrimaryImageAspectRatio,DateCreated,UserData"
         };
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
@@ -47,7 +47,8 @@
             
             $('#resumableItems', page).html(LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
-                useAverageAspectRatio: true
+                useAverageAspectRatio: true,
+                showProgressBar: true
             }));
 
         });
@@ -60,7 +61,7 @@
             IncludeItemTypes: "Trailer",
             Limit: 7,
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio,DateCreated",
+            Fields: "PrimaryImageAspectRatio,DateCreated,UserData",
             Filters: "IsUnplayed"
         };
 

dashboard-ui/scripts/plugincatalogpage.js

@@ -37,7 +37,7 @@
             var html = '';
             var plugin = availablePlugins[i];
 
-            html += "<a class='posterItem smallBackdropPosterItem transparentPosterItem' href='addPlugin.html?name=" + encodeURIComponent(plugin.name) + "'>";
+            html += "<a class='posterItem backdropPosterItem transparentPosterItem' href='addPlugin.html?name=" + encodeURIComponent(plugin.name) + "'>";
 
             if (plugin.thumbImage) {
                 html += '<div class="posterItemImage" style="background-image:url(\'' + plugin.thumbImage + '\');"></div>';

dashboard-ui/scripts/tvrecommended.js

@@ -9,9 +9,9 @@
             SortBy: "DateCreated",
             SortOrder: "Descending",
             IncludeItemTypes: "Episode",
-            Limit: 6,
+            Limit: 8,
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio,SeriesInfo",
+            Fields: "PrimaryImageAspectRatio,SeriesInfo,UserData",
             Filters: "IsUnplayed"
         };
 
@@ -34,9 +34,9 @@
             SortOrder: "Descending",
             IncludeItemTypes: "Episode",
             Filters: "IsResumable",
-            Limit: 6,
+            Limit: 8,
             Recursive: true,
-            Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated"
+            Fields: "PrimaryImageAspectRatio,SeriesInfo,UserData",
         };
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
@@ -52,7 +52,8 @@
                 useAverageAspectRatio: true,
                 shape: "backdrop",
                 showTitle: true,
-                showParentTitle: true
+                showParentTitle: true,
+                showProgressBar: true
             }));
 
         });