From b5c43bdbf79d29e7e03374625a2654600bd323ae Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 3 May 2013 15:34:25 -0400
Subject: [PATCH] display progress bars to show resume %

---
 dashboard-ui/css/librarybrowser.css          | 371 +++----------------
 dashboard-ui/css/tileitem.css                | 334 +++++++++++++++++
 dashboard-ui/itembynamedetails.html          |   6 +-
 dashboard-ui/itemdetails.html                |   2 +-
 dashboard-ui/scripts/boxsets.js              |   2 +-
 dashboard-ui/scripts/gamegenrepage.js        |   2 +-
 dashboard-ui/scripts/gamespage.js            |   2 +-
 dashboard-ui/scripts/gamestudiospage.js      |   2 +-
 dashboard-ui/scripts/gamesystemspage.js      |   2 +-
 dashboard-ui/scripts/itembynamedetailpage.js |   2 +-
 dashboard-ui/scripts/itemlistpage.js         |   2 +-
 dashboard-ui/scripts/librarybrowser.js       |  12 +-
 dashboard-ui/scripts/moviegenres.js          |   2 +-
 dashboard-ui/scripts/moviepeople.js          |   2 +-
 dashboard-ui/scripts/movies.js               |   2 +-
 dashboard-ui/scripts/moviestudios.js         |   2 +-
 dashboard-ui/scripts/movietrailers.js        |   2 +-
 dashboard-ui/scripts/musicalbums.js          |   2 +-
 dashboard-ui/scripts/musicartists.js         |   2 +-
 dashboard-ui/scripts/musicgenres.js          |   2 +-
 dashboard-ui/scripts/tvgenres.js             |   2 +-
 dashboard-ui/scripts/tvpeople.js             |   4 +-
 dashboard-ui/scripts/tvshows.js              |   2 +-
 dashboard-ui/scripts/tvstudios.js            |   2 +-
 dashboard-ui/tvgenres.html                   |   2 +-
 dashboard-ui/tvnextup.html                   |   2 +-
 dashboard-ui/tvpeople.html                   |   2 +-
 dashboard-ui/tvrecommended.html              |   2 +-
 dashboard-ui/tvshows.html                    |   2 +-
 dashboard-ui/tvstudios.html                  |   2 +-
 30 files changed, 419 insertions(+), 358 deletions(-)
 create mode 100644 dashboard-ui/css/tileitem.css

diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index fc60398cd0..7c4342b712 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -189,99 +189,6 @@
     font-weight: bold;
 }
 
-.tileItem {
-    background: #333;
-    padding: 10px 7px 5px;
-    margin: 3px 0;
-    text-shadow: none;
-    font-weight: normal!important;
-    display: block;
-    font-size: 14px;
-    position: relative;
-}
-
-
-    .tileItem .itemProgress {
-        font-size: 14px;
-    }
-
-    .tileItem .starRating {
-        width: 15px;
-        height: 13px;
-    }
-
-.tileImage {
-    display: inline-block;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center top;
-}
-
-.defaultTileImage {
-    background-color: #999;
-}
-
-.tileItem p {
-    margin: .35em 0 0;
-}
-
-.tileItem .imgUserItemRating {
-    height: 18px;
-    width: 18px;
-}
-
-.tileContent {
-    display: inline-block;
-    padding-left: 10px;
-    color: #fff;
-    text-align: left;
-    vertical-align: top;
-    overflow: hidden;
-}
-
-.backdropTileItem .tileImage {
-    height: 90px;
-    width: 45%;
-}
-
-.backdropTileItem .tileContent {
-    width: 50%;
-}
-
-.posterTileItem .tileImage {
-    height: 120px;
-    width: 30%;
-}
-
-.posterTileItem .tileContent {
-    width: 65%;
-}
-
-.squareTileItem .tileImage {
-    height: 100px;
-    width: 35%;
-}
-
-.squareTileItem .tileContent {
-    width: 60%;
-}
-
-.tileName {
-    font-weight: bold;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-    .tileName + .tileName {
-        margin-top: .75em;
-    }
-
-.tileItem .userDataIcons img {
-    height: 14px;
-    width: 14px;
-}
-
 .detailPagePrimaryInfo {
     margin: 1em 0;
 }
@@ -301,257 +208,77 @@
     }
 }
 
-@media all and (min-width: 750px) {
-    .tileItem {
-        width: 46%;
-        display: inline-block;
-        margin-left: 3px;
-        margin-right: 3px;
-    }
-
-    .backdropTileItem .tileImage {
-        height: 88px;
-    }
-
-    .posterTileItem .tileImage {
-        height: 120px;
-    }
-
-    .squareTileItem .tileImage {
-        height: 115px;
-    }
-}
-
-@media all and (min-width: 850px) {
-
-    .backdropTileItem .tileImage {
-        height: 105px;
-    }
-
-    .posterTileItem .tileImage {
-        height: 120px;
-    }
-
-    .posterTileItem {
-        width: 31%;
-    }
-
-    .tileItem .userDataIcons img {
-        height: 18px;
-        width: 18px;
-    }
-
-    .tileItem p {
-        margin: .75em 0 0;
-    }
-
-    .tileItem .itemProgress {
-        font-size: 17px;
-    }
-}
-
-@media all and (min-width: 1000px) {
-    .tileItem {
-        width: 47.5%;
-    }
-
-    .posterTileItem {
-        width: 31%;
-    }
-
-    .backdropTileItem .tileImage {
-        height: 110px;
-    }
-
-    .posterTileItem .tileImage {
-        height: 136px;
-    }
-
-    .squareTileItem {
-        width: 31%;
-    }
-
-        .squareTileItem .tileImage {
-            height: 105px;
-        }
+.itemsContainer {
+    text-align: center;
 }
 
 @media all and (min-width: 1200px) {
-    .backdropTileItem .tileImage {
-        height: 100px;
-    }
-
-    .posterTileItem .tileImage {
-        height: 160px;
-    }
-
-    .tileItem {
-        width: 31.5%;
-    }
-
-    .squareTileItem .tileImage {
-        height: 130px;
-    }
 
     .scenePosterViewItem img {
         max-width: 200px!important;
     }
 }
 
-@media all and (min-width: 1440px) {
-    .backdropTileItem .tileImage {
-        height: 110px;
-    }
-
-    .posterTileItem .tileImage {
-        height: 150px;
-    }
-
-    .tileItem {
-        width: 31.5%;
-    }
-
-    .squareTileItem .tileImage {
-        height: 155px;
-    }
-
-    .posterTileItem {
-        width: 23.5%;
-    }
+/* All HTML5 progress enabled browsers */
+.itemProgressBar {
+    /* Turns off styling - not usually needed, but good to know. */
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    /* gets rid of default border in Firefox and Opera. */
+    border: 0;
+    margin: 0;
+    height: 12px;
 }
 
-@media all and (min-width: 1700px) {
-
-    .backdropTileItem .tileImage {
-        height: 132px;
+    /* Polyfill */
+    .itemProgressBar[role]:after {
+        background-image: none; /* removes default background from polyfill */
     }
 
-    .posterTileItem .tileImage {
-        height: 170px;
-    }
+/*
+ * Background of the progress bar background
+ */
 
-    .tileItem {
-        width: 32%;
-    }
-
-    .posterTileItem {
-        width: 23.5%;
-    }
-
-    .squareTileItem {
-        width: 23.5%;
-    }
-
-        .squareTileItem .tileImage {
-            height: 140px;
-        }
+/* Firefox and Polyfill */
+.itemProgressBar {
+    background: #050505 !important; /* !important only needed in polyfill */
 }
 
-
-@media all and (min-width: 1920px) {
-    .tileItem {
-        width: 31.5%;
+    /* Chrome */
+    .itemProgressBar::-webkit-progress-bar {
+        background: #050505;
     }
 
-    .tileImage {
-        height: 155px;
+    /*
+ * Background of the progress bar value
+ */
+
+    /* Firefox */
+    .itemProgressBar::-moz-progress-bar {
+        border-radius: 0;
+        background-image: none;
+        background-color: #A92D2D;
     }
 
-    .posterTileItem {
-        width: 18.8%;
+    /* Chrome */
+    .itemProgressBar::-webkit-progress-value {
+        border-radius: 0;
+        background-image: none;
+        background-color: #A92D2D;
     }
 
-        .posterTileItem .tileImage {
-            height: 160px;
-        }
-
-    .squareTileItem {
-        width: 18.8%;
+    /* Polyfill */
+    .itemProgressBar[aria-valuenow]:before {
+        border-radius: 0;
+        background-image: none;
+        background-color: #A92D2D;
     }
 
-        .squareTileItem .tileImage {
-            height: 120px;
-        }
-}
-
-@media all and (min-width: 2000px) {
-    .tileItem {
-        width: 23.5%;
-    }
-
-    .tileImage {
-        height: 117px;
-    }
-
-    .posterTileItem {
-        width: 18.8%;
-    }
-
-        .posterTileItem .tileImage {
-            height: 160px;
-        }
-
-    .squareTileItem {
-        width: 18.8%;
-    }
-
-        .squareTileItem .tileImage {
-            height: 130px;
-        }
-}
-
-@media all and (min-width: 2200px) {
-    .tileItem {
-        width: 24%;
-    }
-
-    .tileImage {
-        height: 145px;
-    }
-
-    .posterTileItem {
-        width: 18.8%;
-    }
-
-        .posterTileItem .tileImage {
-            height: 185px;
-        }
-
-    .squareTileItem {
-        width: 18.8%;
-    }
-
-        .squareTileItem .tileImage {
-            height: 140px;
-        }
-}
-
-@media all and (min-width: 2540px) {
-    .tileItem {
-        width: 18.75%;
-    }
-
-    .tileImage {
-        height: 120px;
-    }
-
-    .posterTileItem {
-        width: 15.8%;
-    }
-
-        .posterTileItem .tileImage {
-            height: 180px;
-        }
-
-    .squareTileItem {
-        width: 15.8%;
-    }
-
-        .squareTileItem .tileImage {
-            height: 140px;
-        }
-}
-
-.itemsContainer {
-    text-align: center;
+.userDataIcons .itemProgressBar {
+    vertical-align: top;
+    position: relative;
+    top: 4px;
+    margin-right: 1em;
+    width: 40px;
 }
diff --git a/dashboard-ui/css/tileitem.css b/dashboard-ui/css/tileitem.css
new file mode 100644
index 0000000000..c00673b6cd
--- /dev/null
+++ b/dashboard-ui/css/tileitem.css
@@ -0,0 +1,334 @@
+.tileItem {
+    background: #333;
+    padding: 10px 7px 5px;
+    margin: 3px 0;
+    text-shadow: none;
+    font-weight: normal!important;
+    display: block;
+    font-size: 14px;
+    position: relative;
+}
+
+
+    .tileItem .itemProgress {
+        font-size: 14px;
+    }
+
+    .tileItem .starRating {
+        width: 15px;
+        height: 13px;
+    }
+
+.tileImage {
+    display: inline-block;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center top;
+}
+
+.defaultTileImage {
+    background-color: #999;
+}
+
+.tileItem p {
+    margin: .5em 0 0;
+}
+
+.tileItem .imgUserItemRating {
+    height: 18px;
+    width: 18px;
+}
+
+.tileContent {
+    display: inline-block;
+    padding-left: 10px;
+    color: #fff;
+    text-align: left;
+    vertical-align: top;
+    overflow: hidden;
+}
+
+.backdropTileItem .tileImage {
+    height: 90px;
+    width: 45%;
+}
+
+.backdropTileItem .tileContent {
+    width: 50%;
+}
+
+.posterTileItem .tileImage {
+    height: 120px;
+    width: 30%;
+}
+
+.posterTileItem .tileContent {
+    width: 65%;
+}
+
+.squareTileItem .tileImage {
+    height: 100px;
+    width: 35%;
+}
+
+.squareTileItem .tileContent {
+    width: 60%;
+}
+
+.tileName {
+    font-weight: bold;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+    .tileName + .tileName {
+        margin-top: .75em;
+    }
+
+.tileItem .userDataIcons img {
+    height: 18px;
+    width: 18px;
+}
+
+@media all and (min-width: 750px) {
+    .tileItem {
+        width: 46%;
+        display: inline-block;
+        margin-left: 3px;
+        margin-right: 3px;
+    }
+
+    .backdropTileItem .tileImage {
+        height: 88px;
+    }
+
+    .posterTileItem .tileImage {
+        height: 120px;
+    }
+
+    .squareTileItem .tileImage {
+        height: 115px;
+    }
+}
+
+@media all and (min-width: 850px) {
+
+    .backdropTileItem .tileImage {
+        height: 105px;
+    }
+
+    .posterTileItem .tileImage {
+        height: 120px;
+    }
+
+    .posterTileItem {
+        width: 31%;
+    }
+
+    .tileItem p {
+        margin: .75em 0 0;
+    }
+
+    .tileItem .itemProgress {
+        font-size: 17px;
+    }
+}
+
+@media all and (min-width: 1000px) {
+    .tileItem {
+        width: 47.5%;
+    }
+
+    .posterTileItem {
+        width: 31%;
+    }
+
+    .backdropTileItem .tileImage {
+        height: 110px;
+    }
+
+    .posterTileItem .tileImage {
+        height: 136px;
+    }
+
+    .squareTileItem {
+        width: 31%;
+    }
+
+        .squareTileItem .tileImage {
+            height: 105px;
+        }
+}
+
+@media all and (min-width: 1200px) {
+    .backdropTileItem .tileImage {
+        height: 100px;
+    }
+
+    .posterTileItem .tileImage {
+        height: 160px;
+    }
+
+    .tileItem {
+        width: 31.5%;
+    }
+
+    .squareTileItem .tileImage {
+        height: 130px;
+    }
+}
+
+@media all and (min-width: 1440px) {
+    .backdropTileItem .tileImage {
+        height: 110px;
+    }
+
+    .posterTileItem .tileImage {
+        height: 150px;
+    }
+
+    .tileItem {
+        width: 31.5%;
+    }
+
+    .squareTileItem .tileImage {
+        height: 155px;
+    }
+
+    .posterTileItem {
+        width: 23.5%;
+    }
+}
+
+@media all and (min-width: 1700px) {
+
+    .backdropTileItem .tileImage {
+        height: 132px;
+    }
+
+    .posterTileItem .tileImage {
+        height: 170px;
+    }
+
+    .tileItem {
+        width: 32%;
+    }
+
+    .posterTileItem {
+        width: 23.5%;
+    }
+
+    .squareTileItem {
+        width: 23.5%;
+    }
+
+        .squareTileItem .tileImage {
+            height: 140px;
+        }
+}
+
+
+@media all and (min-width: 1920px) {
+    .tileItem {
+        width: 31.5%;
+    }
+
+    .tileImage {
+        height: 155px;
+    }
+
+    .posterTileItem {
+        width: 18.8%;
+    }
+
+        .posterTileItem .tileImage {
+            height: 160px;
+        }
+
+    .squareTileItem {
+        width: 18.8%;
+    }
+
+        .squareTileItem .tileImage {
+            height: 120px;
+        }
+}
+
+@media all and (min-width: 2000px) {
+    .tileItem {
+        width: 23.5%;
+    }
+
+    .tileImage {
+        height: 117px;
+    }
+
+    .posterTileItem {
+        width: 18.8%;
+    }
+
+        .posterTileItem .tileImage {
+            height: 160px;
+        }
+
+    .squareTileItem {
+        width: 18.8%;
+    }
+
+        .squareTileItem .tileImage {
+            height: 130px;
+        }
+}
+
+@media all and (min-width: 2200px) {
+    .tileItem {
+        width: 24%;
+    }
+
+    .tileImage {
+        height: 145px;
+    }
+
+    .posterTileItem {
+        width: 18.8%;
+    }
+
+        .posterTileItem .tileImage {
+            height: 185px;
+        }
+
+    .squareTileItem {
+        width: 18.8%;
+    }
+
+        .squareTileItem .tileImage {
+            height: 140px;
+        }
+}
+
+@media all and (min-width: 2540px) {
+    .tileItem {
+        width: 18.75%;
+    }
+
+    .tileImage {
+        height: 120px;
+    }
+
+    .posterTileItem {
+        width: 15.8%;
+    }
+
+        .posterTileItem .tileImage {
+            height: 180px;
+        }
+
+    .squareTileItem {
+        width: 15.8%;
+    }
+
+        .squareTileItem .tileImage {
+            height: 140px;
+        }
+}
diff --git a/dashboard-ui/itembynamedetails.html b/dashboard-ui/itembynamedetails.html
index 1d6848b416..60dd0346e4 100644
--- a/dashboard-ui/itembynamedetails.html
+++ b/dashboard-ui/itembynamedetails.html
@@ -49,7 +49,7 @@
             <div id="tvGenreTabs" class="itemTabs" style="display: none;">
                 <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
                     <a href="tvrecommended.html" data-role="button">Suggested</a>
-                    <a href="tvnextup.html" data-role="button">Next Up</a>
+                    <a href="tvnextup.html" data-role="button">Next up</a>
                     <a href="tvshows.html" data-role="button">Shows</a>
                     <a href="tvgenres.html" data-role="button" class="ui-btn-active">Genres</a>
                     <a href="tvpeople.html" data-role="button">Actors</a>
@@ -59,7 +59,7 @@
             <div id="tvPeopleTabs" class="itemTabs" style="display: none;">
                 <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
                     <a href="tvrecommended.html" data-role="button">Suggested</a>
-                    <a href="tvnextup.html" data-role="button">Next Up</a>
+                    <a href="tvnextup.html" data-role="button">Next up</a>
                     <a href="tvshows.html" data-role="button">Shows</a>
                     <a href="tvgenres.html" data-role="button">Genres</a>
                     <a href="tvpeople.html" data-role="button" class="ui-btn-active">Actors</a>
@@ -69,7 +69,7 @@
             <div id="tvStudioTabs" class="itemTabs" style="display: none;">
                 <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
                     <a href="tvrecommended.html" data-role="button">Suggested</a>
-                    <a href="tvnextup.html" data-role="button">Next Up</a>
+                    <a href="tvnextup.html" data-role="button">Next up</a>
                     <a href="tvshows.html" data-role="button">Shows</a>
                     <a href="tvgenres.html" data-role="button">Genres</a>
                     <a href="tvpeople.html" data-role="button">Actors</a>
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index 2a8225abda..845c39df28 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -48,7 +48,7 @@
             <div id="tvShowsTabs" class="itemTabs" style="display: none;">
                 <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
                     <a href="tvrecommended.html" data-role="button">Suggested</a>
-                    <a href="tvnextup.html" data-role="button">Next Up</a>
+                    <a href="tvnextup.html" data-role="button">Next up</a>
                     <a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a>
                     <a href="tvgenres.html" data-role="button">Genres</a>
                     <a href="tvpeople.html" data-role="button">Actors</a>
diff --git a/dashboard-ui/scripts/boxsets.js b/dashboard-ui/scripts/boxsets.js
index d9f596f560..781c5f138a 100644
--- a/dashboard-ui/scripts/boxsets.js
+++ b/dashboard-ui/scripts/boxsets.js
@@ -8,7 +8,7 @@
         IncludeItemTypes: "BoxSet",
         Recursive: true,
         Fields: "DisplayMediaType,ItemCounts,DateCreated,UserData",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/gamegenrepage.js b/dashboard-ui/scripts/gamegenrepage.js
index 99e66d3b64..a28ebe4980 100644
--- a/dashboard-ui/scripts/gamegenrepage.js
+++ b/dashboard-ui/scripts/gamegenrepage.js
@@ -8,7 +8,7 @@
 		MediaTypes: "Game",
 		Recursive: true,
 		Fields: "ItemCounts,DateCreated,UserData",
-		Limit: LibraryBrowser.getDetaultPageSize(),
+		Limit: LibraryBrowser.getDefaultPageSize(),
 		StartIndex: 0
 	};
 
diff --git a/dashboard-ui/scripts/gamespage.js b/dashboard-ui/scripts/gamespage.js
index fe5818e6c8..2739e0b401 100644
--- a/dashboard-ui/scripts/gamespage.js
+++ b/dashboard-ui/scripts/gamespage.js
@@ -11,7 +11,7 @@
         MediaTypes: "Game",
         Recursive: true,
         Fields: "UserData,DisplayMediaType,Genres,Studios",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/gamestudiospage.js b/dashboard-ui/scripts/gamestudiospage.js
index 5be659de8e..37b0acfb76 100644
--- a/dashboard-ui/scripts/gamestudiospage.js
+++ b/dashboard-ui/scripts/gamestudiospage.js
@@ -8,7 +8,7 @@
 		MediaTypes: "Game",
 		Recursive: true,
 		Fields: "ItemCounts,DateCreated,UserData",
-		Limit: LibraryBrowser.getDetaultPageSize(),
+		Limit: LibraryBrowser.getDefaultPageSize(),
 		StartIndex: 0
 	};
 
diff --git a/dashboard-ui/scripts/gamesystemspage.js b/dashboard-ui/scripts/gamesystemspage.js
index 2e859bdc64..f8d16c8947 100644
--- a/dashboard-ui/scripts/gamesystemspage.js
+++ b/dashboard-ui/scripts/gamesystemspage.js
@@ -9,7 +9,7 @@
 		IncludeItemTypes: "GamePlatform",
 		Recursive: true,
 		Fields: "ItemCounts,ItemCounts,DateCreated,UserData",
-		Limit: LibraryBrowser.getDetaultPageSize(),
+		Limit: LibraryBrowser.getDefaultPageSize(),
 		StartIndex: 0
 	};
 
diff --git a/dashboard-ui/scripts/itembynamedetailpage.js b/dashboard-ui/scripts/itembynamedetailpage.js
index 54bea5882e..57f3f52295 100644
--- a/dashboard-ui/scripts/itembynamedetailpage.js
+++ b/dashboard-ui/scripts/itembynamedetailpage.js
@@ -381,7 +381,7 @@
             IncludeItemTypes: "",
             Recursive: true,
             Fields: "UserData,DisplayMediaType,ItemCounts,DateCreated,AudioInfo,SeriesInfo",
-            Limit: LibraryBrowser.getDetaultPageSize(),
+            Limit: LibraryBrowser.getDefaultPageSize(),
             StartIndex: 0
         };
 
diff --git a/dashboard-ui/scripts/itemlistpage.js b/dashboard-ui/scripts/itemlistpage.js
index 914b811c43..5e0e38b13a 100644
--- a/dashboard-ui/scripts/itemlistpage.js
+++ b/dashboard-ui/scripts/itemlistpage.js
@@ -8,7 +8,7 @@
         SortBy: "SortName",
         SortOrder: "Ascending",
         Fields: "UserData,DisplayMediaType,ItemCounts,DateCreated",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 39c630bd53..5f8032afbe 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -4,7 +4,7 @@
 
     return {
 
-        getDetaultPageSize: function () {
+        getDefaultPageSize: function () {
 
             if (window.location.toString().toLowerCase().indexOf('localhost') != -1) {
                 return 100;
@@ -794,7 +794,8 @@
 
             if (item.PlayedPercentage) {
 
-                tooltip = '';
+                tooltip = Math.round(item.PlayedPercentage) + '% played';
+                
                 pct = item.PlayedPercentage;
             }
             else if (item.UserData && item.UserData.PlaybackPositionTicks && item.RunTimeTicks) {
@@ -804,11 +805,10 @@
                 pct = (item.UserData.PlaybackPositionTicks / item.RunTimeTicks) * 100;
             }
 
-            if (pct) {
+            if (pct && pct < 100) {
 
-                pct = parseInt(pct);
-
-                html += '<span title="' + tooltip + '" class="itemProgress">' + pct + '%</span>';
+                html += '<progress title="' + tooltip + '" class="itemProgressBar" min="0" max="100" value="' + pct + '">';
+                html += '</progress>';
             }
 
             var userData = item.UserData || {};
diff --git a/dashboard-ui/scripts/moviegenres.js b/dashboard-ui/scripts/moviegenres.js
index f04161a4e1..d91ad830a7 100644
--- a/dashboard-ui/scripts/moviegenres.js
+++ b/dashboard-ui/scripts/moviegenres.js
@@ -8,7 +8,7 @@
         IncludeItemTypes: "Movie",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/moviepeople.js b/dashboard-ui/scripts/moviepeople.js
index 8f3e6733ff..08f129bce9 100644
--- a/dashboard-ui/scripts/moviepeople.js
+++ b/dashboard-ui/scripts/moviepeople.js
@@ -9,7 +9,7 @@
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
         PersonTypes: "",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js
index dcafb29a55..3ad3d5ed09 100644
--- a/dashboard-ui/scripts/movies.js
+++ b/dashboard-ui/scripts/movies.js
@@ -10,7 +10,7 @@
         IncludeItemTypes: "Movie",
         Recursive: true,
         Fields: "UserData,DisplayMediaType,ItemCounts,DateCreated",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/moviestudios.js b/dashboard-ui/scripts/moviestudios.js
index a3e54f0d35..a56e082089 100644
--- a/dashboard-ui/scripts/moviestudios.js
+++ b/dashboard-ui/scripts/moviestudios.js
@@ -8,7 +8,7 @@
         IncludeItemTypes: "Movie",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/movietrailers.js b/dashboard-ui/scripts/movietrailers.js
index 36f3255752..2269c87649 100644
--- a/dashboard-ui/scripts/movietrailers.js
+++ b/dashboard-ui/scripts/movietrailers.js
@@ -10,7 +10,7 @@
         IncludeItemTypes: "Trailer",
         Recursive: true,
         Fields: "UserData,DisplayMediaType,ItemCounts,DateCreated",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/musicalbums.js b/dashboard-ui/scripts/musicalbums.js
index 5194798165..b52b69ac4a 100644
--- a/dashboard-ui/scripts/musicalbums.js
+++ b/dashboard-ui/scripts/musicalbums.js
@@ -8,7 +8,7 @@
         IncludeItemTypes: "MusicAlbum",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/musicartists.js b/dashboard-ui/scripts/musicartists.js
index 6f99fa28ab..05790b4a05 100644
--- a/dashboard-ui/scripts/musicartists.js
+++ b/dashboard-ui/scripts/musicartists.js
@@ -7,7 +7,7 @@
         SortOrder: "Ascending",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/musicgenres.js b/dashboard-ui/scripts/musicgenres.js
index 913ad0dfde..b386216ac1 100644
--- a/dashboard-ui/scripts/musicgenres.js
+++ b/dashboard-ui/scripts/musicgenres.js
@@ -8,7 +8,7 @@
         IncludeItemTypes: "Audio",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/tvgenres.js b/dashboard-ui/scripts/tvgenres.js
index af1f380278..31f070f1e0 100644
--- a/dashboard-ui/scripts/tvgenres.js
+++ b/dashboard-ui/scripts/tvgenres.js
@@ -8,7 +8,7 @@
         IncludeItemTypes: "Series",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/tvpeople.js b/dashboard-ui/scripts/tvpeople.js
index 04f4f30bd0..34c0a916a4 100644
--- a/dashboard-ui/scripts/tvpeople.js
+++ b/dashboard-ui/scripts/tvpeople.js
@@ -5,11 +5,11 @@
 
         SortBy: "SortName",
         SortOrder: "Ascending",
-        IncludeItemTypes: "Series",
+        IncludeItemTypes: "Series,Season,Episode",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
         PersonTypes: "",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/tvshows.js b/dashboard-ui/scripts/tvshows.js
index 4f6ef56569..8cf99a4115 100644
--- a/dashboard-ui/scripts/tvshows.js
+++ b/dashboard-ui/scripts/tvshows.js
@@ -10,7 +10,7 @@
         IncludeItemTypes: "Series",
         Recursive: true,
         Fields: "DisplayMediaType,SeriesInfo,ItemCounts,DateCreated,UserData",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/scripts/tvstudios.js b/dashboard-ui/scripts/tvstudios.js
index 659a7949e1..a55008b8bc 100644
--- a/dashboard-ui/scripts/tvstudios.js
+++ b/dashboard-ui/scripts/tvstudios.js
@@ -8,7 +8,7 @@
         IncludeItemTypes: "Series",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
-        Limit: LibraryBrowser.getDetaultPageSize(),
+        Limit: LibraryBrowser.getDefaultPageSize(),
         StartIndex: 0
     };
 
diff --git a/dashboard-ui/tvgenres.html b/dashboard-ui/tvgenres.html
index 2b2a314ed7..0cad39aa92 100644
--- a/dashboard-ui/tvgenres.html
+++ b/dashboard-ui/tvgenres.html
@@ -10,7 +10,7 @@
         <div data-role="content">
             <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
                 <a href="tvrecommended.html" data-role="button">Suggested</a>
-                <a href="tvnextup.html" data-role="button">Next Up</a>
+                <a href="tvnextup.html" data-role="button">Next up</a>
                 <a href="tvshows.html" data-role="button">Shows</a>
                 <a href="tvgenres.html" data-role="button" class="ui-btn-active">Genres</a>
                 <a href="tvpeople.html" data-role="button">Actors</a>
diff --git a/dashboard-ui/tvnextup.html b/dashboard-ui/tvnextup.html
index 09b80bf80c..d42fc48194 100644
--- a/dashboard-ui/tvnextup.html
+++ b/dashboard-ui/tvnextup.html
@@ -10,7 +10,7 @@
         <div data-role="content">
             <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
                 <a href="tvrecommended.html" data-role="button">Suggested</a>
-                <a href="tvnextup.html" data-role="button" class="ui-btn-active">Next Up</a>
+                <a href="tvnextup.html" data-role="button" class="ui-btn-active">Next up</a>
                 <a href="tvshows.html" data-role="button">Shows</a>
                 <a href="tvgenres.html" data-role="button">Genres</a>
                 <a href="tvpeople.html" data-role="button">Actors</a>
diff --git a/dashboard-ui/tvpeople.html b/dashboard-ui/tvpeople.html
index 7464091fdc..db919f8972 100644
--- a/dashboard-ui/tvpeople.html
+++ b/dashboard-ui/tvpeople.html
@@ -10,7 +10,7 @@
         <div data-role="content">
             <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
                 <a href="tvrecommended.html" data-role="button">Suggested</a>
-                <a href="tvnextup.html" data-role="button">Next Up</a>
+                <a href="tvnextup.html" data-role="button">Next up</a>
                 <a href="tvshows.html" data-role="button">Shows</a>
                 <a href="tvgenres.html" data-role="button">Genres</a>
                 <a href="tvpeople.html" data-role="button" class="ui-btn-active">Actors</a>
diff --git a/dashboard-ui/tvrecommended.html b/dashboard-ui/tvrecommended.html
index a0931ae188..26160c9ceb 100644
--- a/dashboard-ui/tvrecommended.html
+++ b/dashboard-ui/tvrecommended.html
@@ -10,7 +10,7 @@
         <div data-role="content">
             <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
                 <a href="tvrecommended.html" data-role="button" class="ui-btn-active">Suggested</a>
-                <a href="tvnextup.html" data-role="button">Next Up</a>
+                <a href="tvnextup.html" data-role="button">Next up</a>
                 <a href="tvshows.html" data-role="button">Shows</a>
                 <a href="tvgenres.html" data-role="button">Genres</a>
                 <a href="tvpeople.html" data-role="button">Actors</a>
diff --git a/dashboard-ui/tvshows.html b/dashboard-ui/tvshows.html
index e5857fc783..f69cc3ddc7 100644
--- a/dashboard-ui/tvshows.html
+++ b/dashboard-ui/tvshows.html
@@ -10,7 +10,7 @@
         <div data-role="content">
             <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
                 <a href="tvrecommended.html" data-role="button">Suggested</a>
-                <a href="tvnextup.html" data-role="button">Next Up</a>
+                <a href="tvnextup.html" data-role="button">Next up</a>
                 <a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a>
                 <a href="tvgenres.html" data-role="button">Genres</a>
                 <a href="tvpeople.html" data-role="button">Actors</a>
diff --git a/dashboard-ui/tvstudios.html b/dashboard-ui/tvstudios.html
index 067a4301c5..d95649908e 100644
--- a/dashboard-ui/tvstudios.html
+++ b/dashboard-ui/tvstudios.html
@@ -10,7 +10,7 @@
         <div data-role="content">
             <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
                 <a href="tvrecommended.html" data-role="button">Suggested</a>
-                <a href="tvnextup.html" data-role="button">Next Up</a>
+                <a href="tvnextup.html" data-role="button">Next up</a>
                 <a href="tvshows.html" data-role="button">Shows</a>
                 <a href="tvgenres.html" data-role="button">Genres</a>
                 <a href="tvpeople.html" data-role="button">Actors</a>