add reel

dashboard-ui/collections.html

@@ -10,6 +10,7 @@
             <a href="movieslatest.html">${TabLatest}</a>
             <a href="moviesrecommended.html">${TabSuggested}</a>
             <a href="movies.html">${TabMovies}</a>
+            <a href="movietrailers.html">${TabTrailers}</a>
             <a href="#" class="ui-btn-active">${TabCollections}</a>
             <a href="moviegenres.html">${TabGenres}</a>
             <a href="moviepeople.html">${TabPeople}</a>

dashboard-ui/css/librarybrowser.css

@@ -111,7 +111,7 @@
 @media all and (min-width: 1200px) {
 
     .ehsContent {
-        width: 84%;
+        width: 90%;
     }
 }
 

dashboard-ui/edititemmetadata.html

@@ -34,7 +34,8 @@
                             <button class="btnSave" type="submit" data-theme="a" data-icon="check" data-mini="true" data-inline="true">
                                 ${ButtonSave}
                             </button>
-                            <button class="btnRefresh btnRefreshAdvanced" type="button" data-icon="refresh" data-mini="true" data-inline="true">${ButtonRefresh}</button>
+                            <button class="btnRefresh btnSimpleRefresh" type="button" data-icon="refresh" data-mini="true" data-inline="true">${ButtonRefresh}</button>
+                            <button class="btnRefresh btnRefreshAdvanced" type="button" data-icon="refresh" data-mini="true" data-inline="true">${ButtonAdvancedRefresh}</button>
                             <button id="btnIdentify" type="button" data-icon="info" data-mini="true" data-inline="true">${ButtonIdentify}</button>
                             <div style="vertical-align: bottom; display: inline-block;">
                                 <div id="fldDelete" style="display: none;">

dashboard-ui/itembynamedetails.html

@@ -11,6 +11,7 @@
                 <a href="movieslatest.html">${TabLatest}</a>
                 <a href="moviesrecommended.html">${TabSuggested}</a>
                 <a href="movies.html">${TabMovies}</a>
+                <a href="movietrailers.html">${TabTrailers}</a>
                 <a href="collections.html?context=movies">${TabCollections}</a>
                 <a href="moviegenres.html" class="ui-btn-active">${TabGenres}</a>
                 <a href="moviepeople.html">${TabPeople}</a>
@@ -22,6 +23,7 @@
                 <a href="movieslatest.html">${TabLatest}</a>
                 <a href="moviesrecommended.html">${TabSuggested}</a>
                 <a href="movies.html">${TabMovies}</a>
+                <a href="movietrailers.html">${TabTrailers}</a>
                 <a href="collections.html?context=movies">${TabCollections}</a>
                 <a href="moviegenres.html">${TabGenres}</a>
                 <a href="moviepeople.html" class="ui-btn-active">${TabPeople}</a>
@@ -33,6 +35,7 @@
                 <a href="movieslatest.html">${TabLatest}</a>
                 <a href="moviesrecommended.html">${TabSuggested}</a>
                 <a href="movies.html">${TabMovies}</a>
+                <a href="movietrailers.html">${TabTrailers}</a>
                 <a href="collections.html?context=movies">${TabCollections}</a>
                 <a href="moviegenres.html">${TabGenres}</a>
                 <a href="moviepeople.html">${TabPeople}</a>

dashboard-ui/itemdetails.html

@@ -34,6 +34,7 @@
                 <a href="movieslatest.html">${TabLatest}</a>
                 <a href="moviesrecommended.html">${TabSuggested}</a>
                 <a href="movies.html" class="lnkMovies">${TabMovies}</a>
+                <a href="movietrailers.html">${TabTrailers}</a>
                 <a href="collections.html?context=movies" class="lnkCollections">${TabCollections}</a>
                 <a href="moviegenres.html">${TabGenres}</a>
                 <a href="moviepeople.html">${TabPeople}</a>

dashboard-ui/moviegenres.html

@@ -10,6 +10,7 @@
             <a href="movieslatest.html">${TabLatest}</a>
             <a href="moviesrecommended.html">${TabSuggested}</a>
             <a href="movies.html">${TabMovies}</a>
+            <a href="movietrailers.html">${TabTrailers}</a>
             <a href="collections.html?context=movies">${TabCollections}</a>
             <a href="#" class="ui-btn-active">${TabGenres}</a>
             <a href="moviepeople.html">${TabPeople}</a>

dashboard-ui/moviepeople.html

@@ -10,6 +10,7 @@
             <a href="movieslatest.html">${TabLatest}</a>
             <a href="moviesrecommended.html">${TabSuggested}</a>
             <a href="movies.html">${TabMovies}</a>
+            <a href="movietrailers.html">${TabTrailers}</a>
             <a href="collections.html?context=movies">${TabCollections}</a>
             <a href="moviegenres.html">${TabGenres}</a>
             <a href="#" class="ui-btn-active">${TabPeople}</a>

dashboard-ui/movieslatest.html

@@ -10,6 +10,7 @@
             <a href="#" class="ui-btn-active">${TabLatest}</a>
             <a href="moviesrecommended.html">${TabSuggested}</a>
             <a href="movies.html">${TabMovies}</a>
+            <a href="movietrailers.html">${TabTrailers}</a>
             <a href="collections.html?context=movies">${TabCollections}</a>
             <a href="moviegenres.html">${TabGenres}</a>
             <a href="moviepeople.html">${TabPeople}</a>

dashboard-ui/moviesrecommended.html

@@ -10,6 +10,7 @@
             <a href="movieslatest.html">${TabLatest}</a>
             <a href="#" class="ui-btn-active">${TabSuggested}</a>
             <a href="movies.html">${TabMovies}</a>
+            <a href="movietrailers.html">${TabTrailers}</a>
             <a href="collections.html?context=movies">${TabCollections}</a>
             <a href="moviegenres.html">${TabGenres}</a>
             <a href="moviepeople.html">${TabPeople}</a>

dashboard-ui/moviestudios.html

@@ -10,6 +10,7 @@
             <a href="movieslatest.html">${TabLatest}</a>
             <a href="moviesrecommended.html">${TabSuggested}</a>
             <a href="movies.html">${TabMovies}</a>
+            <a href="movietrailers.html">${TabTrailers}</a>
             <a href="collections.html?context=movies">${TabCollections}</a>
             <a href="moviegenres.html">${TabGenres}</a>
             <a href="moviepeople.html">${TabPeople}</a>

dashboard-ui/movietrailers.html

@@ -4,7 +4,18 @@
     <title>${TitleMediaBrowser}</title>
 </head>
 <body>
-    <div id="movieTrailersPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-theme="b">
+    <div id="movieTrailersPage" data-role="page" class="page libraryPage" data-theme="b">
+
+        <div class="libraryViewNav scopedLibraryViewNav">
+            <a href="movieslatest.html">${TabLatest}</a>
+            <a href="moviesrecommended.html">${TabSuggested}</a>
+            <a href="movies.html">${TabMovies}</a>
+            <a href="movietrailers.html" class="ui-btn-active">${TabTrailers}</a>
+            <a href="collections.html?context=movies">${TabCollections}</a>
+            <a href="moviegenres.html">${TabGenres}</a>
+            <a href="moviepeople.html">${TabPeople}</a>
+            <a href="moviestudios.html">${TabStudios}</a>
+        </div>
 
         <div class="alphabetPicker">
         </div>
@@ -12,8 +23,17 @@
             <div class="viewSettings">
                 <div class="listTopPaging">
                 </div>
+                <button class="btnTrailerReel" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonTrailerReel}</button>
+                <div class="selectionCommands" style="display: none;">
+                    <div class="selectionCommandsControlGroup">
+                        <button class="btnAddToPlaylist" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToPlaylist}">${ButtonAddToPlaylist}</button>
+                        <button class="btnMergeVersions" data-mini="true" data-icon="recycle" data-inline="true" title="${ButtonGroupVersions}">${ButtonGroupVersions}</button>
+                        <button class="btnAddToCollection" data-mini="true" data-icon="plus" data-inline="true" title="${ButtonAddToCollection}">${ButtonAddToCollection}</button>
+                    </div>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
+            <p class="noItemsMessage" style="display:none;">${MessageNoTrailersFound}</p>
         </div>
 
         <div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">
@@ -27,14 +47,6 @@
 
                 <div class="tabView viewTab">
 
-                    <div>
-                        <label for="selectView">${LabelView}</label>
-                        <select id="selectView">
-                            <option value="Poster">${OptionPoster}</option>
-                            <option value="List">${OptionList}</option>
-                        </select>
-                    </div>
-                    <br />
                     <div>
                         <label for="selectPageSize">${LabelPageSize}</label>
                         <select id="selectPageSize"></select>
@@ -43,7 +55,9 @@
                 </div>
                 <div class="tabFilter viewTab">
                     <fieldset data-role="controlgroup">
-                        <legend>${HeaderFilters}</legend>
+                        <legend>
+                            ${HeaderFilters}
+                        </legend>
                         <input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-filter="IsPlayed" data-mini="true">
                         <label for="chkPlayed">${OptionPlayed}</label>
 
@@ -61,7 +75,6 @@
 
                         <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true">
                         <label for="chkDislikes">${OptionDislikes}</label>
-
                     </fieldset>
 
                 </div>
@@ -74,33 +87,25 @@
                         <input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
                         <label for="radioSortName">${OptionNameSort}</label>
 
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioBudget" value="off" data-sortby="Budget" data-mini="true">
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating,SortName" data-mini="true">
-                        <label for="radioBudget">${OptionBudget}</label>
+                        <label for="radioCommunityRating">${OptionImdbRating}</label>
 
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating" data-mini="true">
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated,SortName" data-mini="true">
-                        <label for="radioCommunityRating">${OptionCommunityRating}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCriticRating" value="off" data-sortby="CriticRating" data-mini="true">
-                        <label for="radioCriticRating">${OptionCriticRating}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated" data-mini="true">
                         <label for="radioDateCreated">${OptionDateAdded}</label>
 
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed" data-mini="true">
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed,SortName" data-mini="true">
                         <label for="radioDatePlayed">${OptionDatePlayed}</label>
 
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount" data-mini="true">
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioContentRating" value="off" data-sortby="OfficialRating,SortName" data-mini="true">
+                        <label for="radioContentRating">${OptionParentalRating}</label>
+
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount,SortName" data-mini="true">
                         <label for="radioPlayCount">${OptionPlayCount}</label>
 
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate" data-mini="true">
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate,SortName" data-mini="true">
                         <label for="radioPremiereDate">${OptionReleaseDate}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioRevenue" value="off" data-sortby="Revenue" data-mini="true">
-                        <label for="radioRevenue">${OptionRevenue}</label>
-
-                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime" data-mini="true">
-                        <label for="radioRuntime">${OptionRuntime}</label>
                     </fieldset>
+
                     <fieldset data-role="controlgroup">
                         <legend>
                             ${HeaderSortOrder}
@@ -115,6 +120,38 @@
                 </div>
             </form>
         </div>
+
+        <div data-role="popup" class="popup popupTrailerReel" data-theme="a">
+
+            <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
+                <h3 style="margin: .5em;">${HeaderTrailerReel}</h3>
+            </div>
+
+            <div data-role="content">
+
+                <form class="popupTrailerReelForm" style="min-width: 200px;">
+
+                    <p>${HeaderTrailerReelHelp}</p>
+                    <div>
+                        <label for="chkUnwatchedOnly">${OptionPlayUnwatchedTrailersOnly}</label>
+                        <input id="chkUnwatchedOnly" data-mini="true" type="checkbox" />
+                    </div>
+                    <br />
+                    <p>
+                        <button type="submit" data-theme="b" data-icon="check" data-mini="true">
+                            ${ButtonOk}
+                        </button>
+                        <button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');" data-mini="true">
+                            ${ButtonCancel}
+                        </button>
+                    </p>
+                </form>
+            </div>
+
+        </div>
+        <script type="text/javascript">
+            $('.popupTrailerReelForm').off('submit', MovieTrailerPage.onSubmit).on('submit', MovieTrailerPage.onSubmit);
+        </script>
     </div>
 </body>
 </html>

dashboard-ui/scripts/edititemmetadata.js

@@ -1169,6 +1169,17 @@
         $('#selectImageRefreshMode', page).val('missing').selectmenu('refresh');
     }
 
+    function performSimpleRefresh(page) {
+
+        refreshWithOptions(page, {
+
+            Recursive: true,
+            ImageRefreshMode: 'FullRefresh',
+            MetadataRefreshMode: 'FullRefresh',
+            ReplaceAllMetadata: true
+        });
+    }
+
     function refreshFromPopupOptions(page) {
 
         var metadataRefreshMode = $('#selectMetadataRefreshMode', page).val();
@@ -1208,6 +1219,11 @@
             performAdvancedRefresh(page);
         });
 
+        $('.btnSimpleRefresh', this).on('click', function () {
+
+            performSimpleRefresh(page);
+        });
+
         $('#btnIdentify', page).on('click', function () {
 
             showIdentificationForm(page);

dashboard-ui/scripts/itemdetailpage.js

@@ -598,7 +598,8 @@
         if (item.Type == "Movie") {
             promise = ApiClient.getSimilarMovies(item.Id, options);
         }
-        else if (item.Type == "Trailer") {
+        else if (item.Type == "Trailer" ||
+            (item.Type == "ChannelVideoItem" && item.ExtraType == "Trailer")) {
             promise = ApiClient.getSimilarTrailers(item.Id, options);
         }
         else if (item.Type == "MusicAlbum") {

dashboard-ui/scripts/itemlistpage.js

@@ -19,7 +19,17 @@
 
         var userId = Dashboard.getCurrentUserId();
 
-        ApiClient.getItems(userId, query).done(function (result) {
+        var parentItemPromise = query.ParentId ?
+           ApiClient.getItem(userId, query.ParentId) :
+           ApiClient.getRootFolder(userId);
+
+        var itemsPromise = ApiClient.getItems(userId, query);
+
+        $.when(parentItemPromise, itemsPromise).done(function(r1, r2) {
+
+            var item = r1[0];
+            currentItem = item;
+            var result = r2[0];
 
             // Scroll back up so they can see the results from the beginning
             $(document).scrollTop(0);
@@ -43,6 +53,8 @@
                 context = 'folders';
             }
 
+            var defaultAction = currentItem.Type == 'PhotoAlbum' ? 'photoslideshow' : null;
+
             if (view == "Backdrop") {
 
                 html = LibraryBrowser.getPosterViewHtml({
@@ -51,7 +63,8 @@
                     showTitle: true,
                     centerText: true,
                     preferBackdrop: true,
-                    context: context
+                    context: context,
+                    defaultAction: defaultAction
                 });
             }
             else if (view == "Poster") {
@@ -60,7 +73,8 @@
                     shape: "auto",
                     showTitle: true,
                     centerText: true,
-                    context: context
+                    context: context,
+                    defaultAction: defaultAction
                 });
             }
 
@@ -80,17 +94,6 @@
 
             LibraryBrowser.saveQueryValues(getParameterByName('parentId'), query);
 
-            Dashboard.hideLoadingMsg();
-        });
-
-        var promise = query.ParentId ?
-            ApiClient.getItem(userId, query.ParentId) :
-            ApiClient.getRootFolder(userId);
-
-        promise.done(function (item) {
-
-            currentItem = item;
-
             var name = item.Name;
 
             if (item.IndexNumber != null) {
@@ -109,6 +112,7 @@
                 item: item
             }]);
 
+            Dashboard.hideLoadingMsg();
         });
 
         Dashboard.getCurrentUser().done(function (user) {
@@ -152,6 +156,48 @@
         $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
     }
 
+    function startSlideshow(page, index) {
+
+        index += (query.StartIndex || 0);
+
+        var userId = Dashboard.getCurrentUserId();
+
+        var localQuery = $.extend({}, query);
+        localQuery.StartIndex = 0;
+        localQuery.Limit = null;
+        localQuery.MediaTypes = "Photo";
+        localQuery.Recursive = true;
+        localQuery.Filters = "IsNotFolder";
+
+        ApiClient.getItems(userId, localQuery).done(function(result) {
+
+            showSlideshow(page, result.Items, index);
+        });
+    }
+
+    function showSlideshow(page, items, index) {
+
+        var slideshowItems = items.map(function (item) {
+
+            var imgUrl = ApiClient.getScaledImageUrl(item.Id, {
+                
+                tag: item.ImageTags.Primary,
+                type: 'Primary'
+
+            });
+
+            return {
+                title: item.Name,
+                href: imgUrl
+            };
+        });
+
+        $.swipebox(slideshowItems, {
+            initialIndexOnArray: index || 0,
+            hideBarsDelay: 30000
+        });
+    }
+
     $(document).on('pageinit', "#itemListPage", function () {
 
         var page = this;
@@ -219,6 +265,10 @@
             reloadItems(page);
         });
 
+        $('.itemsContainer', page).on('photoslideshow', function (e, index) {
+            startSlideshow(page, index);
+        });
+
     }).on('pageshow', "#itemListPage", function () {
 
         var page = this;

dashboard-ui/scripts/librarylist.js

@@ -760,6 +760,9 @@
         var action = elem.getAttribute('data-action');
         var elemWithAttributes = elem.getAttribute('data-itemid') ? elem : elem.parentNode;
 
+        var index;
+        var itemsContainer;
+
         var itemId = elemWithAttributes.getAttribute('data-itemid');
 
         if (action == 'play') {
@@ -767,13 +770,22 @@
         }
         else if (action == 'playallfromhere') {
 
-            var index = elemWithAttributes.getAttribute('data-index');
+            index = elemWithAttributes.getAttribute('data-index');
-            var itemsContainer = $(elem).parents('.itemsContainer');
+            itemsContainer = $(elem).parents('.itemsContainer');
 
             closeContextMenu();
 
             itemsContainer.trigger('playallfromhere', [index]);
         }
+        else if (action == 'photoslideshow') {
+
+            itemsContainer = $(elem).parents('.itemsContainer');
+            index = $('.card', itemsContainer).get().indexOf(elem);
+
+            closeContextMenu();
+
+            itemsContainer.trigger('photoslideshow', [index]);
+        }
 
         return false;
     }
@@ -861,6 +873,10 @@
     function onUserDataChanged(userData) {
 
         var cssClass = LibraryBrowser.getUserDataCssClass(userData.Key);
+        
+        if (!cssClass) {
+            return;
+        }
 
         $('.' + cssClass).each(function () {
 

dashboard-ui/scripts/moviesrecommended.js

@@ -83,7 +83,7 @@
 
             userId: Dashboard.getCurrentUserId(),
             categoryLimit: screenWidth >= 1200 ? 4 : 3,
-            ItemLimit: screenWidth >= 1920 ? 10 : (screenWidth >= 1600 ? 7 : (screenWidth >= 1200 ? 6 : 5)),
+            ItemLimit: screenWidth >= 1920 ? 10 : (screenWidth >= 1600 ? 7 : (screenWidth >= 1200 ? 7 : 7)),
             Fields: "PrimaryImageAspectRatio"
         });
 

dashboard-ui/scripts/movietrailers.js

@@ -1,25 +1,40 @@
 (function ($, document) {
 
+    var view = LibraryBrowser.getDefaultItemsView('Poster', 'List');
+
     // The base query options
     var query = {
 
         SortBy: "SortName",
         SortOrder: "Ascending",
-        IncludeItemTypes: "Trailer",
         Recursive: true,
-        Fields: "PrimaryImageAspectRatio",
+        Fields: "PrimaryImageAspectRatio,SortName",
         StartIndex: 0
     };
 
+    function getSavedQueryKey() {
+
+        return 'trailers' + (query.ParentId || '');
+    }
+
     function reloadItems(page) {
 
         Dashboard.showLoadingMsg();
 
-        ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
+        query.UserId = Dashboard.getCurrentUserId();
+
+        ApiClient.getJSON(ApiClient.getUrl('Trailers', query)).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
             $(document).scrollTop(0);
 
+            if (result.Items.length) {
+                $('.noItemsMessage', page).hide();
+            }
+            else {
+                $('.noItemsMessage', page).show();
+            }
+
             var html = '';
 
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -27,24 +42,76 @@
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
                 viewButton: true,
-                showLimit: false
+                showLimit: false,
+                addSelectionButton: true
             });
 
             $('.listTopPaging', page).html(pagingHtml).trigger('create');
 
             updateFilterControls(page);
 
-            html = LibraryBrowser.getPosterViewHtml({
+            if (view == "Thumb") {
-                items: result.Items,
+                html = LibraryBrowser.getPosterViewHtml({
-                shape: "portrait",
+                    items: result.Items,
-                context: 'movies',
+                    shape: "backdrop",
-                showTitle: false,
+                    preferThumb: true,
-                centerText: true
+                    context: 'movies',
-            });
+                    selectionPanel: true,
+                    lazy: true,
+                    overlayText: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
+            else if (view == "Banner") {
+
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "banner",
+                    preferBanner: true,
+                    context: 'movies',
+                    lazy: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
+            else if (view == "List") {
+
+                html = LibraryBrowser.getListViewHtml({
+                    items: result.Items,
+                    context: 'movies',
+                    sortBy: query.SortBy
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
+            else if (view == "Poster") {
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "portrait",
+                    context: 'movies',
+                    showTitle: false,
+                    centerText: true,
+                    selectionPanel: true,
+                    lazy: true,
+                    overlayText: true
+                });
+                $('.itemsContainer', page).removeClass('timelineItemsContainer');
+            }
+            else if (view == "Timeline") {
+                html = LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "portrait",
+                    context: 'movies',
+                    showTitle: true,
+                    timeline: true,
+                    centerText: true,
+                    selectionPanel: true,
+                    lazy: true
+                });
+                $('.itemsContainer', page).addClass('timelineItemsContainer');
+            }
 
             html += pagingHtml;
 
-            $('#items', page).html(html).trigger('create').createCardMenus();
+            $('.itemsContainer', page).html(html).trigger('create').createCardMenus();
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -56,7 +123,16 @@
                 reloadItems(page);
             });
 
-            LibraryBrowser.saveQueryValues('movietrailers', query);
+            LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
+
+            Dashboard.getCurrentUser().done(function (user) {
+
+                if (user.Configuration.EnableMediaPlayback && result.Items.length) {
+                    $('.btnTrailerReel', page).show();
+                } else {
+                    $('.btnTrailerReel', page).hide();
+                }
+            });
 
             Dashboard.hideLoadingMsg();
         });
@@ -86,10 +162,33 @@
 
         }).checkboxradio('refresh');
 
-        $('.alphabetPicker', page).alphaValue(query.NameStartsWith);
+        $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
         $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
     }
 
+    function playReel(page) {
+
+        $('.popupTrailerReel', page).popup('close');
+
+        var reelQuery = {
+            UserId: Dashboard.getCurrentUserId(),
+            SortBy: 'Random',
+            Limit: 50,
+            Fields: "MediaSources,Chapters"
+        };
+
+        if ($('#chkUnwatchedOnly', page).checked()) {
+            reelQuery.Filters = "IsPlayed";
+        }
+
+        ApiClient.getJSON(ApiClient.getUrl('Trailers', reelQuery)).done(function (result) {
+
+            MediaController.play({
+                items: result.Items
+            });
+        });
+    }
+
     $(document).on('pageinit', "#movieTrailersPage", function () {
 
         var page = this;
@@ -137,14 +236,29 @@
             reloadItems(page);
         });
 
+        $('.itemsContainer', page).on('needsrefresh', function () {
+
+            reloadItems(page);
+
+        });
+
         $('#selectPageSize', page).on('change', function () {
             query.Limit = parseInt(this.value);
             query.StartIndex = 0;
             reloadItems(page);
         });
 
+        $('.btnTrailerReel', page).on('click', function () {
+
+            $('.popupTrailerReel', page).popup('open');
+
+        });
+
     }).on('pagebeforeshow', "#movieTrailersPage", function () {
 
+        query.ParentId = LibraryMenu.getTopParentId();
+
+        var page = this;
         var limit = LibraryBrowser.getDefaultPageSize();
 
         // If the default page size has changed, the start index will have to be reset
@@ -153,13 +267,33 @@
             query.StartIndex = 0;
         }
 
-        LibraryBrowser.loadSavedQueryValues('movietrailers', query);
+        var viewkey = getSavedQueryKey();
 
-        reloadItems(this);
+        LibraryBrowser.loadSavedQueryValues(viewkey, query);
+
+        LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
+
+            if (val) {
+                $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
+            } else {
+                reloadItems(page);
+            }
+        });
 
     }).on('pageshow', "#movieTrailersPage", function () {
 
         updateFilterControls(this);
     });
 
+    window.MovieTrailerPage = {
+
+        onSubmit: function () {
+
+            var page = $(this).parents('.page');
+
+            playReel(page);
+            return false;
+        }
+    };
+
 })(jQuery, document);

dashboard-ui/thirdparty/cast_sender.js

@@ -1,49 +1,57 @@
-(function() {var chrome = window.chrome || {};
+(function () {
-chrome.cast = chrome.cast || {};
-chrome.cast.media = chrome.cast.media || {};
-chrome.cast.ApiBootstrap_ = function() {
-};
-chrome.cast.ApiBootstrap_.EXTENSION_IDS = ["boadgeojelhgndaghljhdicfkmllpafd", "dliochdbjfkdbacpmhlcpmleaejidimm", "hfaagokkkhdbgiakmmlclaapfelnkoah", "fmfcbgogabcbclcofgocippekhfcmgfj", "enhhojjnijigcajfphajepfemndkmdlo"];
-chrome.cast.ApiBootstrap_.findInstalledExtension_ = function(callback) {
-  chrome.cast.ApiBootstrap_.findInstalledExtensionHelper_(0, callback);
-};
-chrome.cast.ApiBootstrap_.findInstalledExtensionHelper_ = function(index, callback) {
-  index == chrome.cast.ApiBootstrap_.EXTENSION_IDS.length ? callback(null) : chrome.cast.ApiBootstrap_.isExtensionInstalled_(chrome.cast.ApiBootstrap_.EXTENSION_IDS[index], function(installed) {
-    installed ? callback(chrome.cast.ApiBootstrap_.EXTENSION_IDS[index]) : chrome.cast.ApiBootstrap_.findInstalledExtensionHelper_(index + 1, callback);
-  });
-};
-chrome.cast.ApiBootstrap_.getCastSenderUrl_ = function(extensionId) {
-  return "chrome-extension://" + extensionId + "/cast_sender.js";
-};
-chrome.cast.ApiBootstrap_.isExtensionInstalled_ = function(extensionId, callback) {
-  var xmlhttp = new XMLHttpRequest;
-  xmlhttp.onreadystatechange = function() {
-    4 == xmlhttp.readyState && 200 == xmlhttp.status && callback(!0);
-  };
-  xmlhttp.onerror = function() {
-    callback(!1);
-  };
 
-    try {
+    // This script produces errors in older versions of safari
-        // Throws an error in other browsers
+
-        xmlhttp.open("GET", chrome.cast.ApiBootstrap_.getCastSenderUrl_(extensionId), !0);
+    if ((navigator.userAgent || '').toLowerCase().indexOf('chrome') == -1) {
-        xmlhttp.send();
+        return;
-    } catch (ex) {
-        
     }
-};
+
-chrome.cast.ApiBootstrap_.findInstalledExtension_(function(extensionId) {
+    var chrome = window.chrome || {};
-  if (extensionId) {
+    chrome.cast = chrome.cast || {};
-    console.log("Found cast extension: " + extensionId);
+    chrome.cast.media = chrome.cast.media || {};
-    chrome.cast.extensionId = extensionId;
+    chrome.cast.ApiBootstrap_ = function () {
-    var apiScript = document.createElement("script");
+    };
-    apiScript.src = chrome.cast.ApiBootstrap_.getCastSenderUrl_(extensionId);
+    chrome.cast.ApiBootstrap_.EXTENSION_IDS = ["boadgeojelhgndaghljhdicfkmllpafd", "dliochdbjfkdbacpmhlcpmleaejidimm", "hfaagokkkhdbgiakmmlclaapfelnkoah", "fmfcbgogabcbclcofgocippekhfcmgfj", "enhhojjnijigcajfphajepfemndkmdlo"];
-    (document.head || document.documentElement).appendChild(apiScript);
+    chrome.cast.ApiBootstrap_.findInstalledExtension_ = function (callback) {
-  } else {
+        chrome.cast.ApiBootstrap_.findInstalledExtensionHelper_(0, callback);
-    var msg = "No cast extension found";
+    };
-    console.log(msg);
+    chrome.cast.ApiBootstrap_.findInstalledExtensionHelper_ = function (index, callback) {
-    var callback = window.__onGCastApiAvailable;
+        index == chrome.cast.ApiBootstrap_.EXTENSION_IDS.length ? callback(null) : chrome.cast.ApiBootstrap_.isExtensionInstalled_(chrome.cast.ApiBootstrap_.EXTENSION_IDS[index], function (installed) {
-    callback && "function" == typeof callback && callback(!1, msg);
+            installed ? callback(chrome.cast.ApiBootstrap_.EXTENSION_IDS[index]) : chrome.cast.ApiBootstrap_.findInstalledExtensionHelper_(index + 1, callback);
-  }
+        });
-});
+    };
+    chrome.cast.ApiBootstrap_.getCastSenderUrl_ = function (extensionId) {
+        return "chrome-extension://" + extensionId + "/cast_sender.js";
+    };
+    chrome.cast.ApiBootstrap_.isExtensionInstalled_ = function (extensionId, callback) {
+        var xmlhttp = new XMLHttpRequest;
+        xmlhttp.onreadystatechange = function () {
+            4 == xmlhttp.readyState && 200 == xmlhttp.status && callback(!0);
+        };
+        xmlhttp.onerror = function () {
+            callback(!1);
+        };
+
+        try {
+            // Throws an error in other browsers
+            xmlhttp.open("GET", chrome.cast.ApiBootstrap_.getCastSenderUrl_(extensionId), !0);
+            xmlhttp.send();
+        } catch (ex) {
+
+        }
+    };
+    chrome.cast.ApiBootstrap_.findInstalledExtension_(function (extensionId) {
+        if (extensionId) {
+            console.log("Found cast extension: " + extensionId);
+            chrome.cast.extensionId = extensionId;
+            var apiScript = document.createElement("script");
+            apiScript.src = chrome.cast.ApiBootstrap_.getCastSenderUrl_(extensionId);
+            (document.head || document.documentElement).appendChild(apiScript);
+        } else {
+            var msg = "No cast extension found";
+            console.log(msg);
+            var callback = window.__onGCastApiAvailable;
+            callback && "function" == typeof callback && callback(!1, msg);
+        }
+    });
 })();