update movies

dashboard-ui/movies.html

@@ -54,14 +54,20 @@
         </div>
     </div>
     <div class="pageTabContent ehsContent" id="trailersTab" data-index="2">
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
+            <button is="paper-icon-button-light" class="btnSort" title="${ButtonSort}"><iron-icon icon="sort-by-alpha"></iron-icon></button>
+            <button is="paper-icon-button-light" class="btnFilter" title="${ButtonFilter}"><iron-icon icon="filter-list"></iron-icon></button>
+        </div>
+
         <div class="alphaPicker alphabetPicker vertical">
         </div>
-        <div class="viewSettings">
+
-            <div class="listTopPaging">
+        <div class="itemsContainer itemsContainerWithAlphaPicker">
         </div>
+        <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
+            <div class="paging"></div>
         </div>
-        <div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
-        <p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
     </div>
     <div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">
         <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .25em;">

dashboard-ui/scripts/movietrailers.js

@@ -1,9 +1,13 @@
-define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
+define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker'], function (events, libraryBrowser, imageLoader, alphaPicker) {
+
+    return function (view, params, tabContent) {
+
+        var self = this;
+        var pageSize = libraryBrowser.getDefaultPageSize();
 
         var data = {};
 
-    function getQuery(context) {
+        function getPageData(context) {
-
             var key = getSavedQueryKey(context);
             var pageData = data[key];
 
@@ -14,23 +18,29 @@
                         SortOrder: "Ascending",
                         IncludeItemTypes: "Trailer",
                         Recursive: true,
-                    Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,SyncInfo",
+                        Fields: "PrimaryImageAspectRatio,MediaSourceCount,SortName,SyncInfo",
                         ImageTypeLimit: 1,
                         EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                         StartIndex: 0,
-                    Limit: LibraryBrowser.getDefaultPageSize()
+                        Limit: pageSize
-                }
+                    },
+                    view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Poster', 'Poster')
                 };
 
-            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
+                libraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
-        return pageData.query;
+            return pageData;
+        }
+
+        function getQuery(context) {
+
+            return getPageData(context).query;
         }
 
         function getSavedQueryKey(context) {
 
             if (!context.savedQueryKey) {
-            context.savedQueryKey = LibraryBrowser.getSavedQueryKey('trailers');
+                context.savedQueryKey = libraryBrowser.getSavedQueryKey('trailers');
             }
             return context.savedQueryKey;
         }
@@ -40,64 +50,180 @@
             Dashboard.showLoadingMsg();
 
             var query = getQuery(page);
-        var userId = Dashboard.getCurrentUserId();
 
-        ApiClient.getItems(userId, query).then(function (result) {
+            ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
 
                 // Scroll back up so they can see the results from the beginning
                 window.scrollTo(0, 0);
 
-            if (result.Items.length) {
+                updateFilterControls(page);
-                $('.noItemsMessage', page).hide();
-            }
-            else {
-                $('.noItemsMessage', page).show();
-            }
 
-            var html = '';
                 var pagingHtml = LibraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
-                sortButton: true,
                     showLimit: false,
                     updatePageSizeSetting: false,
-                filterButton: true
+                    addLayoutButton: false,
+                    sortButton: false,
+                    filterButton: false
                 });
 
-            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
+                var html;
+                var viewStyle = self.getCurrentViewStyle();
 
-            updateFilterControls(page);
+                if (viewStyle == "Thumb") {
 
-            html = LibraryBrowser.getPosterViewHtml({
+                    html = libraryBrowser.getPosterViewHtml({
                         items: result.Items,
-                shape: "portrait",
+                        shape: "backdrop",
+                        preferThumb: true,
+                        context: 'movies',
                         lazy: true,
-                showDetailsMenu: true,
                         overlayPlayButton: true
                     });
+                }
+                else if (viewStyle == "ThumbCard") {
 
-            var elem = page.querySelector('.itemsContainer');
+                    html = libraryBrowser.getPosterViewHtml({
-            elem.innerHTML = html + pagingHtml;
+                        items: result.Items,
-            ImageLoader.lazyChildren(elem);
+                        shape: "backdrop",
+                        preferThumb: true,
+                        context: 'movies',
+                        lazy: true,
+                        cardLayout: true,
+                        showTitle: true,
+                        showYear: true
+                    });
+                }
+                else if (viewStyle == "Banner") {
 
-            $('.btnNextPage', page).on('click', function () {
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "banner",
+                        preferBanner: true,
+                        context: 'movies',
+                        lazy: true
+                    });
+                }
+                else if (viewStyle == "List") {
+
+                    html = libraryBrowser.getListViewHtml({
+                        items: result.Items,
+                        context: 'movies',
+                        sortBy: query.SortBy
+                    });
+                }
+                else if (viewStyle == "PosterCard") {
+
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "portrait",
+                        context: 'movies',
+                        showTitle: true,
+                        showYear: true,
+                        lazy: true,
+                        cardLayout: true
+                    });
+                }
+                else {
+
+                    // Poster
+                    html = libraryBrowser.getPosterViewHtml({
+                        items: result.Items,
+                        shape: "portrait",
+                        context: 'movies',
+                        centerText: true,
+                        lazy: true,
+                        overlayPlayButton: true
+                    });
+                }
+
+                var i, length;
+                var elems = tabContent.querySelectorAll('.paging');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].innerHTML = pagingHtml;
+                }
+
+                function onNextPageClick() {
                     query.StartIndex += query.Limit;
-                reloadItems(page);
+                    reloadItems(tabContent);
-            });
+                }
 
-            $('.btnPreviousPage', page).on('click', function () {
+                function onPreviousPageClick() {
                     query.StartIndex -= query.Limit;
-                reloadItems(page);
+                    reloadItems(tabContent);
+                }
+
+                elems = tabContent.querySelectorAll('.btnNextPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onNextPageClick);
+                }
+
+                elems = tabContent.querySelectorAll('.btnPreviousPage');
+                for (i = 0, length = elems.length; i < length; i++) {
+                    elems[i].addEventListener('click', onPreviousPageClick);
+                }
+
+                if (!items.length) {
+                    html = '<p style="text-align:center;">' + Globalize.translate('MessageNoTrailersFound') + '</p>';
+                }
+
+                var itemsContainer = tabContent.querySelector('.itemsContainer');
+                itemsContainer.innerHTML = html;
+                imageLoader.lazyChildren(itemsContainer);
+
+                libraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
+
+                Dashboard.hideLoadingMsg();
+            });
+        }
+
+        self.showFilterMenu = function () {
+
+            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+
+                var filterDialog = new filterDialogFactory({
+                    query: getQuery(tabContent)
                 });
 
-            $('.btnFilter', page).on('click', function () {
+                Events.on(filterDialog, 'filterchange', function () {
-                showFilterMenu(page);
+                    getQuery(tabContent).StartIndex = 0;
+                    reloadItems(tabContent);
                 });
 
-            // On callback make sure to set StartIndex = 0
+                filterDialog.show();
-            $('.btnSort', page).on('click', function () {
+            });
-                LibraryBrowser.showSortMenu({
+        }
+
+        function updateFilterControls(tabContent) {
+
+            var query = getQuery(tabContent);
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
+        }
+
+        function initPage(tabContent) {
+
+            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
+            alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+                var newValue = e.detail.value;
+                var query = getQuery(tabContent);
+                query.NameStartsWithOrGreater = newValue;
+                query.StartIndex = 0;
+                reloadItems(tabContent);
+            });
+
+            self.alphaPicker = new alphaPicker({
+                element: alphaPickerElement,
+                valueChangeEvent: 'click'
+            });
+
+            tabContent.querySelector('.btnFilter').addEventListener('click', function () {
+                self.showFilterMenu();
+            });
+
+            tabContent.querySelector('.btnSort').addEventListener('click', function (e) {
+                libraryBrowser.showSortMenu({
                     items: [{
                         name: Globalize.translate('OptionNameSort'),
                         id: 'SortName'
@@ -127,78 +253,28 @@
                         id: 'PremiereDate,SortName'
                     }],
                     callback: function () {
-                        reloadItems(page);
+                        getQuery(tabContent).StartIndex = 0;
+                        reloadItems(tabContent);
                     },
-                    query: query
+                    query: getQuery(tabContent),
+                    button: e.target
                 });
             });
-
-            LibraryBrowser.saveQueryValues(getSavedQueryKey(page), query);
-
-            Dashboard.hideLoadingMsg();
-        });
         }
 
-    function showFilterMenu(page) {
+        self.getCurrentViewStyle = function () {
-
+            return getPageData(tabContent).view;
-        require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
-
-            var filterDialog = new filterDialogFactory({
-                query: getQuery(page)
-            });
-
-            Events.on(filterDialog, 'filterchange', function () {
-                reloadItems(page);
-            });
-
-            filterDialog.show();
-        });
-    }
-
-    function updateFilterControls(tabContent) {
-
-        var query = getQuery(tabContent);
-
-        self.alphaPicker.value(query.NameStartsWithOrGreater);
-    }
-
-    function initPage(page, tabContent) {
-
-        var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-        alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-            var newValue = e.detail.value;
-            var query = getQuery(tabContent);
-            query.NameStartsWithOrGreater = newValue;
-            query.StartIndex = 0;
-            reloadItems(tabContent);
-        });
-
-        self.alphaPicker = new alphaPicker({
-            element: alphaPickerElement,
-            valueChangeEvent: 'click'
-        });
-
-        tabContent.querySelector('.itemsContainer').addEventListener('needsrefresh', function () {
-
-            reloadItems(tabContent);
-
-        });
-    }
-
-    return function (view, params, tabContent) {
-
-        var self = this;
-
-        self.initTab = function () {
-
-            initPage(view, tabContent);
         };
 
+        initPage(tabContent);
+
         self.renderTab = function () {
 
             reloadItems(tabContent);
             updateFilterControls(tabContent);
         };
-    };
 
+        self.destroy = function () {
+        };
+    };
 });