update movie tabs

dashboard-ui/movies.html

@@ -1,4 +1,4 @@
-<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie" data-require="scripts/moviesrecommended,paper-tabs,paper-checkbox,paper-fab,scripts/alphapicker">
+<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie">
 
     <div class="libraryViewNav libraryViewNavWithMinHeight">
         <paper-tabs hidescrollbuttons noink>

dashboard-ui/scripts/moviecollections.js

@@ -71,13 +71,10 @@
 
             if (result.TotalRecordCount) {
 
-                var context = getParameterByName('context');
-
                 if (view == "List") {
 
                     html = LibraryBrowser.getListViewHtml({
                         items: result.Items,
-                        context: context,
                         sortBy: query.SortBy
                     });
                 }
@@ -85,7 +82,6 @@
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "auto",
-                        context: context,
                         showTitle: true,
                         centerText: true,
                         lazy: true,
@@ -96,7 +92,6 @@
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "auto",
-                        context: context,
                         showTitle: true,
                         cardLayout: true,
                         lazy: true,
@@ -107,7 +102,6 @@
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
-                        context: context,
                         showTitle: true,
                         centerText: true,
                         lazy: true,
@@ -119,7 +113,6 @@
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
-                        context: context,
                         showTitle: true,
                         lazy: true,
                         preferThumb: true,
@@ -223,16 +216,19 @@
 
     });
 
-    window.MoviesPage = window.MoviesPage || {};
+    return function (view, params, tabContent) {
-    window.MoviesPage.renderCollectionsTab = function (page, tabContent) {
 
-        if (LibraryBrowser.needsRefresh(tabContent)) {
+        var self = this;
-            reloadItems(tabContent);
+
-        }
+        self.initTab = function () {
-    };
-    window.MoviesPage.initCollectionsTab = function (page, tabContent) {
 
             initPage(tabContent);
         };
 
+        self.renderTab = function () {
+
+            reloadItems(tabContent);
+        };
+    };
+
 });

dashboard-ui/scripts/moviegenres.js

@@ -1,5 +1,9 @@
 define(['jQuery'], function ($) {
 
+    return function (view, params, tabContent) {
+
+        var self = this;
+
         var data = {};
         function getPageData() {
             var key = getSavedQueryKey();
@@ -19,7 +23,7 @@
                     view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
                 };
 
-            pageData.query.ParentId = LibraryMenu.getTopParentId();
+                pageData.query.ParentId = params.topParentId;
                 LibraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
@@ -35,11 +39,11 @@
             return LibraryBrowser.getSavedQueryKey('genres');
         }
 
-    function reloadItems(page) {
+        function reloadItems(context) {
 
             Dashboard.showLoadingMsg();
-
             var query = getQuery();
+
             ApiClient.getGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
 
                 // Scroll back up so they can see the results from the beginning
@@ -47,8 +51,9 @@
 
                 var html = '';
 
-            var view = getPageData().view;
+                var viewStyle = getPageData().view;
-            $('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
+
+                $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
                     startIndex: query.StartIndex,
                     limit: query.Limit,
                     totalRecordCount: result.TotalRecordCount,
@@ -56,58 +61,46 @@
                     showLimit: false,
                     updatePageSizeSetting: false,
                     addLayoutButton: true,
-                currentLayout: view
+                    currentLayout: viewStyle
-
                 }));
 
-            if (view == "List") {
+                if (viewStyle == "Thumb") {
-
-                html = LibraryBrowser.getListViewHtml({
-                    items: result.Items,
-                    sortBy: query.SortBy
-                });
-            }
-            else if (view == "Thumb") {
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
-                    context: 'movies',
                         showItemCounts: true,
                         centerText: true,
                         lazy: true,
                         overlayPlayButton: true
                     });
                 }
-            else if (view == "ThumbCard") {
+                else if (viewStyle == "ThumbCard") {
 
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "backdrop",
                         preferThumb: true,
-                    context: 'movies',
                         showItemCounts: true,
                         cardLayout: true,
                         showTitle: true,
                         lazy: true
                     });
                 }
-            else if (view == "PosterCard") {
+                else if (viewStyle == "PosterCard") {
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
-                    context: 'movies',
                         showItemCounts: true,
                         lazy: true,
                         cardLayout: true,
                         showTitle: true
                     });
                 }
-            else if (view == "Poster") {
+                else if (viewStyle == "Poster") {
                     html = LibraryBrowser.getPosterViewHtml({
                         items: result.Items,
                         shape: "portrait",
-                    context: 'movies',
                         centerText: true,
                         showItemCounts: true,
                         lazy: true,
@@ -115,24 +108,24 @@
                     });
                 }
 
-            var elem = page.querySelector('.itemsContainer');
+                var elem = context.querySelector('.itemsContainer');
                 elem.innerHTML = html;
                 ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', page).on('click', function () {
+                $('.btnNextPage', context).on('click', function () {
                     query.StartIndex += query.Limit;
-                reloadItems(page);
+                    reloadItems(context);
                 });
 
-            $('.btnPreviousPage', page).on('click', function () {
+                $('.btnPreviousPage', context).on('click', function () {
                     query.StartIndex -= query.Limit;
-                reloadItems(page);
+                    reloadItems(context);
                 });
 
-            $('.btnChangeLayout', page).on('layoutchange', function (e, layout) {
+                $('.btnChangeLayout', context).on('layoutchange', function (e, layout) {
                     getPageData().view = layout;
                     LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout);
-                reloadItems(page);
+                    reloadItems(context);
                 });
 
                 LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
@@ -140,12 +133,9 @@
                 Dashboard.hideLoadingMsg();
             });
         }
+
        self.renderTab = function () {
 
-    window.MoviesPage.renderGenresTab = function (page, tabContent) {
-
-        if (LibraryBrowser.needsRefresh(tabContent)) {
             reloadItems(tabContent);
-        }
         };
-
+    };
 });

dashboard-ui/scripts/movies.js

@@ -1,5 +1,9 @@
 define(['jQuery'], function ($) {
 
+    return function (view, params, tabContent) {
+
+        var self = this;
+
         var data = {};
 
         function getPageData(context) {
@@ -22,7 +26,7 @@
                     view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('Poster', 'Poster')
                 };
 
-            pageData.query.ParentId = LibraryMenu.getTopParentId();
+                pageData.query.ParentId = params.topParentId;
                 LibraryBrowser.loadSavedQueryValues(key, pageData.query);
             }
             return pageData;
@@ -295,17 +299,16 @@
             });
         }
 
-    window.MoviesPage.initMoviesTab = function (page, tabContent) {
+        self.initTab = function () {
 
             initPage(tabContent);
         };
 
-    window.MoviesPage.renderMoviesTab = function (page, tabContent) {
+        self.renderTab = function () {
 
-        if (LibraryBrowser.needsRefresh(tabContent)) {
             reloadItems(tabContent);
             updateFilterControls(tabContent);
-        }
+        };
     };
 
 });

dashboard-ui/scripts/moviesrecommended.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'libraryBrowser'], function ($, libraryBrowser) {
 
     function getView() {
 
@@ -43,7 +43,7 @@
 
             if (view == 'PosterCard') {
 
-                html += LibraryBrowser.getPosterViewHtml({
+                html += libraryBrowser.getPosterViewHtml({
                     items: items,
                     lazy: true,
                     shape: getPortraitShape(),
@@ -57,7 +57,7 @@
 
             } else if (view == 'Poster') {
 
-                html += LibraryBrowser.getPosterViewHtml({
+                html += libraryBrowser.getPosterViewHtml({
                     items: items,
                     shape: getPortraitShape(),
                     centerText: true,
@@ -71,7 +71,6 @@
             var recentlyAddedItems = page.querySelector('#recentlyAddedItems');
             recentlyAddedItems.innerHTML = html;
             ImageLoader.lazyChildren(recentlyAddedItems);
-            LibraryBrowser.setLastRefreshed(page);
         });
     }
 
@@ -107,7 +106,7 @@
 
             if (view == 'ThumbCard') {
 
-                html += LibraryBrowser.getPosterViewHtml({
+                html += libraryBrowser.getPosterViewHtml({
                     items: result.Items,
                     preferThumb: true,
                     shape: getThumbShape(),
@@ -121,7 +120,7 @@
 
             } else if (view == 'Thumb') {
 
-                html += LibraryBrowser.getPosterViewHtml({
+                html += libraryBrowser.getPosterViewHtml({
                     items: result.Items,
                     preferThumb: true,
                     shape: getThumbShape(),
@@ -177,7 +176,7 @@
 
         if (view == 'PosterCard') {
 
-            html += LibraryBrowser.getPosterViewHtml({
+            html += libraryBrowser.getPosterViewHtml({
                 items: recommendation.Items,
                 lazy: true,
                 shape: getPortraitShape(),
@@ -191,7 +190,7 @@
 
         } else if (view == 'Poster') {
 
-            html += LibraryBrowser.getPosterViewHtml({
+            html += libraryBrowser.getPosterViewHtml({
                 items: recommendation.Items,
                 shape: getPortraitShape(),
                 centerText: true,
@@ -251,13 +250,12 @@
         $(containers).createCardMenus();
     }
 
-    function loadSuggestionsTab(page, tabContent) {
+    function loadSuggestionsTab(view, params, tabContent) {
 
-        var parentId = LibraryMenu.getTopParentId();
+        var parentId = params.topParentId;
 
         var userId = Dashboard.getCurrentUserId();
 
-        if (LibraryBrowser.needsRefresh(tabContent)) {
         console.log('loadSuggestionsTab');
         loadResume(tabContent, userId, parentId);
         loadLatest(tabContent, userId, parentId);
@@ -266,119 +264,6 @@
             loadSuggestions(tabContent, userId, parentId);
         }
     }
-    }
-
-    function loadTab(page, index) {
-
-        var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
-        var depends = [];
-        var scope = 'MoviesPage';
-        var renderMethod = '';
-        var initMethod = '';
-
-        switch (index) {
-
-            case 0:
-                initMethod = 'initSuggestedTab';
-                renderMethod = 'renderSuggestedTab';
-                break;
-            case 1:
-                depends.push('scripts/movies');
-                renderMethod = 'renderMoviesTab';
-                initMethod = 'initMoviesTab';
-                break;
-            case 2:
-                depends.push('scripts/movietrailers');
-                renderMethod = 'renderTrailerTab';
-                initMethod = 'initTrailerTab';
-                break;
-            case 3:
-                depends.push('scripts/moviecollections');
-                renderMethod = 'renderCollectionsTab';
-                initMethod = 'initCollectionsTab';
-                break;
-            case 4:
-                depends.push('scripts/moviegenres');
-                renderMethod = 'renderGenresTab';
-                break;
-            case 5:
-                depends.push('scripts/moviestudios');
-                renderMethod = 'renderStudiosTab';
-                break;
-            default:
-                break;
-        }
-
-        require(depends, function () {
-
-            if (initMethod && !tabContent.initComplete) {
-
-                window[scope][initMethod](page, tabContent);
-                tabContent.initComplete = true;
-            }
-
-            window[scope][renderMethod](page, tabContent);
-
-        });
-    }
-
-    window.MoviesPage = window.MoviesPage || {};
-    window.MoviesPage.renderSuggestedTab = loadSuggestionsTab;
-    window.MoviesPage.initSuggestedTab = initSuggestedTab;
-
-    pageIdOn('pageinit', "moviesPage", function () {
-
-        var page = this;
-
-        $('.recommendations', page).createCardMenus();
-
-        var tabs = page.querySelector('paper-tabs');
-        var pageTabsContainer = page.querySelector('.pageTabsContainer');
-
-        var baseUrl = 'movies.html';
-        var topParentId = LibraryMenu.getTopParentId();
-        if (topParentId) {
-            baseUrl += '?topParentId=' + topParentId;
-        }
-
-        LibraryBrowser.configurePaperLibraryTabs(page, tabs, pageTabsContainer, baseUrl);
-
-        pageTabsContainer.addEventListener('tabchange', function (e) {
-            loadTab(page, parseInt(e.detail.selectedTabIndex));
-        });
-    });
-
-    pageIdOn('pagebeforeshow', "moviesPage", function () {
-
-        var page = this;
-
-        if (!page.getAttribute('data-title')) {
-
-            var parentId = LibraryMenu.getTopParentId();
-
-            if (parentId) {
-
-                ApiClient.getItem(Dashboard.getCurrentUserId(), parentId).then(function (item) {
-
-                    page.setAttribute('data-title', item.Name);
-                    LibraryMenu.setTitle(item.Name);
-                });
-
-
-            } else {
-                page.setAttribute('data-title', Globalize.translate('TabMovies'));
-                LibraryMenu.setTitle(Globalize.translate('TabMovies'));
-            }
-        }
-
-        Events.on(MediaController, 'playbackstop', onPlaybackStop);
-    });
-
-    pageIdOn('pagebeforehide', "moviesPage", function () {
-
-        var page = this;
-        Events.off(MediaController, 'playbackstop', onPlaybackStop);
-    });
 
     function onPlaybackStop(e, state) {
 
@@ -394,4 +279,117 @@
         }
     }
 
+    return function (view, params) {
+
+        var self = this;
+
+        self.initTab = function() {
+            var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
+            initSuggestedTab(view, tabContent);
+        };
+
+        self.renderTab = function () {
+            var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
+            loadSuggestionsTab(view, params, tabContent);
+        };
+
+        $('.recommendations', view).createCardMenus();
+
+        var pageTabsContainer = view.querySelector('.pageTabsContainer');
+
+        var baseUrl = 'movies.html';
+        var topParentId = params.topParentId;
+        if (topParentId) {
+            baseUrl += '?topParentId=' + topParentId;
+        }
+
+        libraryBrowser.configurePaperLibraryTabs(view, view.querySelector('paper-tabs'), pageTabsContainer, baseUrl);
+
+        var tabControllers = [];
+        var renderedTabs = [];
+
+        function loadTab(page, index) {
+
+            var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
+            var depends = [];
+
+            switch (index) {
+
+                case 0:
+                    break;
+                case 1:
+                    depends.push('scripts/movies');
+                    break;
+                case 2:
+                    depends.push('scripts/movietrailers');
+                    break;
+                case 3:
+                    depends.push('scripts/moviecollections');
+                    break;
+                case 4:
+                    depends.push('scripts/moviegenres');
+                    break;
+                case 5:
+                    depends.push('scripts/moviestudios');
+                    break;
+                default:
+                    break;
+            }
+
+            require(depends, function (controllerFactory) {
+
+                if (index == 0) {
+                    self.tabContent = tabContent;
+                }
+                var controller = tabControllers[index];
+                if (!controller) {
+                    controller = index ? new controllerFactory(view, params, tabContent) : self;
+                    tabControllers[index] = controller;
+
+                    if (controller.initTab) {
+                        controller.initTab();
+                    }
+                }
+
+                if (renderedTabs.indexOf(index) == -1) {
+                    renderedTabs.push(index);
+                    controller.renderTab();
+                }
+            });
+        }
+
+        pageTabsContainer.addEventListener('tabchange', function (e) {
+            loadTab(view, parseInt(e.detail.selectedTabIndex));
+        });
+
+        view.addEventListener('viewbeforeshow', function (e) {
+            if (!view.getAttribute('data-title')) {
+
+                var parentId = params.topParentId;
+
+                if (parentId) {
+
+                    ApiClient.getItem(Dashboard.getCurrentUserId(), parentId).then(function (item) {
+
+                        view.setAttribute('data-title', item.Name);
+                        LibraryMenu.setTitle(item.Name);
+                    });
+
+
+                } else {
+                    view.setAttribute('data-title', Globalize.translate('TabMovies'));
+                    LibraryMenu.setTitle(Globalize.translate('TabMovies'));
+                }
+            }
+        });
+
+        view.addEventListener('viewshow', function (e) {
+            Events.on(MediaController, 'playbackstop', onPlaybackStop);
+        });
+
+        view.addEventListener('viewbeforehide', function (e) {
+            Events.off(MediaController, 'playbackstop', onPlaybackStop);
+        });
+    };
+
 });

dashboard-ui/scripts/moviestudios.js

@@ -3,7 +3,7 @@
     // The base query options
     var data = {};
 
-    function getQuery() {
+    function getQuery(params) {
 
         var key = getSavedQueryKey();
         var pageData = data[key];
@@ -21,7 +21,7 @@
                 }
             };
 
-            pageData.query.ParentId = LibraryMenu.getTopParentId();
+            pageData.query.ParentId = params.topParentId;
             LibraryBrowser.loadSavedQueryValues(key, pageData.query);
         }
         return pageData.query;
@@ -32,64 +32,62 @@
         return LibraryBrowser.getSavedQueryKey('studios');
     }
 
-    function reloadItems(page) {
+    function reloadItems(context, params) {
+
+        var query = getQuery(params);
 
         Dashboard.showLoadingMsg();
 
-        var query = getQuery();
-
         ApiClient.getStudios(Dashboard.getCurrentUserId(), query).then(function (result) {
 
             // Scroll back up so they can see the results from the beginning
             window.scrollTo(0, 0);
 
             var html = '';
-            var pagingHtml = LibraryBrowser.getQueryPagingHtml({
+
+            $('.listTopPaging', context).html(LibraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
-                viewButton: false,
-                updatePageSizeSetting: false,
                 showLimit: false
-            });
+            }));
 
-            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
+            html += LibraryBrowser.getPosterViewHtml({
-
-            html = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 shape: "backdrop",
+                showTitle: false,
                 preferThumb: true,
-                context: 'movies',
                 showItemCounts: true,
                 centerText: true,
                 lazy: true
+
             });
 
-            var elem = page.querySelector('.itemsContainer');
+            var elem = context.querySelector('.itemsContainer');
-            elem.innerHTML = html + pagingHtml;
+            elem.innerHTML = html;
             ImageLoader.lazyChildren(elem);
 
-            $('.btnNextPage', page).on('click', function () {
+            $('.btnNextPage', context).on('click', function () {
                 query.StartIndex += query.Limit;
-                reloadItems(page);
+                reloadItems(context, params);
             });
 
-            $('.btnPreviousPage', page).on('click', function () {
+            $('.btnPreviousPage', context).on('click', function () {
                 query.StartIndex -= query.Limit;
-                reloadItems(page);
+                reloadItems(context, params);
             });
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
-
             Dashboard.hideLoadingMsg();
         });
     }
+
    return function (view, params, tabContent) {
 
-    window.MoviesPage.renderStudiosTab = function (page, tabContent) {
+        var self = this;
 
-        if (LibraryBrowser.needsRefresh(tabContent)) {
+        self.renderTab = function () {
-            reloadItems(tabContent);
+
-        }
+            reloadItems(tabContent, params);
+        };
     };
-
 });

dashboard-ui/scripts/movietrailers.js

@@ -187,17 +187,20 @@
         });
     }
 
-    window.MoviesPage.initTrailerTab = function (page, tabContent) {
+    return function (view, params, tabContent) {
 
-        initPage(page, tabContent);
+        var self = this;
+
+        self.initTab = function () {
+
+            initPage(view, tabContent);
         };
 
-    window.MoviesPage.renderTrailerTab = function (page, tabContent) {
+        self.renderTab = function () {
 
-        if (LibraryBrowser.needsRefresh(tabContent)) {
             reloadItems(tabContent);
             updateFilterControls(tabContent);
-        }
+        };
     };
 
 });

dashboard-ui/scripts/site.js

@@ -2698,8 +2698,9 @@ var AppInfo = {};
 
         defineRoute({
             path: '/movies.html',
-            dependencies: [],
+            dependencies: ['paper-tabs', 'paper-checkbox', 'paper-fab', 'scripts/alphapicker'],
-            autoFocus: false
+            autoFocus: false,
+            controller: 'scripts/moviesrecommended'
         });
 
         defineRoute({