add filters to folder browsing

dashboard-ui/css/librarybrowser.css

@@ -125,6 +125,9 @@
 .itemMiscInfo {
     color: #ddd;
     font-size: 14px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .mediaInfoStream {
@@ -210,6 +213,7 @@
     color: #fff;
     text-align: left;
     vertical-align: top;
+    overflow: hidden;
 }
 
 .posterDetailViewName {

dashboard-ui/itemlist.html

@@ -8,8 +8,84 @@
         <div data-role="content" class="itemListContent">
 
             <h1 id="itemName" class="listHeader" style="margin-top: .5em;"></h1>
+            <div class="viewSettings">
+                <div style="display: inline-block;">
+                    <select data-mini="true" data-inline="true" id="selectView" name="selectView">
+                        <option value="Backdrop">Backdrop</option>
+                        <option value="Poster">Poster</option>
+                    </select>
+                </div>
+                <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
+                <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+            </div>
             <div id="items"></div>
         </div>
+        <div data-role="panel" id="sortPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
+
+            <form>
+                <fieldset data-role="controlgroup">
+                    <legend>
+                        <strong>Sort By:</strong>
+                    </legend>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
+                    <label for="radioSortName">Name</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating" data-mini="true">
+                    <label for="radioCommunityRating">Community Rating</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated" data-mini="true">
+                    <label for="radioDateCreated">Date Added</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed" data-mini="true">
+                    <label for="radioDatePlayed">Date Played</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate" data-mini="true">
+                    <label for="radioPremiereDate">Date Released</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime" data-mini="true">
+                    <label for="radioRuntime">Runtime</label>
+                </fieldset>
+
+                <fieldset data-role="controlgroup">
+                    <legend>
+                        <strong>Sort Order:</strong>
+                    </legend>
+
+                    <input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked" data-sortorder="Ascending" data-mini="true">
+                    <label for="radioAscending">Ascending</label>
+
+                    <input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="off" data-sortorder="Descending" data-mini="true">
+                    <label for="radioDescending">Descending</label>
+                </fieldset>
+            </form>
+        </div>
+        <div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
+            <form>
+                <fieldset data-role="controlgroup">
+                    <legend>
+                        <strong>Filters:</strong>
+                    </legend>
+                    <input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-theme="c" data-filter="IsPlayed" data-mini="true">
+                    <label for="chkPlayed">Watched</label>
+
+                    <input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-theme="c" data-filter="IsUnPlayed" data-mini="true">
+                    <label for="chkUnplayed">Unwatched</label>
+
+                    <input class="chkStandardFilter" type="checkbox" name="chkResumable" id="chkResumable" data-theme="c" data-filter="IsResumable" data-mini="true">
+                    <label for="chkResumable">Resumable</label>
+
+                    <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-theme="c" data-filter="IsFavorite" data-mini="true">
+                    <label for="chkIsFavorite">Favorite</label>
+
+                    <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-theme="c" data-filter="Likes" data-mini="true">
+                    <label for="chkLikes">Likes</label>
+
+                    <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-theme="c" data-filter="Dislikes" data-mini="true">
+                    <label for="chkDislikes">Dislikes</label>
+                </fieldset>
+            </form>
+        </div>
     </div>
 </body>
 </html>

dashboard-ui/scripts/itemlistpage.js

@@ -1,5 +1,7 @@
 (function ($, document) {
 
+    var view = "Poster";
+    
     // The base query options
     var query = {
 
@@ -26,10 +28,19 @@
                 html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true);
             }
 
+            if (view == "Backdrop") {
+                html += LibraryBrowser.getPosterDetailViewHtml({
+                    items: result.Items,
+                    useAverageAspectRatio: true,
+                    preferBackdrop: true
+                });
+            }
+            else if (view == "Poster") {
                 html += LibraryBrowser.getPosterDetailViewHtml({
                     items: result.Items,
                     useAverageAspectRatio: true
                 });
+            }
 
             if (showPaging) {
                 html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@@ -64,12 +75,76 @@
 
     $(document).on('pageinit', "#itemListPage", function () {
 
+        var page = this;
+
+        $('.radioSortBy', this).on('click', function () {
+            query.StartIndex = 0;
+            query.SortBy = this.getAttribute('data-sortby');
+            reloadItems(page);
+        });
+
+        $('.radioSortOrder', this).on('click', function () {
+            query.StartIndex = 0;
+            query.SortOrder = this.getAttribute('data-sortorder');
+            reloadItems(page);
+        });
+
+        $('.chkStandardFilter', this).on('change', function () {
+
+            var filterName = this.getAttribute('data-filter');
+            var filters = query.Filters || "";
+
+            filters = (',' + filters).replace(',' + filterName, '').substring(1);
+
+            if (this.checked) {
+                filters = filters ? (filters + ',' + filterName) : filterName;
+            }
+
+            query.StartIndex = 0;
+            query.Filters = filters;
+
+            reloadItems(page);
+        });
+
+        $('#selectView', this).on('change', function () {
+
+            view = this.value;
+
+            reloadItems(page);
+        });
 
     }).on('pageshow', "#itemListPage", function () {
 
         query.ParentId = getParameterByName('parentId');
+        query.Filters = "";
+        query.SortBy = "SortName";
+        query.SortOrder = "Ascending";
+        
         reloadItems(this);
 
+        // Reset form values using the last used query
+        $('.radioSortBy', this).each(function () {
+
+            this.checked = query.SortBy == this.getAttribute('data-sortby');
+
+        }).checkboxradio('refresh');
+
+        $('.radioSortOrder', this).each(function () {
+
+            this.checked = query.SortOrder == this.getAttribute('data-sortorder');
+
+        }).checkboxradio('refresh');
+
+        $('.chkStandardFilter', this).each(function () {
+
+            var filters = "," + (query.Filters || "");
+            var filterName = this.getAttribute('data-filter');
+
+            this.checked = filters.indexOf(',' + filterName) != -1;
+
+        }).checkboxradio('refresh');
+
+        $('#selectView', this).val(view).selectmenu('refresh');
     });
 
 })(jQuery, document);

dashboard-ui/scripts/librarybrowser.js

@@ -125,7 +125,7 @@
                     html += '<p class="itemMiscInfo">' + childText + '</p>';
                 }
                 else {
-                    html += '<p class="itemMiscInfo">' + LibraryBrowser.getMiscInfoHtml(item, false) + '</p>';
+                    html += '<p class="itemMiscInfo">' + LibraryBrowser.getMiscInfoHtml(item) + '</p>';
                 }
 
                 html += '<p class="userDataIcons">' + LibraryBrowser.getUserDataIconsHtml(item) + '</p>';
@@ -836,13 +836,18 @@
             return html;
         },
 
-        getMiscInfoHtml: function (item, includeMediaInfo) {
+        getMiscInfoHtml: function (item) {
 
             var miscInfo = [];
 
             if (item.ProductionYear) {
+
+                if (item.Status == "Continuing") {
+                    miscInfo.push(item.ProductionYear + "-Present");
+                } else {
                     miscInfo.push(item.ProductionYear);
                 }
+            }
 
             if (item.OfficialRating) {
                 miscInfo.push(item.OfficialRating);
@@ -857,16 +862,13 @@
                 miscInfo.push(parseInt(minutes) + "min");
             }
 
-            if (includeMediaInfo !== false) {
+            if (item.MediaType && item.DisplayMediaType) {
-                if (item.DisplayMediaType) {
                 miscInfo.push(item.DisplayMediaType);
             }
 
             if (item.VideoFormat && item.VideoFormat !== 'Standard') {
                 miscInfo.push(item.VideoFormat);
             }
-            }
-
 
             return miscInfo.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
         },

dashboard-ui/scripts/moviepeople.js

@@ -127,6 +127,15 @@
             this.checked = query.SortOrder == this.getAttribute('data-sortorder');
 
         }).checkboxradio('refresh');
+
+        $('.chkPersonTypeFilter', this).each(function () {
+
+            var filters = "," + (query.PersonTypes || "");
+            var filterName = this.getAttribute('data-filter');
+
+            this.checked = filters.indexOf(',' + filterName) != -1;
+
+        }).checkboxradio('refresh');
     });
 
 })(jQuery, document);

dashboard-ui/scripts/movies.js

@@ -139,7 +139,6 @@
 
     }).on('pageshow', "#moviesPage", function () {
 
-
         // Reset form values using the last used query
         $('.radioSortBy', this).each(function () {
 

dashboard-ui/scripts/tvpeople.js

@@ -136,6 +136,15 @@
             this.checked = filters.indexOf(',' + filterName) != -1;
 
         }).checkboxradio('refresh');
+
+        $('.chkPersonTypeFilter', this).each(function () {
+
+            var filters = "," + (query.PersonTypes || "");
+            var filterName = this.getAttribute('data-filter');
+
+            this.checked = filters.indexOf(',' + filterName) != -1;
+
+        }).checkboxradio('refresh');
     });
 
 })(jQuery, document);

dashboard-ui/scripts/tvseries.js

@@ -69,6 +69,7 @@
 
         $('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
 
+        LibraryBrowser.renderPremiereDate($('#itemPremiereDate', page), item);
         LibraryBrowser.renderGenres($('#itemGenres', page), item);
         LibraryBrowser.renderStudios($('#itemStudios', page), item);
         renderUserDataIcons(page, item);

dashboard-ui/tvseries.html

@@ -35,7 +35,7 @@
                     <p id="itemRatings"></p>
                     <p id="itemCommunityRating"></p>
                     <p id="itemMiscInfo" class="itemMiscInfo"></p>
-
+                    <p id="itemPremiereDate"></p>
                     <p id="itemGenres"></p>
                     <p id="itemStudios"></p>
                     <p id="itemLinks"></p>