update components

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

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.166",
+  "version": "1.4.167",
-  "_release": "1.4.166",
+  "_release": "1.4.167",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.166",
+    "tag": "1.4.167",
-    "commit": "869fe388b2e0bd01bee868001f9e1d456a2c7ca1"
+    "commit": "03c12f1c7360d863dc0ec55491a292a3f64fb400"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

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

@@ -34,8 +34,9 @@
 
     function getPosition(options, dlg) {
 
-        var windowHeight = window.innerHeight;
+        var windowSize = dom.getWindowSize();
-        var windowWidth = window.innerWidth;
+        var windowHeight = windowSize.innerHeight;
+        var windowWidth = windowSize.innerWidth;
 
         if (windowHeight < 540) {
             return null;
@@ -125,7 +126,7 @@
 
         // Admittedly a hack but right now the scrollbar is being factored into the width which is causing truncation
         if (options.items.length > 20) {
-            var minWidth = window.innerWidth >= 300 ? 240 : 200;
+            var minWidth = dom.getWindowSize().innerWidth >= 300 ? 240 : 200;
             style += "min-width:" + minWidth + "px;";
         }
 

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

@@ -1,4 +1,4 @@
-define(['browser', 'connectionManager', 'playbackManager', 'css!./style'], function (browser, connectionManager, playbackManager) {
+define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./style'], function (browser, connectionManager, playbackManager, dom) {
 
     function enableAnimation(elem) {
 
@@ -178,14 +178,6 @@
         currentLoadingBackdrop = instance;
     }
 
-    var windowWidth;
-    function resetWindowSize() {
-        windowWidth = screen.availWidth || window.innerWidth;
-    }
-    window.addEventListener("orientationchange", resetWindowSize);
-    window.addEventListener('resize', resetWindowSize);
-    resetWindowSize();
-
     function getItemImageUrls(item) {
 
         var apiClient = connectionManager.getApiClient(item.ServerId);
@@ -197,7 +189,7 @@
                 return apiClient.getScaledImageUrl(item.Id, {
                     type: "Backdrop",
                     tag: imgTag,
-                    maxWidth: Math.min(windowWidth, 1920),
+                    maxWidth: Math.min(dom.getWindowSize().innerWidth, 1920),
                     index: index
                 });
             });
@@ -210,7 +202,7 @@
                 return apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
                     type: "Backdrop",
                     tag: imgTag,
-                    maxWidth: Math.min(windowWidth, 1920),
+                    maxWidth: Math.min(dom.getWindowSize().innerWidth, 1920),
                     index: index
                 });
             });

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

@@ -1,5 +1,5 @@
-define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
+define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'dom', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
-    function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize, layoutManager, appHost) {
+    function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize, layoutManager, appHost, dom) {
 
         // Regular Expressions for parsing tags and attributes
         var SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
@@ -118,7 +118,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
 
         function getImageWidth(shape) {
 
-            var screenWidth = window.innerWidth;
+            var screenWidth = dom.getWindowSize().innerWidth;
 
             if (isResizable(screenWidth)) {
                 var roundScreenTo = 100;

dashboard-ui/bower_components/emby-webcomponents/cardbuilder/roundcard.css

@@ -1,5 +1,8 @@
 .cardBox-round {
-    border: .7em solid transparent;
+    border: .7em solid transparent !important;
+    transition: transform 180ms ease-out !important;
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
 }
 
 .cardImageContainer-round {
@@ -10,12 +13,6 @@
     border-color: #fff;
 }
 
-.cardBox-round {
-    transition: transform 180ms ease-out !important;
-    -webkit-transform-origin: center center;
-    transform-origin: center center;
-}
-
 .layout-tv .card-round:focus .cardBox {
     transform: scale(1.34, 1.34);
 }
@@ -26,4 +23,4 @@
 
 .cardImageContainer-round, .card-round .cardImage {
     border-radius: 1000px;
-}
+}

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

@@ -284,6 +284,8 @@
         if (!dlg.classList.contains('hide')) {
 
             var onAnimationFinish = function () {
+                focusManager.popScope(dlg);
+
                 dlg.classList.add('hide');
                 if (dlg.close) {
                     dlg.close();
@@ -319,6 +321,7 @@
     function animateDialogOpen(dlg) {
 
         var onAnimationFinish = function () {
+            focusManager.pushScope(dlg);
             if (dlg.getAttribute('data-autofocus') == 'true') {
                 autoFocus(dlg);
             }

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

@@ -70,11 +70,30 @@ define([], function () {
         target.removeEventListener(type, handler, optionsOrCapture);
     }
 
+    var windowSize;
+    function resetWindowSize() {
+        windowSize = {
+            innerHeight: window.innerHeight,
+            innerWidth: window.innerWidth
+        };
+    }
+
+    function getWindowSize() {
+        if (!windowSize) {
+            resetWindowSize();
+            addEventListenerWithOptions(window, "orientationchange", resetWindowSize, { passive: true });
+            addEventListenerWithOptions(window, 'resize', resetWindowSize, { passive: true });
+        }
+
+        return windowSize;
+    }
+
     return {
         parentWithAttribute: parentWithAttribute,
         parentWithClass: parentWithClass,
         parentWithTag: parentWithTag,
         addEventListener: addEventListenerWithOptions,
-        removeEventListener: removeEventListenerWithOptions
+        removeEventListener: removeEventListenerWithOptions,
+        getWindowSize: getWindowSize
     };
 });

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

@@ -1,5 +1,17 @@
 define(['dom'], function (dom) {
 
+    var scopes = [];
+    function pushScope(elem) {
+        scopes.push(elem);
+    }
+
+    function popScope(elem) {
+
+        if (scopes.length) {
+            scopes.length -= 1;
+        }
+    }
+
     function autoFocus(view, defaultToFirst, findAutoFocusElement) {
 
         var element;
@@ -34,7 +46,14 @@ define(['dom'], function (dom) {
 
     var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'];
     var focusableContainerTagNames = ['BODY', 'DIALOG'];
-    var focusableQuery = focusableTagNames.join(',') + ',.focusable';
+    var focusableQuery = focusableTagNames.map(function (t) {
+
+        if (t == 'INPUT') {
+            t += ':not([type="range"])';
+        }
+        return t + ':not([tabindex="-1"]):not(:disabled)';
+
+    }).join(',') + ',.focusable';
 
     function isFocusable(elem) {
 
@@ -62,6 +81,17 @@ define(['dom'], function (dom) {
         return elem;
     }
 
+    // Determines if a focusable element can be focused at a given point in time 
+    function isCurrentlyFocusableInternal(elem) {
+
+        // http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
+        if (elem.offsetParent === null) {
+            return false;
+        }
+
+        return true;
+    }
+
     // Determines if a focusable element can be focused at a given point in time 
     function isCurrentlyFocusable(elem) {
 
@@ -73,11 +103,6 @@ define(['dom'], function (dom) {
             return false;
         }
 
-        // http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
-        if (elem.offsetParent === null) {
-            return false;
-        }
-
         if (elem.tagName == 'INPUT') {
             var type = elem.type;
             if (type == 'range') {
@@ -85,18 +110,22 @@ define(['dom'], function (dom) {
             }
         }
 
-        return true;
+        return isCurrentlyFocusableInternal(elem);
+    }
+
+    function getDefaultScope() {
+        return scopes[0] || document.body;
     }
 
     function getFocusableElements(parent) {
-        var elems = (parent || document.body).querySelectorAll(focusableQuery);
+        var elems = (parent || getDefaultScope()).querySelectorAll(focusableQuery);
         var focusableElements = [];
 
         for (var i = 0, length = elems.length; i < length; i++) {
 
             var elem = elems[i];
 
-            if (isCurrentlyFocusable(elem)) {
+            if (isCurrentlyFocusableInternal(elem)) {
                 focusableElements.push(elem);
             }
         }
@@ -132,7 +161,7 @@ define(['dom'], function (dom) {
             elem = elem.parentNode;
 
             if (!elem) {
-                return document.body;
+                return getDefaultScope();
             }
         }
 
@@ -192,7 +221,7 @@ define(['dom'], function (dom) {
             activeElement = focusableParent(activeElement);
         }
 
-        var container = activeElement ? getFocusContainer(activeElement, direction) : document.body;
+        var container = activeElement ? getFocusContainer(activeElement, direction) : getDefaultScope();
 
         if (!activeElement) {
             autoFocus(container, true, false);
@@ -218,9 +247,9 @@ define(['dom'], function (dom) {
                 continue;
             }
 
-            if (!isCurrentlyFocusable(curr)) {
+            //if (!isCurrentlyFocusableInternal(curr)) {
-                continue;
+            //    continue;
-            }
+            //}
 
             var elementRect = getViewportBoundingClientRect(curr, windowData);
 
@@ -415,6 +444,8 @@ define(['dom'], function (dom) {
             nav(sourceElement, 3);
         },
         sendText: sendText,
-        isCurrentlyFocusable: isCurrentlyFocusable
+        isCurrentlyFocusable: isCurrentlyFocusable,
+        pushScope: pushScope,
+        popScope: popScope
     };
 });

dashboard-ui/bower_components/emby-webcomponents/images/imagehelper.js

@@ -2,7 +2,6 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
 
     var thresholdX;
     var thresholdY;
-    var windowSize;
 
     var supportsIntersectionObserver = function () {
 
@@ -20,37 +19,28 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
         return false;
     }();
 
-    function resetWindowSize() {
-        windowSize = {
-            innerHeight: window.innerHeight,
-            innerWidth: window.innerWidth
-        };
-    }
-
     function resetThresholds() {
 
         var x = screen.availWidth;
         var y = screen.availHeight;
 
-        if (layoutManager.mobile) {
+        if (browser.touch) {
             x *= 2;
             y *= 2;
         }
 
         thresholdX = x;
         thresholdY = y;
-        resetWindowSize();
     }
 
     if (!supportsIntersectionObserver) {
-        window.addEventListener("orientationchange", resetThresholds);
+        dom.addEventListener(window, "orientationchange", resetThresholds, { passive: true });
-        window.addEventListener('resize', resetThresholds);
+        dom.addEventListener(window, 'resize', resetThresholds, { passive: true });
-        events.on(layoutManager, 'modechange', resetThresholds);
         resetThresholds();
     }
 
     function isVisible(elem) {
-        return visibleinviewport(elem, true, thresholdX, thresholdY, windowSize);
+        return visibleinviewport(elem, true, thresholdX, thresholdY);
     }
 
     var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');

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

@@ -1,4 +1,4 @@
-define([], function () {
+define(['dom'], function (dom) {
 
     /**
    * Copyright 2012, Digital Fusion
@@ -19,10 +19,7 @@
             return true;
         }
 
-        windowSize = windowSize || {
+        windowSize = windowSize || dom.getWindowSize();
-            innerHeight: window.innerHeight,
-            innerWidth: window.innerWidth
-        };
 
         var vpWidth = windowSize.innerWidth,
             vpHeight = windowSize.innerHeight;

dashboard-ui/scripts/site.js

@@ -2865,7 +2865,11 @@ var AppInfo = {};
 
             if (!browserInfo.tv && !AppInfo.isNativeApp) {
                 if (navigator.serviceWorker) {
-                    navigator.serviceWorker.register('serviceworker.js');
+                    try {
+                        navigator.serviceWorker.register('serviceworker.js');
+                    } catch (err) {
+                        console.log('Error registering serviceWorker: ' + err);
+                    }
                 }
 
                 if (window.Notification) {