added movie trailers page

dashboard-ui/boxset.html

@@ -13,6 +13,7 @@
                 <a href="moviesrecommended.html" data-role="button">Suggested</a>
                 <a href="movies.html" data-role="button">Movies</a>
                 <a href="boxsets.html" data-role="button" class="ui-btn-active">Box Sets</a>
+                <a href="movietrailers.html" data-role="button">Trailers</a>
                 <a href="moviegenres.html" data-role="button">Genres</a>
                 <a href="moviepeople.html" data-role="button">People</a>
                 <a href="moviestudios.html" data-role="button">Studios</a>

dashboard-ui/boxsets.html

@@ -12,6 +12,7 @@
                 <a href="moviesrecommended.html" data-role="button">Suggested</a>
                 <a href="movies.html" data-role="button">Movies</a>
                 <a href="boxsets.html" data-role="button" class="ui-btn-active">Box Sets</a>
+                <a href="movietrailers.html" data-role="button">Trailers</a>
                 <a href="moviegenres.html" data-role="button">Genres</a>
                 <a href="moviepeople.html" data-role="button">People</a>
                 <a href="moviestudios.html" data-role="button">Studios</a>

dashboard-ui/css/librarybrowser.css

@@ -279,3 +279,15 @@
         max-height: 200px;
     }
 }
+
+@media all and (min-width: 2000px) {
+    .posterDetailViewItem {
+        width: 23.5%;
+    }
+}
+
+@media all and (min-width: 2540px) {
+    .posterDetailViewItem {
+        width: 18.75%;
+    }
+}

dashboard-ui/moviegenres.html

@@ -12,6 +12,7 @@
                 <a href="moviesrecommended.html" data-role="button">Suggested</a>
                 <a href="movies.html" data-role="button">Movies</a>
                 <a href="boxsets.html" data-role="button">Box Sets</a>
+                <a href="movietrailers.html" data-role="button">Trailers</a>
                 <a href="moviegenres.html" data-role="button" class="ui-btn-active">Genres</a>
                 <a href="moviepeople.html" data-role="button">People</a>
                 <a href="moviestudios.html" data-role="button">Studios</a>

dashboard-ui/moviepeople.html

@@ -12,6 +12,7 @@
                 <a href="moviesrecommended.html" data-role="button">Suggested</a>
                 <a href="movies.html" data-role="button">Movies</a>
                 <a href="boxsets.html" data-role="button">Box Sets</a>
+                <a href="movietrailers.html" data-role="button">Trailers</a>
                 <a href="moviegenres.html" data-role="button">Genres</a>
                 <a href="moviepeople.html" data-role="button" class="ui-btn-active">People</a>
                 <a href="moviestudios.html" data-role="button">Studios</a>

dashboard-ui/movies.html

@@ -12,6 +12,7 @@
                 <a href="moviesrecommended.html" data-role="button">Suggested</a>
                 <a href="movies.html" data-role="button" class="ui-btn-active">Movies</a>
                 <a href="boxsets.html" data-role="button">Box Sets</a>
+                <a href="movietrailers.html" data-role="button">Trailers</a>
                 <a href="moviegenres.html" data-role="button">Genres</a>
                 <a href="moviepeople.html" data-role="button">People</a>
                 <a href="moviestudios.html" data-role="button">Studios</a>

dashboard-ui/moviesrecommended.html

@@ -12,6 +12,7 @@
                 <a href="moviesrecommended.html" data-role="button" class="ui-btn-active">Suggested</a>
                 <a href="movies.html" data-role="button">Movies</a>
                 <a href="boxsets.html" data-role="button">Box Sets</a>
+                <a href="movietrailers.html" data-role="button">Trailers</a>
                 <a href="moviegenres.html" data-role="button">Genres</a>
                 <a href="moviepeople.html" data-role="button">People</a>
                 <a href="moviestudios.html" data-role="button">Studios</a>

dashboard-ui/moviestudios.html

@@ -12,6 +12,7 @@
                 <a href="moviesrecommended.html" data-role="button">Suggested</a>
                 <a href="movies.html" data-role="button">Movies</a>
                 <a href="boxsets.html" data-role="button">Box Sets</a>
+                <a href="movietrailers.html" data-role="button">Trailers</a>
                 <a href="moviegenres.html" data-role="button">Genres</a>
                 <a href="moviepeople.html" data-role="button">People</a>
                 <a href="moviestudios.html" data-role="button" class="ui-btn-active">Studios</a>

dashboard-ui/movietrailers.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Media Browser</title>
+</head>
+<body>
+    <div id="movieTrailersPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
+        <h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
+            <img src="css/images/home.png"></a>Movies</h1>
+        <div data-role="content">
+            <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
+                <a href="moviesrecommended.html" data-role="button">Suggested</a>
+                <a href="movies.html" data-role="button">Movies</a>
+                <a href="boxsets.html" data-role="button">Box Sets</a>
+                <a href="movietrailers.html" data-role="button" class="ui-btn-active">Trailers</a>
+                <a href="moviegenres.html" data-role="button">Genres</a>
+                <a href="moviepeople.html" data-role="button">People</a>
+                <a href="moviestudios.html" data-role="button">Studios</a>
+            </div>
+            <div class="viewSettings">
+                <div style="display: inline-block;">
+                    <select data-mini="true" data-inline="true" id="selectView" name="selectView">
+                        <option value="Tile">Tile</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="radioBudget" value="off" data-sortby="Budget" data-mini="true">
+                    <label for="radioBudget">Budget</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="radioPlayCount" value="off" data-sortby="PlayCount" data-mini="true">
+                    <label for="radioPlayCount">Play Count</label>
+
+                    <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRandom" value="off" data-sortby="Random" data-mini="true">
+                    <label for="radioRandom">Random</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/movietrailers.js

@@ -0,0 +1,142 @@
+(function ($, document) {
+
+    var view = "Tile";
+
+    // The base query options
+    var query = {
+
+        SortBy: "SortName",
+        SortOrder: "Ascending",
+        IncludeItemTypes: "Trailer",
+        Recursive: true,
+        Fields: "PrimaryImageAspectRatio,UserData,DisplayMediaType,ItemCounts,DateCreated",
+        Limit: LibraryBrowser.getDetaultPageSize(),
+        StartIndex: 0
+    };
+
+    function reloadItems(page) {
+
+        Dashboard.showLoadingMsg();
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
+
+            var html = '';
+
+            var showPaging = result.TotalRecordCount > query.Limit;
+
+            if (showPaging) {
+                html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true);
+            }
+
+            if (view == "Tile") {
+                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);
+            }
+
+            var elem = $('#items', page).html(html).trigger('create');
+
+            $('select', elem).on('change', function () {
+                query.StartIndex = (parseInt(this.value) - 1) * query.Limit;
+                reloadItems(page);
+            });
+
+            $('.btnNextPage', elem).on('click', function () {
+                query.StartIndex += query.Limit;
+                reloadItems(page);
+            });
+
+            $('.btnPreviousPage', elem).on('click', function () {
+                query.StartIndex -= query.Limit;
+                reloadItems(page);
+            });
+
+            Dashboard.hideLoadingMsg();
+        });
+    }
+
+    $(document).on('pageinit', "#movieTrailersPage", 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('pagebeforeshow', "#movieTrailersPage", function () {
+
+        reloadItems(this);
+
+    }).on('pageshow', "#movieTrailersPage", function () {
+
+
+        // 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);