update tabs

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

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.3.39",
+  "version": "1.3.40",
-  "_release": "1.3.39",
+  "_release": "1.3.40",
   "_resolution": {
     "type": "version",
-    "tag": "1.3.39",
+    "tag": "1.3.40",
-    "commit": "51bc3e7758132f864fa17488be6f233a55537087"
+    "commit": "f5d6ceea8a3fccab8b2794df5aabb78309ca57a5"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

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

@@ -11,11 +11,8 @@
         if (maxAllowedWidth >= 1900) {
 
             options.push({ name: '1080p - 60Mbps', maxHeight: 1080, bitrate: 60000000 });
-            options.push({ name: '1080p - 55Mbps', maxHeight: 1080, bitrate: 55000000 });
             options.push({ name: '1080p - 50Mbps', maxHeight: 1080, bitrate: 50000000 });
-            options.push({ name: '1080p - 45Mbps', maxHeight: 1080, bitrate: 45000000 });
             options.push({ name: '1080p - 40Mbps', maxHeight: 1080, bitrate: 40000000 });
-            options.push({ name: '1080p - 35Mbps', maxHeight: 1080, bitrate: 35000000 });
             options.push({ name: '1080p - 30Mbps', maxHeight: 1080, bitrate: 30000000 });
             options.push({ name: '1080p - 25Mbps', maxHeight: 1080, bitrate: 25000000 });
             options.push({ name: '1080p - 20Mbps', maxHeight: 1080, bitrate: 20000000 });

dashboard-ui/bower_components/emby-webcomponents/viewmanager/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;
 
@@ -154,7 +153,7 @@ define(['browser'], function (browser) {
     function fade(newAnimatedPage, oldAnimatedPage, transition, isBack) {
 
         var timings = {
-            duration: animationDuration,
+            duration: 200,
             iterations: 1,
             easing: 'ease-out',
             fill: 'both'
@@ -210,16 +209,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;
@@ -275,31 +264,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/bower_components/iron-icon/.bower.json

@@ -32,14 +32,14 @@
     "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "homepage": "https://github.com/PolymerElements/iron-icon",
+  "homepage": "https://github.com/polymerelements/iron-icon",
   "_release": "1.0.8",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.8",
     "commit": "f36b38928849ef3853db727faa8c9ef104d611eb"
   },
-  "_source": "git://github.com/PolymerElements/iron-icon.git",
+  "_source": "git://github.com/polymerelements/iron-icon.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-icon"
+  "_originalSource": "polymerelements/iron-icon"
 }

dashboard-ui/bower_components/iron-resizable-behavior/.bower.json

@@ -28,14 +28,14 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/polymerelements/iron-resizable-behavior",
+  "homepage": "https://github.com/PolymerElements/iron-resizable-behavior",
   "_release": "1.0.3",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.3",
     "commit": "dda1df6aaf452aedf3e52ff0cf69e72439452216"
   },
-  "_source": "git://github.com/polymerelements/iron-resizable-behavior.git",
+  "_source": "git://github.com/PolymerElements/iron-resizable-behavior.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-resizable-behavior"
+  "_originalSource": "PolymerElements/iron-resizable-behavior"
 }

dashboard-ui/bower_components/polymer/.bower.json

@@ -34,6 +34,6 @@
     "commit": "11c987b2eb3c73b388a79fc8aaea8ca01624f514"
   },
   "_source": "git://github.com/Polymer/polymer.git",
-  "_target": "^1.2.0",
+  "_target": "^1.0.0",
   "_originalSource": "Polymer/polymer"
 }

dashboard-ui/css/librarymenu.css

@@ -209,7 +209,7 @@
         width: auto;
         font-family: inherit;
         font-size: inherit;
-        color: #999 !important;
+        color: #aaa !important;
         display: inline-block;
         vertical-align: middle;
         flex-shrink: 0;
@@ -223,6 +223,7 @@
         min-width: initial;
         line-height: initial;
         border-radius: 0 !important;
+        overflow: hidden;
     }
 
         .libraryViewNav .pageTabButton:hover {
@@ -241,22 +242,18 @@
             color: #fff !important;
         }
 
-        .libraryViewNav .pageTabButton:after {
+        .pageTabButtonSelectionBar {
-            content: '';
             position: absolute;
             left: 0;
             border: 0;
             bottom: 0;
             height: 2px;
-            transition: all .2s cubic-bezier(.4,0,1,1);
             right: 0;
-            transform: translate3d(-100%, 0, 0);
             border-radius: 0;
             z-index: 1;
         }
 
-        .libraryViewNav .pageTabButton.is-active:after {
+        .pageTabButton.is-active .pageTabButtonSelectionBar {
-            transform: none;
             background: #52B54B;
         }
 

dashboard-ui/home.html

@@ -7,7 +7,7 @@
         <button class="pageTabButton" data-index="3">${TabUpcoming}</button>
     </div>
     <div class="is-active pageTabContent ehsContent" id="homeTab" data-index="0">
-        <div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
+        <div class="ui-bar-b readOnlyContent welcomeMessage hide" style="padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
             <h1 style="margin-top: 0;" class="tourHeader"></h1>
             <p>
                 <paper-button raised class="submit block btnTakeTour"><iron-icon icon="check"></iron-icon><span class="tourButtonText"></span></paper-button>
@@ -25,7 +25,7 @@
             <div id="nextUpItems" class="itemsContainer">
             </div>
         </div>
-        <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
+        <p class="noNextUpItems hide">${NoNextUpItemsMessage}</p>
     </div>
     <div class="pageTabContent ehsContent" id="favoritesTab" data-index="2">
         <div class="favoriteSections"></div>
@@ -33,7 +33,7 @@
     <div class="pageTabContent ehsContent" id="upcomingTab" data-index="3">
         <div id="upcomingItems" class="itemsContainer">
         </div>
-        <div class="noItemsMessage" style="display: none;">
+        <div class="noItemsMessage hide">
             <p>${MessageNothingHere}</p>
             <p>
                 <a href="metadata.html">${MessagePleaseEnsureInternetMetadata}</a>

dashboard-ui/scripts/indexpage.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'jQuery'], function (libraryBrowser, $) {
+define(['libraryBrowser', 'jQuery'], function (libraryBrowser) {
 
     var defaultFirstSection = 'smalllibrarytiles';
 
@@ -152,22 +152,23 @@
     function showWelcomeIfNeeded(page, displayPreferences) {
 
         if (displayPreferences.CustomPrefs[homePageTourKey] == homePageDismissValue) {
-            $('.welcomeMessage', page).hide();
+            page.querySelector('.welcomeMessage').classList.add('hide');
         } else {
 
             Dashboard.hideLoadingMsg();
 
-            var elem = $('.welcomeMessage', page).show();
+            var elem = page.querySelector('.welcomeMessage');
+            elem.classList.remove('hide');
 
             if (displayPreferences.CustomPrefs[homePageTourKey]) {
 
-                $('.tourHeader', elem).html(Globalize.translate('HeaderWelcomeBack'));
+                elem.querySelector('.tourHeader').innerHTML = Globalize.translate('HeaderWelcomeBack');
-                $('.tourButtonText', elem).html(Globalize.translate('ButtonTakeTheTourToSeeWhatsNew'));
+                elem.querySelector('.tourButtonText').innerHTML = Globalize.translate('ButtonTakeTheTourToSeeWhatsNew');
 
             } else {
 
-                $('.tourHeader', elem).html(Globalize.translate('HeaderWelcomeToProjectWebClient'));
+                elem.querySelector('.tourHeader').innerHTML = Globalize.translate('HeaderWelcomeToProjectWebClient');
-                $('.tourButtonText', elem).html(Globalize.translate('ButtonTakeTheTour'));
+                elem.querySelector('.tourButtonText').innerHTML = Globalize.translate('ButtonTakeTheTour');
             }
         }
     }
@@ -205,7 +206,7 @@
                 newSlideShow.show();
 
                 dismissWelcome(page, userId);
-                $('.welcomeMessage', page).hide();
+                page.querySelector('.welcomeMessage').classList.add('hide');
             });
         });
     }

dashboard-ui/scripts/librarybrowser.js

@@ -28,6 +28,33 @@
         });
     }
 
+    function animateSelectionBar(button) {
+
+        var elem = button.querySelector('.pageTabButtonSelectionBar');
+
+        var keyframes = [
+          { transform: 'translate3d(-100%, 0, 0)', offset: 0 },
+          { transform: 'none', offset: 1 }];
+
+        if (!elem.animate) {
+            return;
+        }
+        elem.animate(keyframes, {
+            duration: 160,
+            iterations: 1,
+            easing: 'ease-out'
+        });
+    }
+
+    function animateTabOnShow(newPanel, animateTabs, index) {
+        
+        if (animateTabs && animateTabs.indexOf(index) != -1 && /*browserInfo.animate &&*/ newPanel.animate) {
+            setTimeout(function () {
+                fadeInRight(newPanel);
+            }, 160);
+        }
+    }
+
     var libraryBrowser = (function (window, document, screen) {
 
         // Regular Expressions for parsing tags and attributes
@@ -248,10 +275,11 @@
 
                 var buttons = tabs.querySelectorAll('.pageTabButton');
                 for (var i = 0, length = buttons.length; i < length; i++) {
-                    buttons[i].classList.add('mdl-button');
+                    //buttons[i].classList.add('mdl-button');
-                    buttons[i].classList.add('mdl-js-button');
+                    //buttons[i].classList.add('mdl-js-button');
-                    buttons[i].classList.add('mdl-js-ripple-effect');
+                    var div = document.createElement('div');
-                    componentHandler.upgradeElement(buttons[i], 'MaterialButton');
+                    div.classList.add('pageTabButtonSelectionBar');
+                    buttons[i].appendChild(div);
                 }
 
                 tabs.classList.add('hiddenScrollX');
@@ -269,12 +297,11 @@
                         }
 
                         link.classList.add('is-active');
+                        animateSelectionBar(link);
                         var index = parseInt(link.getAttribute('data-index'));
                         var newPanel = panels[index];
 
-                        if (animateTabs && animateTabs.indexOf(index) != -1 && /*browserInfo.animate &&*/ newPanel.animate) {
+                        animateTabOnShow(newPanel, animateTabs, index);
-                            fadeInRight(newPanel);
-                        }
 
                         // If toCenter is called syncronously within the click event, it sometimes ends up canceling it
                         setTimeout(function () {
@@ -288,7 +315,7 @@
                             newPanel.classList.add('is-active');
 
                             //scrollHelper.toCenter(tabs, link, true);
-                        }, 100);
+                        }, 160);
                     }
                 });
 

dashboard-ui/scripts/site.js

@@ -2714,49 +2714,57 @@ var AppInfo = {};
         defineRoute({
             path: '/mypreferencesdisplay.html',
             dependencies: ['paper-button'],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
             path: '/mypreferenceshome.html',
             dependencies: ['paper-button'],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
             path: '/mypreferenceslanguages.html',
             dependencies: ['paper-button'],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
             path: '/mypreferencesmenu.html',
             dependencies: ['paper-button'],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
             path: '/myprofile.html',
             dependencies: ['paper-button'],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
             path: '/mysync.html',
             dependencies: [],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
             path: '/mysyncjob.html',
             dependencies: [],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
             path: '/mysyncsettings.html',
             dependencies: [],
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({
@@ -2784,7 +2792,8 @@ var AppInfo = {};
             path: '/nowplaying.html',
             dependencies: ['paper-icon-button-light', 'paper-slider', 'paper-button'],
             controller: 'scripts/nowplayingpage',
-            autoFocus: false
+            autoFocus: false,
+            transition: 'fade'
         });
 
         defineRoute({