rework transitions

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.3.73",
+  "version": "1.3.74",
-  "_release": "1.3.73",
+  "_release": "1.3.74",
   "_resolution": {
     "type": "version",
-    "tag": "1.3.73",
+    "tag": "1.3.74",
-    "commit": "0727aaabe8c649aa53cd732507f11a295a581ac3"
+    "commit": "cb08b23d4989aaab3ee4b4ba5069eee6a96e04ad"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

dashboard-ui/bower_components/emby-webcomponents/browserdeviceprofile.js

@@ -151,6 +151,11 @@ define(['browser'], function (browser) {
 
     function getMaxBitrate() {
 
+        // 10mbps
+        if (browser.xboxOne) {
+            return 10000000;
+        }
+
         var userAgent = navigator.userAgent.toLowerCase();
 
         if (browser.tizen) {

dashboard-ui/bower_components/emby-webcomponents/emby-select/emby-select.js

@@ -101,13 +101,20 @@
 
     EmbySelectPrototype.createdCallback = function () {
 
+        var parent = this.parentNode;
+        if (!parent.classList.contains('selectContainer')) {
+            var div = this.ownerDocument.createElement('div');
+            div.classList.add('selectContainer');
+            parent.replaceChild(div, this);
+            div.appendChild(this);
+        }
         if (!this.id) {
             this.id = 'select' + new Date().getTime();
         }
         this.addEventListener('mousedown', onMouseDown);
         this.addEventListener('keydown', onKeyDown);
         this.addEventListener('focus', onFocus);
-        this.addEventListener('keydown', onBlur);
+        this.addEventListener('blur', onBlur);
     };
 
     EmbySelectPrototype.attachedCallback = function () {

dashboard-ui/bower_components/emby-webcomponents/viewmanager/viewcontainer-lite.js

@@ -116,7 +116,8 @@ define(['browser'], function (browser) {
             var timings = {
                 duration: 450,
                 iterations: 1,
-                easing: 'ease-out'
+                easing: 'ease-out',
+                fill: 'both'
             }
 
             var animations = [];
@@ -155,7 +156,8 @@ define(['browser'], function (browser) {
             var timings = {
                 duration: 200,
                 iterations: 1,
-                easing: 'ease-out'
+                easing: 'ease-out',
+                fill: 'both'
             }
 
             var animations = [];

dashboard-ui/components/viewcontainer-lite.js

@@ -1,8 +1,9 @@
 define(['browser'], function (browser) {
 
-    var allPages = document.querySelectorAll('.mainAnimatedPage');
+    var mainAnimatedPages = document.querySelector('.mainAnimatedPages');
+    var allPages = [];
     var currentUrls = [];
-    var pageContainerCount = allPages.length;
+    var pageContainerCount = 3;
     var selectedPageIndex = -1;
 
     function enableAnimation() {
@@ -26,7 +27,7 @@ define(['browser'], function (browser) {
 
         cancelActiveAnimations();
 
-        var selected = getSelectedIndex(allPages);
+        var selected = selectedPageIndex;
         var previousAnimatable = selected == -1 ? null : allPages[selected];
         var pageIndex = selected + 1;
 
@@ -60,35 +61,48 @@ define(['browser'], function (browser) {
 
             require(dependencies, function () {
 
-                var animatable = allPages[pageIndex];
+                var currentPage = allPages[pageIndex];
-
-                var currentPage = animatable.querySelector('.page-view');
 
                 if (currentPage) {
                     triggerDestroy(currentPage);
                 }
 
-                var view;
+                var view = newView;
 
-                if (typeof (newView) == 'string') {
+                if (typeof (view) == 'string') {
-                    animatable.innerHTML = newView;
+                    view = document.createElement('div');
-                    view = animatable.querySelector('.page-view');
+                    view.innerHTML = newView;
+                }
+
+                if (currentPage) {
+                    if (newViewInfo.hasScript) {
+                        // TODO: figure this out without jQuery
+                        view = $(view).appendTo(mainAnimatedPages)[0];
+                        mainAnimatedPages.removeChild(currentPage);
+                    } else {
+                        mainAnimatedPages.replaceChild(view, currentPage);
+                    }
                 } else {
                     if (newViewInfo.hasScript) {
                         // TODO: figure this out without jQuery
-                        animatable.innerHTML = '';
+                        view = $(view).appendTo(mainAnimatedPages)[0];
-                        $(newView).appendTo(animatable);
                     } else {
-                        if (currentPage) {
+                        mainAnimatedPages.appendChild(view);
-                            animatable.replaceChild(newView, currentPage);
-                        } else {
-                            animatable.appendChild(newView);
-                        }
                     }
-                    enhanceNewView(dependencies, newView);
-                    view = newView;
                 }
 
+                if (typeof (newView) != 'string') {
+                    enhanceNewView(dependencies, view);
+                }
+
+                if (options.type) {
+                    view.setAttribute('data-type', options.type);
+                }
+
+                var animatable = view;
+                view.classList.add('mainAnimatedPage');
+                allPages[pageIndex] = view;
+
                 if (onBeforeChange) {
                     onBeforeChange(view, false, options);
                 }
@@ -155,20 +169,13 @@ define(['browser'], function (browser) {
     function normalizeNewView(options) {
 
         if (options.view.indexOf('data-role="page"') == -1) {
-            var html = '<div class="page-view" data-type="' + (options.type || '') + '">';
+            return options.view;
-            html += options.view;
-            html += '</div>';
-            return html;
         }
 
         var hasScript = options.view.indexOf('<script') != -1;
 
-        var elem = parseHtml(options.view, hasScript);
-        elem.classList.add('page-view');
-        elem.setAttribute('data-type', options.type || '');
-
         return {
-            elem: elem,
+            elem: parseHtml(options.view, hasScript),
             hasScript: hasScript
         };
     }
@@ -203,12 +210,6 @@ define(['browser'], function (browser) {
             }
         }
 
-        return nullAnimation(newAnimatedPage, oldAnimatedPage, transition, isBack);
-    }
-
-    function nullAnimation(newAnimatedPage, oldAnimatedPage, transition, isBack) {
-
-        newAnimatedPage.classList.remove('hide');
         return Promise.resolve();
     }
 
@@ -236,8 +237,6 @@ define(['browser'], function (browser) {
                 ], timings));
             }
 
-            newAnimatedPage.classList.remove('hide');
-
             var start = isBack ? '-100%' : '100%';
 
             animations.push(newAnimatedPage.animate([
@@ -275,8 +274,6 @@ define(['browser'], function (browser) {
                 ], timings));
             }
 
-            newAnimatedPage.classList.remove('hide');
-
             animations.push(newAnimatedPage.animate([
 
                   { opacity: 0, offset: 0 },
@@ -313,19 +310,15 @@ define(['browser'], function (browser) {
         onBeforeChange = fn;
     }
 
-    function getSelectedIndex(allPages) {
-
-        return selectedPageIndex;
-    }
-
     function tryRestoreView(options) {
 
         var url = options.url;
         var index = currentUrls.indexOf(url);
 
         if (index != -1) {
-            var page = allPages[index];
+
-            var view = page.querySelector(".page-view");
+            var animatable = allPages[index];
+            var view = animatable;
 
             if (view) {
 
@@ -335,8 +328,7 @@ define(['browser'], function (browser) {
 
                 cancelActiveAnimations();
 
-                var animatable = allPages[index];
+                var selected = selectedPageIndex;
-                var selected = getSelectedIndex(allPages);
                 var previousAnimatable = selected == -1 ? null : allPages[selected];
 
                 if (onBeforeChange) {
@@ -345,6 +337,8 @@ define(['browser'], function (browser) {
 
                 beforeAnimate(allPages, index, selected);
 
+                animatable.classList.remove('hide');
+
                 return animate(animatable, previousAnimatable, options.transition, options.isBack).then(function () {
 
                     selectedPageIndex = index;
@@ -361,7 +355,6 @@ define(['browser'], function (browser) {
                         $.mobile = $.mobile || {};
                         $.mobile.activePage = view;
                     }
-
                     return view;
                 });
             }
@@ -376,13 +369,19 @@ define(['browser'], function (browser) {
 
     function reset() {
 
+        allPages = [];
         currentUrls = [];
+        mainAnimatedPages.innerHTML = '';
+        selectedPageIndex = -1;
     }
 
     if (enableAnimation() && !document.documentElement.animate) {
         require(['webAnimations']);
     }
 
+    reset();
+    mainAnimatedPages.classList.remove('hide');
+
     return {
         loadView: loadView,
         tryRestoreView: tryRestoreView,

dashboard-ui/index.html

@@ -12,9 +12,7 @@
             <div class="mainDrawerPanelContent" main>
                 <div class="pageBackground"></div>
                 <div class="skinHeader"></div>
-                <div class="mainAnimatedPages skinBody">
+                <div class="mainAnimatedPages skinBody"></div>
-                    <div class="mainAnimatedPage hide"></div><div class="mainAnimatedPage hide"></div><div class="mainAnimatedPage hide"></div>
-                </div>
             </div>
         </paper-drawer-panel>
     </div>