optimize dlna views

dashboard-ui/components/viewcontainer-lite.js

@@ -3,7 +3,6 @@ define(['browser'], function (browser) {
     var allPages = document.querySelectorAll('.mainAnimatedPage');
     var currentUrls = [];
     var pageContainerCount = allPages.length;
-    var animationDuration = 500;
     var allowAnimation = true;
     var selectedPageIndex = -1;
 
@@ -104,6 +103,11 @@ define(['browser'], function (browser) {
                         afterAnimate(allPages, pageIndex);
                     }
 
+                    // Temporary hack
+                    // If a view renders UI in viewbeforeshow the lazy image loader will think the images aren't visible and won't load images
+                    // The views need to be updated to start loading data in beforeshow, but not render until show
+                    document.dispatchEvent(new CustomEvent('scroll', {}));
+
                     $.mobile = $.mobile || {};
                     $.mobile.activePage = view;
 
@@ -249,7 +253,7 @@ define(['browser'], function (browser) {
     function fade(newAnimatedPage, oldAnimatedPage, transition, isBack) {
 
         var timings = {
-            duration: animationDuration,
+            duration: 140,
             iterations: 1,
             easing: 'ease-out',
             fill: 'both'
@@ -305,16 +309,6 @@ define(['browser'], function (browser) {
         onBeforeChange = fn;
     }
 
-    function sendResolve(resolve, view) {
-
-        // Don't report completion until the animation has finished, otherwise rendering may not perform well
-        setTimeout(function () {
-
-            resolve(view);
-
-        }, animationDuration);
-    }
-
     function getSelectedIndex(allPages) {
 
         return selectedPageIndex;
@@ -354,6 +348,11 @@ define(['browser'], function (browser) {
                         afterAnimate(allPages, index);
                     }
 
+                    // Temporary hack
+                    // If a view renders UI in viewbeforeshow the lazy image loader will think the images aren't visible and won't load images
+                    // The views need to be updated to start loading data in beforeshow, but not render until show
+                    document.dispatchEvent(new CustomEvent('scroll', {}));
+
                     $.mobile = $.mobile || {};
                     $.mobile.activePage = view;
 
@@ -374,31 +373,14 @@ define(['browser'], function (browser) {
         currentUrls = [];
     }
 
-    function parentWithClass(elem, className) {
+    if (enableAnimation() && !browser.animate) {
-
+        require(['webAnimations']);
-        while (!elem.classList || !elem.classList.contains(className)) {
-            elem = elem.parentNode;
-
-            if (!elem) {
-                return null;
-            }
-        }
-
-        return elem;
-    }
-
-    function init(isAnimationAllowed) {
-
-        if (allowAnimation && enableAnimation() && !browser.animate) {
-            require(['webAnimations']);
-        }
     }
 
     return {
         loadView: loadView,
         tryRestoreView: tryRestoreView,
         reset: reset,
-        setOnBeforeChange: setOnBeforeChange,
+        setOnBeforeChange: setOnBeforeChange
-        init: init
     };
 });

dashboard-ui/scripts/itemdetailpage.js

@@ -63,6 +63,8 @@
 
         Dashboard.getCurrentUser().then(function (user) {
 
+            window.scrollTo(0, 0);
+
             renderImage(page, item, user);
 
             setInitialCollapsibleState(page, item, context, user);

dashboard-ui/scripts/librarymenu.js

@@ -737,12 +737,14 @@
 
             var html = title;
 
-            var page = $.mobile.activePage;
+            if (window.$ && $.mobile) {
-            if (page) {
+                var page = $.mobile.activePage;
-                var helpUrl = page.getAttribute('data-helpurl');
+                if (page) {
+                    var helpUrl = page.getAttribute('data-helpurl');
 
-                if (helpUrl) {
+                    if (helpUrl) {
-                    html += '<a href="' + helpUrl + '" target="_blank" class="clearLink" style="margin-left:2em;" title="' + Globalize.translate('ButtonHelp') + '"><paper-button class="accent" style="margin:0;font-weight:normal;font-size:13px;padding:.25em;display:flex;align-items:center;"><iron-icon icon="info"></iron-icon><span>Help</span></paper-button></a>';
+                        html += '<a href="' + helpUrl + '" target="_blank" class="clearLink" style="margin-left:2em;" title="' + Globalize.translate('ButtonHelp') + '"><paper-button class="accent" style="margin:0;font-weight:normal;font-size:13px;padding:.25em;display:flex;align-items:center;"><iron-icon icon="info"></iron-icon><span>Help</span></paper-button></a>';
+                    }
                 }
             }
 

dashboard-ui/scripts/site.js

@@ -1752,7 +1752,8 @@ var AppInfo = {};
             globalize: embyWebComponentsBowerPath + "/globalize",
             itemHelper: embyWebComponentsBowerPath + '/itemhelper',
             itemShortcuts: embyWebComponentsBowerPath + "/shortcuts",
-            imageLoader: embyWebComponentsBowerPath + "/images/imagehelper"
+            imageLoader: embyWebComponentsBowerPath + "/images/imagehelper",
+            webAnimations: bowerPath + '/web-animations-js/web-animations-next-lite.min'
         };
 
         if (navigator.webkitPersistentStorage) {
@@ -2348,13 +2349,15 @@ var AppInfo = {};
         defineRoute({
             path: '/channelitems.html',
             dependencies: [],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
             path: '/channels.html',
             dependencies: [],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
@@ -2522,7 +2525,8 @@ var AppInfo = {};
             path: '/home.html',
             dependencies: [],
             autoFocus: false,
-            controller: 'scripts/indexpage'
+            controller: 'scripts/indexpage',
+            transition: 'fade'
         });
 
         defineRoute({
@@ -2535,14 +2539,16 @@ var AppInfo = {};
         defineRoute({
             path: '/itemdetails.html',
             dependencies: ['paper-button'],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
             path: '/itemlist.html',
             dependencies: ['paper-checkbox', 'scripts/alphapicker'],
             autoFocus: false,
-            controller: 'scripts/itemlistpage'
+            controller: 'scripts/itemlistpage',
+            transition: 'fade'
         });
 
         defineRoute({
@@ -2576,7 +2582,8 @@ var AppInfo = {};
             path: '/livetv.html',
             dependencies: ['paper-button', 'livetvcss'],
             controller: 'scripts/livetvsuggested',
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
@@ -2692,14 +2699,16 @@ var AppInfo = {};
             path: '/movies.html',
             dependencies: ['paper-checkbox', 'paper-fab', 'scripts/alphapicker', 'paper-button'],
             autoFocus: false,
-            controller: 'scripts/moviesrecommended'
+            controller: 'scripts/moviesrecommended',
+            transition: 'fade'
         });
 
         defineRoute({
             path: '/music.html',
             dependencies: ['scripts/alphapicker'],
             controller: 'scripts/musicrecommended',
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
@@ -2781,7 +2790,8 @@ var AppInfo = {};
         defineRoute({
             path: '/photos.html',
             dependencies: [],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
@@ -2794,7 +2804,8 @@ var AppInfo = {};
         defineRoute({
             path: '/playlists.html',
             dependencies: [],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
@@ -2908,7 +2919,8 @@ var AppInfo = {};
             path: '/tv.html',
             dependencies: ['paper-checkbox', 'paper-icon-button-light', 'paper-button'],
             autoFocus: false,
-            controller: 'scripts/tvrecommended'
+            controller: 'scripts/tvrecommended',
+            transition: 'fade'
         });
 
         defineRoute({
@@ -3242,6 +3254,7 @@ pageClassOn('viewinit', "page", function () {
 
     page.classList.add("ui-page");
     page.classList.add("ui-page-theme-" + current);
+    page.classList.add("ui-body-" + current);
 
     var contents = page.querySelectorAll("div[data-role='content']");
 
@@ -3269,13 +3282,9 @@ pageClassOn('viewshow', "page", function () {
     if (currentTheme == 'a') {
         docElem.classList.add('background-theme-a');
         docElem.classList.remove('background-theme-b');
-        page.classList.add('ui-body-a');
-        page.classList.remove('ui-body-b');
     } else {
         docElem.classList.add('background-theme-b');
         docElem.classList.remove('background-theme-a');
-        page.classList.add('ui-body-b');
-        page.classList.remove('ui-body-a');
     }
 
     var apiClient = window.ApiClient;