update scroll styles

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

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.2.12",
+  "version": "1.2.13",
-  "_release": "1.2.12",
+  "_release": "1.2.13",
   "_resolution": {
     "type": "version",
-    "tag": "1.2.12",
+    "tag": "1.2.13",
-    "commit": "7f5e97c93b067629c7e3d0da3599ec812ad573b4"
+    "commit": "23c88db1b8b062fa6b738b724c2360d398164cad"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

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

@@ -1,6 +1,31 @@
 .actionSheet {
     display: flex;
     justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 2px;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+
+    /*opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    z-index: 999;
+     transform-origin: 100% 0;
+            display: block;
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 2px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+    will-change: transform;
+    transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);
+    transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);
+    z-index: -1;*/
 }
 
     .actionSheet.centered .actionSheetContent {
@@ -10,7 +35,7 @@
 
 .actionSheetContent {
     margin: 0 !important;
-    padding: 1em 1em !important;
+    padding: .4em 0 !important;
     flex-direction: column;
     display: flex;
     justify-content: center;
@@ -18,7 +43,7 @@
 }
 
 .actionSheetMenuItem {
-    padding: .5em .5em;
+    padding: .7em 1.5em;
     margin: 0;
     text-transform: none;
     text-align: inherit;
@@ -47,8 +72,14 @@
 
 h1.actionSheetTitle {
     margin: .5em 0 1em !important;
+    padding: 0 1em;
 }
 
 h2.actionSheetTitle {
     margin: .25em 0 .55em !important;
+    padding: 0 1em;
+}
+
+.actionSheet.extraSpacing {
+    font-size: 108%;
 }

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

@@ -22,18 +22,6 @@
             return results;
         }
 
-        var docElem = doc.documentElement;
-        var docElemValues = {
-            clientTop: docElem.clientTop,
-            clientLeft: docElem.clientLeft
-        };
-
-        var win = doc.defaultView;
-        var winValues = {
-            pageXOffset: win.pageXOffset,
-            pageYOffset: win.pageYOffset
-        };
-
         var box;
         var elem;
 
@@ -57,7 +45,7 @@
         return results;
     }
 
-    function getPosition(options) {
+    function getPosition(options, dlg) {
 
         var windowHeight = window.innerHeight;
 
@@ -70,9 +58,9 @@
         pos.top += options.positionTo.offsetHeight / 2;
         pos.left += options.positionTo.offsetWidth / 2;
 
-        // Account for popup size - we can't predict this yet so just estimate
+        // Account for popup size 
-        pos.top -= (45 * options.items.length) / 2;
+        pos.top -= ((dlg.offsetHeight || 300) / 2);
-        pos.left -= 80;
+        pos.left -= ((dlg.offsetWidth || 160) / 2);
 
         // Avoid showing too close to the bottom
         pos.top = Math.min(pos.top, windowHeight - 300);
@@ -94,16 +82,13 @@
 
     function show(options) {
 
-        var pos = options.positionTo ? getPosition(options) : null;
-
         // items
         // positionTo
         // showCancel
         // title
         var dialogOptions = {
             removeOnClose: true,
-            enableHistory: options.enableHistory,
+            enableHistory: options.enableHistory
-            refit: pos == null
         };
 
         var backButton = false;
@@ -122,6 +107,10 @@
 
         var dlg = dialogHelper.createDialog(dialogOptions);
 
+        if (!layoutManager.tv) {
+            dlg.classList.add('extraSpacing');
+        }
+
         dlg.classList.add('actionSheet');
 
         var html = '';
@@ -142,6 +131,10 @@
 
         html += '<div class="actionSheetScroller">';
 
+        options.items.forEach(function (o) {
+            o.ironIcon = o.selected ? 'check' : null;
+        });
+
         var itemsWithIcons = options.items.filter(function (o) {
             return o.ironIcon;
         });
@@ -155,7 +148,6 @@
         }
 
         var enablePaperMenu = !layoutManager.tv;
-        enablePaperMenu = false;
         var itemTagName = 'paper-button';
 
         if (enablePaperMenu) {
@@ -168,7 +160,7 @@
             var option = options.items[i];
 
             var autoFocus = option.selected ? ' autoFocus' : '';
-            html += '<' + itemTagName + autoFocus + ' noink class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">';
+            html += '<' + itemTagName + autoFocus + ' class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">';
 
             if (option.ironIcon) {
                 html += '<iron-icon class="actionSheetItemIcon" icon="' + option.ironIcon + '"></iron-icon>';
@@ -231,6 +223,8 @@
 
             dialogHelper.open(dlg);
 
+            var pos = options.positionTo ? getPosition(options, dlg) : null;
+
             if (pos) {
                 dlg.style.position = 'fixed';
                 dlg.style.margin = 0;

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

@@ -1,6 +1,6 @@
 .dialog {
     margin: 0;
-    border-radius: 3px;
+    border-radius: 2px;
     z-index: 999999 !important;
     position: fixed;
     margin: 24px 40px;
@@ -10,6 +10,7 @@
     height: auto;
     border: 0;
     padding: 0;
+    will-change: transform;
 }
 
     .dialog.fixedSize {

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

@@ -1,23 +1,40 @@
 define(['browser'], function (browser) {
 
+    function setLayout(self, layout, selectedLayout) {
+
+        if (layout == selectedLayout) {
+            self[layout] = true;
+            document.documentElement.classList.add('layout-' + layout);
+        } else {
+            self[layout] = false;
+            document.documentElement.classList.remove('layout-' + layout);
+        }
+    }
+
     function layoutManager() {
 
         var self = this;
 
-        self.setFormFactor = function (formFactor) {
+        self.layout = function (layout) {
 
-            self.mobile = false;
+            setLayout(self, 'mobile', layout);
-            self.tv = false;
+            setLayout(self, 'tv', layout);
-
+            setLayout(self, 'desktop', layout);
-            self[formFactor] = true;
         };
 
-        // Take a guess at initial layout. The consuming app can override
+        self.autoLayout = function () {
-        if (browser.mobile) {
+
-            self.setFormFactor('mobile');
+            // Take a guess at initial layout. The consuming app can override
-        } else {
+            if (browser.mobile) {
-            self.setFormFactor('desktop');
+                self.layout('mobile');
-        }
+            } else if (browser.tv) {
+                self.layout('tv');
+            } else {
+                self.layout('desktop');
+            }
+        };
+
+        self.autoLayout();
     };
 
     return new layoutManager();

dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css

@@ -0,0 +1,49 @@
+.smoothScrollX {
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+}
+
+.hiddenScrollX {
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: hidden;
+    white-space: nowrap;
+    scroll-behavior: smooth;
+}
+
+.hiddenScrollX, .layout-tv .smoothScrollX, .layout-mobile .smoothScrollX {
+    -ms-overflow-style: none;
+    overflow: -moz-scrollbars-none;
+}
+
+    .hiddenScrollX::-webkit-scrollbar, .layout-tv .smoothScrollX::-webkit-scrollbar, .layout-mobile .smoothScrollX::-webkit-scrollbar {
+        height: 0 !important;
+        display: none;
+    }
+
+
+.smoothScrollY {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+}
+
+.hiddenScrollY, .layout-tv .smoothScrollY, .layout-mobile .smoothScrollY {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+}
+
+.hiddenScrollY {
+    -ms-overflow-style: none;
+    overflow: -moz-scrollbars-none;
+}
+
+    .hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-mobile .smoothScrollY::-webkit-scrollbar {
+        width: 0 !important;
+        display: none;
+    }

dashboard-ui/bower_components/iron-selector/.bower.json

@@ -36,7 +36,7 @@
     "tag": "v1.4.0",
     "commit": "554f7418fdbd97688eb21518b5f8172167d53a95"
   },
-  "_source": "git://github.com/polymerelements/iron-selector.git",
+  "_source": "git://github.com/PolymerElements/iron-selector.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-selector"
+  "_originalSource": "PolymerElements/iron-selector"
 }

dashboard-ui/components/favoriteitems.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser'], function (libraryBrowser) {
+define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
 
     function enableScrollX() {
         return browserInfo.mobile && AppInfo.enableAppLayouts;

dashboard-ui/components/tvguide/tvguide.js

@@ -1,4 +1,4 @@
-define(['jQuery', 'livetvcss', 'scripts/livetvcomponents'], function ($) {
+define(['jQuery', 'livetvcss', 'scripts/livetvcomponents', 'scrollStyles'], function ($) {
 
     return function (options) {
 

dashboard-ui/components/tvguide/tvguide.template.html

@@ -5,11 +5,11 @@
                 <a class="btnSelectDate" href="#" style="display:block;padding-left:5px;color:#fff;text-decoration:none;font-weight:normal!important;padding:5px 10px 4px 0;font-size:13px;"><iron-icon icon="schedule" style="margin-right:3px;width:18px;height:18px;"></iron-icon><span class="currentDate" style="vertical-align: middle;"></span></a>
             </div>
         </div>
-        <div class="timeslotHeaders hiddenScrollX"></div>
+        <div class="timeslotHeaders smoothScrollX"></div>
     </div>
     <div class="programContainer">
         <div class="channelList"></div>
-        <div class="programGrid hiddenScrollX"></div>
+        <div class="programGrid smoothScrollX"></div>
     </div>
     <div class="channelPaging"></div>
 </div>

dashboard-ui/css/site.css

@@ -563,52 +563,6 @@ div[data-role="controlgroup"] a.ui-btn-active {
     color: #fff !important;
 }
 
-.smoothScrollX {
-    overflow-x: scroll;
-    -webkit-overflow-scrolling: touch;
-    overflow-y: hidden;
-}
-
-.hiddenScrollX {
-    overflow-x: scroll;
-    -webkit-overflow-scrolling: touch;
-    overflow-y: hidden;
-    white-space: nowrap;
-}
-
-.touch .hiddenScrollX {
-    -ms-overflow-style: none;
-    overflow: -moz-scrollbars-none;
-}
-
-    .touch .hiddenScrollX::-webkit-scrollbar {
-        height: 0 !important;
-        display: none;
-    }
-
-
-.smoothScrollY {
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: hidden;
-}
-
-.hiddenScrollY, .ui-panel-inner {
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: hidden;
-}
-
-.touch .hiddenScrollY {
-    -ms-overflow-style: none;
-    overflow: -moz-scrollbars-none;
-}
-
-    .touch .hiddenScrollY::-webkit-scrollbar, .touch .ui-panel-inner::-webkit-scrollbar {
-        width: 0 !important;
-        display: none;
-    }
-
 /**
  * Note: I have omitted any vendor-prefixes for clarity.
  * Adding them is left as an exercise for the reader.

dashboard-ui/scripts/homeupcoming.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'scrollStyles'], function ($) {
 
     function loadUpcoming(page) {
         Dashboard.showLoadingMsg();

dashboard-ui/scripts/itemdetailpage.js

@@ -1,4 +1,4 @@
-define(['layoutManager', 'jQuery'], function (layoutManager, $) {
+define(['layoutManager', 'jQuery', 'scrollStyles'], function (layoutManager, $) {
 
     var currentItem;
 

dashboard-ui/scripts/librarybrowser.js

@@ -1,4 +1,4 @@
-define(['playlistManager', 'appSettings', 'appStorage', 'jQuery'], function (playlistManager, appSettings, appStorage, $) {
+define(['playlistManager', 'appSettings', 'appStorage', 'jQuery', 'scrollStyles'], function (playlistManager, appSettings, appStorage, $) {
 
     var libraryBrowser = (function (window, document, screen) {
 

dashboard-ui/scripts/livetvsuggested.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'scrollStyles'], function ($) {
 
     function enableScrollX() {
         return browserInfo.mobile && AppInfo.enableAppLayouts;

dashboard-ui/scripts/mediaplayer-video.js

@@ -1,4 +1,4 @@
-define(['appSettings', 'jQuery'], function (appSettings, $) {
+define(['appSettings', 'jQuery', 'scrollStyles'], function (appSettings, $) {
 
     function createVideoPlayer(self) {
 
@@ -465,7 +465,7 @@
             html += '</div>';
 
             if (item.Chapters && item.Chapters.length) {
-                html += '<div class="tabScenes nowPlayingTab hiddenScrollX" style="display:none;white-space:nowrap;margin-bottom:2em;">';
+                html += '<div class="tabScenes nowPlayingTab smoothScrollX" style="display:none;white-space:nowrap;margin-bottom:2em;">';
                 var chapterIndex = 0;
                 html += item.Chapters.map(function (c) {
 
@@ -512,7 +512,7 @@
             }
 
             if (item.People && item.People.length) {
-                html += '<div class="tabCast nowPlayingTab hiddenScrollX" style="display:none;white-space:nowrap;">';
+                html += '<div class="tabCast nowPlayingTab smoothScrollX" style="display:none;white-space:nowrap;">';
                 html += item.People.map(function (cast) {
 
                     var personHtml = '<div class="tileItem smallPosterTileItem" style="width:300px;">';

dashboard-ui/scripts/moviesrecommended.js

@@ -1,4 +1,4 @@
-define(['jQuery', 'libraryBrowser'], function ($, libraryBrowser) {
+define(['jQuery', 'libraryBrowser', 'scrollStyles'], function ($, libraryBrowser) {
 
     function getView() {
 

dashboard-ui/scripts/musicrecommended.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'scrollStyles'], function ($) {
 
     function itemsPerRow() {
 

dashboard-ui/scripts/search.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser'], function (libraryBrowser) {
+define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
 
     var searchHintTimeout;
 

dashboard-ui/scripts/sections.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'jQuery'], function (LibraryBrowser, $) {
+define(['libraryBrowser', 'jQuery', 'scrollStyles'], function (LibraryBrowser, $) {
 
     function getUserViews(userId) {
 

dashboard-ui/scripts/site.js

@@ -1977,6 +1977,7 @@ var AppInfo = {};
         define("robotoFont", ['css!' + embyWebComponentsBowerPath + '/fonts/roboto/style']);
         define("opensansFont", ['css!' + embyWebComponentsBowerPath + '/fonts/opensans/style']);
         define("montserratFont", ['css!' + embyWebComponentsBowerPath + '/fonts/montserrat/style']);
+        define("scrollStyles", ['css!' + embyWebComponentsBowerPath + '/scrollstyles']);
 
         define("viewcontainer", ['components/viewcontainer-lite'], returnFirstDependency);
         define('queryString', [bowerPath + '/query-string/index'], function () {
@@ -2615,7 +2616,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/livetvtimer.html',
-            dependencies: [],
+            dependencies: ['scrollStyles'],
             autoFocus: false
         });
 

dashboard-ui/scripts/tvrecommended.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scripts/alphapicker'], function (libraryBrowser) {
+define(['libraryBrowser', 'scripts/alphapicker', 'scrollStyles'], function (libraryBrowser) {
 
     return function (view, params) {
 

dashboard-ui/scripts/tvupcoming.js

@@ -1,4 +1,4 @@
-define([], function () {
+define(['scrollStyles'], function () {
 
     function loadUpcoming(context, params) {