update tab loading

dashboard-ui/scripts/indexpage.js

@@ -351,12 +351,28 @@
             }
         }
 
+        function onWebSocketMessage(e, data) {
+
+            var msg = data;
+
+            if (msg.MessageType === "UserDataChanged") {
+
+                if (msg.Data.UserId == Dashboard.getCurrentUserId()) {
+
+                    renderedTabs = [];
+                }
+            }
+
+        }
+
         view.addEventListener('viewshow', function (e) {
             Events.on(MediaController, 'playbackstop', onPlaybackStop);
+            Events.on(ApiClient, "websocketmessage", onWebSocketMessage);
         });
 
         view.addEventListener('viewbeforehide', function (e) {
             Events.off(MediaController, 'playbackstop', onPlaybackStop);
+            Events.off(ApiClient, "websocketmessage", onWebSocketMessage);
         });
     };
 });

dashboard-ui/scripts/moviegenres.js

@@ -38,12 +38,19 @@
             return LibraryBrowser.getSavedQueryKey('genres');
         }
 
-        function reloadItems(context) {
+        function getPromise() {
 
             Dashboard.showLoadingMsg();
             var query = getQuery();
 
-            ApiClient.getGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
+            return ApiClient.getGenres(Dashboard.getCurrentUserId(), query);
+        }
+
+        function reloadItems(context, promise) {
+
+            var query = getQuery();
+
+            promise.then(function (result) {
 
                 var html = '';
 
@@ -117,16 +124,26 @@
         self.setCurrentViewStyle = function (viewStyle) {
             getPageData(tabContent).view = viewStyle;
             LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
-            reloadItems(tabContent);
+            fullyReload();
         };
 
         self.enableViewSelection = true;
+        var promise;
+
+        self.preRender = function () {
+            promise = getPromise();
+        };
 
         self.renderTab = function () {
 
-            reloadItems(tabContent);
+            reloadItems(tabContent, promise);
         };
 
+        function fullyReload() {
+            self.preRender();
+            self.renderTab();
+        }
+
         var btnSelectView = tabContent.querySelector('.btnSelectView');
         btnSelectView.addEventListener('click', function (e) {
 

dashboard-ui/scripts/moviesrecommended.js

@@ -296,9 +296,8 @@
         var tabControllers = [];
         var renderedTabs = [];
 
-        function loadTab(page, index) {
+        function getTabController(page, index, callback) {
 
-            var tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
             var depends = [];
 
             switch (index) {
@@ -325,12 +324,14 @@
             }
 
             require(depends, function (controllerFactory) {
-
+                var tabContent;
                 if (index == 0) {
+                    tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
                     self.tabContent = tabContent;
                 }
                 var controller = tabControllers[index];
                 if (!controller) {
+                    tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
                     controller = index ? new controllerFactory(view, params, tabContent) : self;
                     tabControllers[index] = controller;
 
@@ -339,6 +340,24 @@
                     }
                 }
 
+                callback(controller);
+            });
+        }
+
+        function preLoadTab(page, index) {
+
+            getTabController(page, index, function (controller) {
+                if (renderedTabs.indexOf(index) == -1) {
+                    if (controller.preRender) {
+                        controller.preRender();
+                    }
+                }
+            });
+        }
+
+        function loadTab(page, index) {
+
+            getTabController(page, index, function (controller) {
                 if (renderedTabs.indexOf(index) == -1) {
                     renderedTabs.push(index);
                     controller.renderTab();
@@ -346,6 +365,9 @@
             });
         }
 
+        mdlTabs.addEventListener('beforetabchange', function (e) {
+            preLoadTab(view, parseInt(e.detail.selectedTabIndex));
+        });
         mdlTabs.addEventListener('tabchange', function (e) {
             loadTab(view, parseInt(e.detail.selectedTabIndex));
         });

dashboard-ui/scripts/moviestudios.js

@@ -21,7 +21,6 @@
             };
 
             pageData.query.ParentId = params.topParentId;
-            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
         }
         return pageData.query;
     }
@@ -31,13 +30,17 @@
         return LibraryBrowser.getSavedQueryKey('studios');
     }
 
-    function reloadItems(context, params) {
+    function getPromise(context, params) {
 
         var query = getQuery(params);
 
         Dashboard.showLoadingMsg();
 
-        ApiClient.getStudios(Dashboard.getCurrentUserId(), query).then(function (result) {
+        return ApiClient.getStudios(Dashboard.getCurrentUserId(), query);
+    }
+
    function reloadItems(context, params, promise) {
+
+        promise.then(function (result) {
 
             var html = '';
 
@@ -57,17 +60,21 @@
             elem.innerHTML = html;
             ImageLoader.lazyChildren(elem);
 
-            LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
             Dashboard.hideLoadingMsg();
         });
     }
 
    return function (view, params, tabContent) {
 
         var self = this;
+        var promise;
+
+        self.preRender = function () {
+            promise = getPromise(view, params);
+        };
 
         self.renderTab = function () {
 
-            reloadItems(tabContent, params);
+            reloadItems(tabContent, params, promise);
         };
     };
 });

dashboard-ui/scripts/musicgenres.js

@@ -38,12 +38,19 @@
             return LibraryBrowser.getSavedQueryKey('genres');
         }
 
-        function reloadItems(context) {
+        function getPromise() {
 
             Dashboard.showLoadingMsg();
             var query = getQuery();
 
-            ApiClient.getMusicGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
+            return ApiClient.getGenres(Dashboard.getCurrentUserId(), query);
+        }
+
+        function reloadItems(context, promise) {
+
+            var query = getQuery();
+
+            promise.then(function (result) {
 
                 var html = '';
 
@@ -58,7 +65,7 @@
                         showItemCounts: true,
                         centerText: true,
                         lazy: true,
-                        overlayPlayButton: true
+                        overlayMoreButton: true
                     });
                 }
                 else if (viewStyle == "ThumbCard") {
@@ -93,7 +100,7 @@
                         centerText: true,
                         showItemCounts: true,
                         lazy: true,
-                        overlayPlayButton: true
+                        overlayMoreButton: true
                     });
                 }
 
@@ -117,16 +124,26 @@
         self.setCurrentViewStyle = function (viewStyle) {
             getPageData(tabContent).view = viewStyle;
             LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
-            reloadItems(tabContent);
+            fullyReload();
         };
 
         self.enableViewSelection = true;
+        var promise;
+
+        self.preRender = function () {
+            promise = getPromise();
+        };
 
         self.renderTab = function () {
 
-            reloadItems(tabContent);
+            reloadItems(tabContent, promise);
         };
 
+        function fullyReload() {
+            self.preRender();
+            self.renderTab();
+        }
+
         var btnSelectView = tabContent.querySelector('.btnSelectView');
         btnSelectView.addEventListener('click', function (e) {
 

dashboard-ui/scripts/musicrecommended.js

@@ -270,9 +270,8 @@
         var tabControllers = [];
         var renderedTabs = [];
 
-        function loadTab(page, index) {
+        function getTabController(page, index, callback) {
 
-            var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
             var depends = [];
 
             switch (index) {
@@ -302,20 +301,15 @@
             }
 
             require(depends, function (controllerFactory) {
-
+                var tabContent;
                 if (index == 0) {
+                    tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
                     self.tabContent = tabContent;
                 }
                 var controller = tabControllers[index];
                 if (!controller) {
+                    tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
                     controller = index ? new controllerFactory(view, params, tabContent) : self;
-
-                    if (index == 2) {
-                        controller.mode = 'albumartists';
-                    } else if (index == 3) {
-                        controller.mode = 'artists';
-                    }
-
                     tabControllers[index] = controller;
 
                     if (controller.initTab) {
@@ -323,6 +317,24 @@
                     }
                 }
 
+                callback(controller);
+            });
+        }
+
+        function preLoadTab(page, index) {
+
+            getTabController(page, index, function (controller) {
+                if (renderedTabs.indexOf(index) == -1) {
+                    if (controller.preRender) {
+                        controller.preRender();
+                    }
+                }
+            });
+        }
+
+        function loadTab(page, index) {
+
+            getTabController(page, index, function (controller) {
                 if (renderedTabs.indexOf(index) == -1) {
                     renderedTabs.push(index);
                     controller.renderTab();
@@ -340,6 +352,9 @@
 
         libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'), [0, 4, 5, 6]);
 
+        mdlTabs.addEventListener('beforetabchange', function (e) {
+            preLoadTab(view, parseInt(e.detail.selectedTabIndex));
+        });
         mdlTabs.addEventListener('tabchange', function (e) {
             loadTab(view, parseInt(e.detail.selectedTabIndex));
         });

dashboard-ui/scripts/tvgenres.js

@@ -38,12 +38,19 @@
             return LibraryBrowser.getSavedQueryKey('genres');
         }
 
-        function reloadItems(context) {
+        function getPromise() {
 
             Dashboard.showLoadingMsg();
             var query = getQuery();
 
-            ApiClient.getGenres(Dashboard.getCurrentUserId(), query).then(function (result) {
+            return ApiClient.getGenres(Dashboard.getCurrentUserId(), query);
+        }
+
+        function reloadItems(context, promise) {
+
+            var query = getQuery();
+
+            promise.then(function (result) {
 
                 var html = '';
 
@@ -117,16 +124,26 @@
         self.setCurrentViewStyle = function(viewStyle) {
             getPageData(tabContent).view = viewStyle;
             LibraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
-            reloadItems(tabContent);
+            fullyReload();
         };
 
         self.enableViewSelection = true;
+        var promise;
+
+        self.preRender = function () {
+            promise = getPromise();
+        };
 
         self.renderTab = function () {
 
-            reloadItems(tabContent);
+            reloadItems(tabContent, promise);
         };
 
+        function fullyReload() {
+            self.preRender();
+            self.renderTab();
+        }
+
         var btnSelectView = tabContent.querySelector('.btnSelectView');
         btnSelectView.addEventListener('click', function (e) {
 

dashboard-ui/scripts/tvlatest.js

@@ -5,7 +5,7 @@
         return 'Thumb';
     }
 
-    function loadLatest(context, params) {
+    function getLatestPromise(context, params) {
 
         Dashboard.showLoadingMsg();
 
@@ -23,7 +23,12 @@
             EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
         };
 
-        ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
+        return ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options));
+    }
+
+    function loadLatest(context, params, promise) {
+
+        promise.then(function (items) {
 
             var view = getView();
             var html = '';
@@ -72,10 +77,15 @@
 
    return function (view, params, tabContent) {
 
         var self = this;
+
        var latestPromise;
+
+        self.preRender = function () {
+
            latestPromise = getLatestPromise(view, params);
+        };
 
         self.renderTab = function() {
 
-            loadLatest(tabContent, params);
+            loadLatest(tabContent, params, latestPromise);
         };
     };
 });

dashboard-ui/scripts/tvrecommended.js

@@ -175,9 +175,8 @@
         var tabControllers = [];
         var renderedTabs = [];
 
-        function loadTab(page, index) {
+        function getTabController(page, index, callback) {
 
-            var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
             var depends = [];
 
             switch (index) {
@@ -207,12 +206,14 @@
             }
 
             require(depends, function (controllerFactory) {
-
+                var tabContent;
                 if (index == 0) {
+                    tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
                     self.tabContent = tabContent;
                 }
                 var controller = tabControllers[index];
                 if (!controller) {
+                    tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
                     controller = index ? new controllerFactory(view, params, tabContent) : self;
                     tabControllers[index] = controller;
 
@@ -221,6 +222,24 @@
                     }
                 }
 
+                callback(controller);
+            });
+        }
+
+        function preLoadTab(page, index) {
+
+            getTabController(page, index, function (controller) {
+                if (renderedTabs.indexOf(index) == -1) {
+                    if (controller.preRender) {
+                        controller.preRender();
+                    }
+                }
+            });
+        }
+
+        function loadTab(page, index) {
+
+            getTabController(page, index, function (controller) {
                 if (renderedTabs.indexOf(index) == -1) {
                     renderedTabs.push(index);
                     controller.renderTab();
@@ -257,10 +276,27 @@
         libraryBrowser.createCardMenus(view.querySelector('#resumableItems'));
         libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'), [0, 1, 2, 4, 5, 6]);
 
+        mdlTabs.addEventListener('beforetabchange', function (e) {
+            preLoadTab(view, parseInt(e.detail.selectedTabIndex));
+        });
         mdlTabs.addEventListener('tabchange', function (e) {
             loadTab(view, parseInt(e.detail.selectedTabIndex));
         });
 
+        function onWebSocketMessage(e, data) {
+
+            var msg = data;
+
+            if (msg.MessageType === "UserDataChanged") {
+
+                if (msg.Data.UserId == Dashboard.getCurrentUserId()) {
+
+                    renderedTabs = [];
+                }
+            }
+
+        }
+
         view.addEventListener('viewbeforeshow', function (e) {
 
             if (!view.getAttribute('data-title')) {
@@ -283,11 +319,13 @@
             }
 
             Events.on(MediaController, 'playbackstop', onPlaybackStop);
+            Events.on(ApiClient, "websocketmessage", onWebSocketMessage);
         });
 
         view.addEventListener('viewbeforehide', function (e) {
 
             Events.off(MediaController, 'playbackstop', onPlaybackStop);
+            Events.off(ApiClient, "websocketmessage", onWebSocketMessage);
         });
 
         view.addEventListener('viewdestroy', function (e) {

dashboard-ui/scripts/tvstudios.js

@@ -21,7 +21,6 @@
             };
 
             pageData.query.ParentId = params.topParentId;
-            LibraryBrowser.loadSavedQueryValues(key, pageData.query);
         }
         return pageData.query;
     }
@@ -31,13 +30,17 @@
         return LibraryBrowser.getSavedQueryKey('studios');
     }
 
-    function reloadItems(context, params) {
+    function getPromise(context, params) {
 
         var query = getQuery(params);
 
         Dashboard.showLoadingMsg();
 
-        ApiClient.getStudios(Dashboard.getCurrentUserId(), query).then(function (result) {
+        return ApiClient.getStudios(Dashboard.getCurrentUserId(), query);
+    }
+
    function reloadItems(context, params, promise) {
+
+        promise.then(function (result) {
 
             var html = '';
 
@@ -57,17 +60,21 @@
             elem.innerHTML = html;
             ImageLoader.lazyChildren(elem);
 
-            LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
             Dashboard.hideLoadingMsg();
         });
     }
 
    return function (view, params, tabContent) {
 
         var self = this;
+        var promise;
+
+        self.preRender = function () {
+            promise = getPromise(view, params);
+        };
 
         self.renderTab = function () {
 
-            reloadItems(tabContent, params);
+            reloadItems(tabContent, params, promise);
         };
     };
 });

dashboard-ui/scripts/tvupcoming.js

@@ -1,6 +1,6 @@
 define(['datetime', 'scrollStyles'], function (datetime) {
 
-    function loadUpcoming(context, params) {
+    function getUpcomingPromise(context, params) {
 
         Dashboard.showLoadingMsg();
 
@@ -16,7 +16,12 @@
 
         query.ParentId = params.topParentId;
 
-        ApiClient.getJSON(ApiClient.getUrl("Shows/Upcoming", query)).then(function (result) {
+        return ApiClient.getJSON(ApiClient.getUrl("Shows/Upcoming", query));
+    }
+
+    function loadUpcoming(context, params, promise) {
+
+        promise.then(function (result) {
 
             var items = result.Items;
 
@@ -127,10 +132,15 @@
 
    return function (view, params, tabContent) {
 
         var self = this;
+        var upcomingPromise;
+
+        self.preRender = function () {
+            upcomingPromise = getUpcomingPromise(view, params);
+        };
 
         self.renderTab = function () {
 
-            loadUpcoming(tabContent, params);
+            loadUpcoming(tabContent, params, upcomingPromise);
         };
     };
 });