update scrolling

dashboard-ui/bower_components/emby-webcomponents/emby-button/paper-icon-button-light.js

@@ -1 +1 @@
-define(["browser","dom","layoutManager","css!./emby-button","registerElement"],function(browser,dom,layoutManager){"use strict";function enableAnimation(){return!browser.tv}function onTransitionEnd(){var div=this,parentNode=div.parentNode;if(parentNode)try{parentNode.removeChild(div)}catch(err){}}function animateButtonInternal(e,btn){for(var div=document.createElement("div"),i=0,length=btn.classList.length;i<length;i++)div.classList.add(btn.classList[i]+"-ripple-effect");var offsetX=e.offsetX||0,offsetY=e.offsetY||0;offsetX>0&&offsetY>0&&(div.style.left=offsetX+"px",div.style.top=offsetY+"px"),btn.appendChild(div),div.addEventListener(dom.whichAnimationEvent(),onTransitionEnd,!1),div.addEventListener(dom.whichAnimationCancelEvent(),onTransitionEnd,!1),setTimeout(onTransitionEnd.bind(div),200)}function animateButton(e,btn){requestAnimationFrame(function(){animateButtonInternal(e,btn)})}function onKeyDown(e){13===e.keyCode&&animateButton(e,this)}function onClick(e){animateButton(e,this)}var EmbyButtonPrototype=Object.create(HTMLButtonElement.prototype);EmbyButtonPrototype.createdCallback=function(){this.classList.contains("paper-icon-button-light")||(this.classList.add("paper-icon-button-light"),layoutManager.tv&&this.classList.add("icon-button-focusscale"),enableAnimation()&&(dom.addEventListener(this,"keydown",onKeyDown,{passive:!0}),dom.addEventListener(this,"click",onClick,{passive:!0})))},document.registerElement("paper-icon-button-light",{prototype:EmbyButtonPrototype,extends:"button"})});
+define(["browser","dom","layoutManager","css!./emby-button","registerElement"],function(browser,dom,layoutManager){"use strict";function enableAnimation(){return!browser.tv}function onTransitionEnd(){var div=this,parentNode=div.parentNode;if(parentNode)try{parentNode.removeChild(div)}catch(err){}}function animateButtonInternal(e,btn){for(var div=document.createElement("div"),i=0,length=btn.classList.length;i<length;i++)div.classList.add(btn.classList[i]+"-ripple-effect");var offsetX=e.offsetX||0,offsetY=e.offsetY||0;offsetX>0&&offsetY>0&&(div.style.left=offsetX+"px",div.style.top=offsetY+"px"),btn.appendChild(div),div.addEventListener(dom.whichAnimationEvent(),onTransitionEnd,!1),div.addEventListener(dom.whichAnimationCancelEvent(),onTransitionEnd,!1),setTimeout(onTransitionEnd.bind(div),200)}function animateButton(e,btn){requestAnimationFrame(function(){animateButtonInternal(e,btn)})}function onKeyDown(e){13===e.keyCode&&animateButton(e,this)}function onClick(e){animateButton(e,this)}var EmbyButtonPrototype=Object.create(HTMLButtonElement.prototype);EmbyButtonPrototype.createdCallback=function(){this.classList.contains("paper-icon-button-light")||(this.classList.add("paper-icon-button-light"),layoutManager.tv&&this.classList.add("icon-button-focusscale"),enableAnimation()&&"false"!==this.getAttribute("data-ripple")&&(dom.addEventListener(this,"keydown",onKeyDown,{passive:!0}),dom.addEventListener(this,"click",onClick,{passive:!0})))},document.registerElement("paper-icon-button-light",{prototype:EmbyButtonPrototype,extends:"button"})});

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

@@ -0,0 +1 @@
+.emby-scrollbuttons-scroller{position:relative}.scrollbuttoncontainer{position:absolute;top:0;bottom:0;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;background:rgba(20,20,20,.5);z-index:1;font-size:3em;color:#fff;display:none;overflow:hidden}.emby-scrollbuttons-scroller:hover .scrollbuttoncontainer{display:-webkit-box;display:-webkit-flex;display:flex}.scrollbuttoncontainer:hover{background:rgba(20,20,20,.7)}.scrollbuttoncontainer-left{left:0}.scrollbuttoncontainer-right{right:0}.emby-scrollbuttons-scrollbutton{margin:0 -.275em;-webkit-transition:-webkit-transform 160ms ease-out;-o-transition:transform 160ms ease-out;transition:transform 160ms ease-out}.scrollbuttoncontainer:hover>.emby-scrollbuttons-scrollbutton{-webkit-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.emby-scrollbuttons-scrollbutton:after{content:'';display:none!important}.emby-scrollbuttons-scrollbutton:focus{color:inherit!important}

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

@@ -0,0 +1 @@
+define(["layoutManager","dom","css!./emby-scrollbuttons","registerElement","paper-icon-button-light"],function(layoutManager,dom){"use strict";function getScrollButtonContainerHtml(direction){var html="",hide="left"===direction?" hide":"";html+='<div class="scrollbuttoncontainer scrollbuttoncontainer-'+direction+hide+'">';var icon="left"===direction?"&#xE5CB;":"&#xE5CC;";return html+='<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="'+direction+'" class="emby-scrollbuttons-scrollbutton">',html+='<i class="md-icon">'+icon+"</i>",html+="</button>",html+="</div>"}function getScrollPosition(parent){return parent.getScrollPosition?parent.getScrollPosition():0}function onScrolledToPosition(scrollButtons,pos){pos>0?scrollButtons.scrollButtonsLeft.classList.remove("hide"):scrollButtons.scrollButtonsLeft.classList.add("hide")}function onScroll(e){var scrollButtons=this,scroller=this.scroller,pos=getScrollPosition(scroller);onScrolledToPosition(scrollButtons,pos)}function getStyleValue(style,name){var value=style.getPropertyValue(name);return value&&(value=value.replace("px",""))?(value=parseInt(value),isNaN(value)?0:value):0}function getScrollSize(elem){var scrollSize=elem.offsetWidth,style=window.getComputedStyle(elem,null),paddingLeft=getStyleValue(style,"padding-left");paddingLeft&&(scrollSize-=paddingLeft);var paddingRight=getStyleValue(style,"padding-right");paddingRight&&(scrollSize-=paddingRight);var slider=elem.getScrollSlider();return style=window.getComputedStyle(slider,null),paddingLeft=getStyleValue(style,"padding-left"),paddingLeft&&(scrollSize-=paddingLeft),paddingRight=getStyleValue(style,"padding-right"),paddingRight&&(scrollSize-=paddingRight),scrollSize}function onScrollButtonClick(e){var newPos,parent=dom.parentWithAttribute(this,"is","emby-scroller"),direction=this.getAttribute("data-direction"),scrollSize=getScrollSize(parent),pos=getScrollPosition(parent);newPos="left"===direction?Math.max(0,pos-scrollSize):pos+scrollSize,parent.scrollToPosition(newPos,!1)}var EmbyScrollButtonsPrototype=Object.create(HTMLDivElement.prototype);EmbyScrollButtonsPrototype.createdCallback=function(){},EmbyScrollButtonsPrototype.attachedCallback=function(){var parent=dom.parentWithAttribute(this,"is","emby-scroller");this.scroller=parent,parent.classList.add("emby-scrollbuttons-scroller"),this.innerHTML=getScrollButtonContainerHtml("left")+getScrollButtonContainerHtml("right");var scrollHandler=onScroll.bind(this);this.scrollHandler=scrollHandler;var buttons=this.querySelectorAll(".emby-scrollbuttons-scrollbutton");buttons[0].addEventListener("click",onScrollButtonClick),buttons[1].addEventListener("click",onScrollButtonClick),buttons=this.querySelectorAll(".scrollbuttoncontainer"),this.scrollButtonsLeft=buttons[0],this.scrollButtonsRight=buttons[1],parent.addScrollEventListener(scrollHandler,{capture:!1,passive:!0})},EmbyScrollButtonsPrototype.detachedCallback=function(){var parent=this.scroller;this.scroller=null;var scrollHandler=this.scrollHandler;parent&&scrollHandler&&parent.removeScrollEventListener(scrollHandler,{capture:!1,passive:!0}),this.scrollHandler=null,this.scrollButtonsLeft=null,this.scrollButtonsRight=null},document.registerElement("emby-scrollbuttons",{prototype:EmbyScrollButtonsPrototype,extends:"div"})});

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

@@ -1 +1 @@
-define(["scroller","dom","layoutManager","inputManager","focusManager","registerElement"],function(scroller,dom,layoutManager,inputManager,focusManager){"use strict";function initCenterFocus(elem,scrollerInstance){dom.addEventListener(elem,"focus",function(e){var focused=focusManager.focusableParent(e.target);focused&&scrollerInstance.toCenter(focused)},{capture:!0,passive:!0})}function onInputCommand(e){var cmd=e.detail.command;"home"===cmd?(focusManager.focusFirst(this,"."+this.getAttribute("data-navcommands")),e.preventDefault(),e.stopPropagation()):"end"===cmd?(focusManager.focusLast(this,"."+this.getAttribute("data-navcommands")),e.preventDefault(),e.stopPropagation()):"pageup"===cmd?(focusManager.moveFocus(e.target,this,"."+this.getAttribute("data-navcommands"),-12),e.preventDefault(),e.stopPropagation()):"pagedown"===cmd&&(focusManager.moveFocus(e.target,this,"."+this.getAttribute("data-navcommands"),12),e.preventDefault(),e.stopPropagation())}function initHeadroom(elem){require(["headroom"],function(Headroom){var headroom=new Headroom([],{scroller:elem});headroom.init(),headroom.add(document.querySelector(".skinHeader")),elem.headroom=headroom})}var ScrollerProtoType=Object.create(HTMLDivElement.prototype);ScrollerProtoType.createdCallback=function(){this.classList.add("emby-scroller")},ScrollerProtoType.scrollToBeginning=function(){this.scroller&&this.scroller.slideTo(0,!0)},ScrollerProtoType.toStart=function(elem,immediate){this.scroller&&this.scroller.toStart(elem,immediate)},ScrollerProtoType.toCenter=function(elem,immediate){this.scroller&&this.scroller.toCenter(elem,immediate)},ScrollerProtoType.scrollToPosition=function(pos,immediate){this.scroller&&this.scroller.slideTo(pos,immediate)},ScrollerProtoType.getScrollPosition=function(){if(this.scroller)return this.scroller.getScrollPosition()},ScrollerProtoType.getScrollSize=function(){if(this.scroller)return this.scroller.getScrollSize()},ScrollerProtoType.getScrollEventName=function(){if(this.scroller)return this.scroller.getScrollEventName()},ScrollerProtoType.attachedCallback=function(){this.getAttribute("data-navcommands")&&inputManager.on(this,onInputCommand);var horizontal="false"!==this.getAttribute("data-horizontal"),slider=this.querySelector(".scrollSlider");horizontal&&(slider.style["white-space"]="nowrap");var bindHeader="true"===this.getAttribute("data-bindheader"),options={horizontal:horizontal,mouseDragging:1,mouseWheel:"false"!==this.getAttribute("data-mousewheel"),touchDragging:1,slidee:slider,scrollBy:200,speed:horizontal?300:270,elasticBounds:1,dragHandle:1,scrollWidth:"auto"===this.getAttribute("data-scrollsize")?null:5e6,autoImmediate:!0,skipSlideToWhenVisible:"true"===this.getAttribute("data-skipfocuswhenvisible"),dispatchScrollEvent:bindHeader||"true"===this.getAttribute("data-scrollevent")},self=this;self.scroller=new scroller(self,options),self.scroller.init(),layoutManager.tv&&self.getAttribute("data-centerfocus")&&initCenterFocus(self,self.scroller),bindHeader&&initHeadroom(self)},ScrollerProtoType.detachedCallback=function(){this.getAttribute("data-navcommands")&&inputManager.off(this,onInputCommand);var headroom=this.headroom;headroom&&(headroom.destroy(),this.headroom=null);var scrollerInstance=this.scroller;scrollerInstance&&(scrollerInstance.destroy(),this.scroller=null)},document.registerElement("emby-scroller",{prototype:ScrollerProtoType,extends:"div"})});
+define(["scroller","dom","layoutManager","inputManager","focusManager","registerElement"],function(scroller,dom,layoutManager,inputManager,focusManager){"use strict";function initCenterFocus(elem,scrollerInstance){dom.addEventListener(elem,"focus",function(e){var focused=focusManager.focusableParent(e.target);focused&&scrollerInstance.toCenter(focused)},{capture:!0,passive:!0})}function onInputCommand(e){var cmd=e.detail.command;"home"===cmd?(focusManager.focusFirst(this,"."+this.getAttribute("data-navcommands")),e.preventDefault(),e.stopPropagation()):"end"===cmd?(focusManager.focusLast(this,"."+this.getAttribute("data-navcommands")),e.preventDefault(),e.stopPropagation()):"pageup"===cmd?(focusManager.moveFocus(e.target,this,"."+this.getAttribute("data-navcommands"),-12),e.preventDefault(),e.stopPropagation()):"pagedown"===cmd&&(focusManager.moveFocus(e.target,this,"."+this.getAttribute("data-navcommands"),12),e.preventDefault(),e.stopPropagation())}function initHeadroom(elem){require(["headroom"],function(Headroom){var headroom=new Headroom([],{scroller:elem});headroom.init(),headroom.add(document.querySelector(".skinHeader")),elem.headroom=headroom})}function loadScrollButtons(scroller){require(["emby-scrollbuttons"],function(){scroller.insertAdjacentHTML("beforeend",'<div is="emby-scrollbuttons"></div>')})}var ScrollerProtoType=Object.create(HTMLDivElement.prototype);ScrollerProtoType.createdCallback=function(){this.classList.add("emby-scroller")},ScrollerProtoType.scrollToBeginning=function(){this.scroller&&this.scroller.slideTo(0,!0)},ScrollerProtoType.toStart=function(elem,immediate){this.scroller&&this.scroller.toStart(elem,immediate)},ScrollerProtoType.toCenter=function(elem,immediate){this.scroller&&this.scroller.toCenter(elem,immediate)},ScrollerProtoType.scrollToPosition=function(pos,immediate){this.scroller&&this.scroller.slideTo(pos,immediate)},ScrollerProtoType.getScrollPosition=function(){if(this.scroller)return this.scroller.getScrollPosition()},ScrollerProtoType.getScrollSize=function(){if(this.scroller)return this.scroller.getScrollSize()},ScrollerProtoType.getScrollEventName=function(){if(this.scroller)return this.scroller.getScrollEventName()},ScrollerProtoType.getScrollSlider=function(){if(this.scroller)return this.scroller.getScrollSlider()},ScrollerProtoType.addScrollEventListener=function(fn,options){this.scroller&&dom.addEventListener(this.scroller.getScrollFrame(),this.scroller.getScrollEventName(),fn,options)},ScrollerProtoType.removeScrollEventListener=function(fn,options){this.scroller&&dom.removeEventListener(this.scroller.getScrollFrame(),this.scroller.getScrollEventName(),fn,options)},ScrollerProtoType.attachedCallback=function(){this.getAttribute("data-navcommands")&&inputManager.on(this,onInputCommand);var horizontal="false"!==this.getAttribute("data-horizontal"),slider=this.querySelector(".scrollSlider");horizontal&&(slider.style["white-space"]="nowrap");var bindHeader="true"===this.getAttribute("data-bindheader"),scrollFrame=this.querySelector(".scrollerframe")||this,enableScrollButtons=layoutManager.desktop&&horizontal&&"false"!==this.getAttribute("data-scrollbuttons")&&scrollFrame!==this,options={horizontal:horizontal,mouseDragging:1,mouseWheel:"false"!==this.getAttribute("data-mousewheel"),touchDragging:1,slidee:slider,scrollBy:200,speed:horizontal?300:270,elasticBounds:1,dragHandle:1,scrollWidth:"auto"===this.getAttribute("data-scrollsize")?null:5e6,autoImmediate:!0,skipSlideToWhenVisible:"true"===this.getAttribute("data-skipfocuswhenvisible"),dispatchScrollEvent:enableScrollButtons||bindHeader||"true"===this.getAttribute("data-scrollevent"),hideScrollbar:enableScrollButtons};this.scroller=new scroller(scrollFrame,options),this.scroller.init(),layoutManager.tv&&this.getAttribute("data-centerfocus")&&initCenterFocus(this,this.scroller),bindHeader&&initHeadroom(this),enableScrollButtons&&loadScrollButtons(this)},ScrollerProtoType.detachedCallback=function(){this.getAttribute("data-navcommands")&&inputManager.off(this,onInputCommand);var headroom=this.headroom;headroom&&(headroom.destroy(),this.headroom=null);var scrollerInstance=this.scroller;scrollerInstance&&(scrollerInstance.destroy(),this.scroller=null)},document.registerElement("emby-scroller",{prototype:ScrollerProtoType,extends:"div"})});

dashboard-ui/bower_components/emby-webcomponents/search/searchresults.template.html

@@ -14,8 +14,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Movies}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -24,8 +26,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Shows}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -34,8 +38,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Episodes}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -44,8 +50,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Sports}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -54,8 +62,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Kids}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -64,8 +74,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${News}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -74,8 +86,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Programs}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -84,8 +98,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Videos}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -94,8 +110,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Artists}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -104,8 +122,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Albums}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -114,8 +134,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Songs}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -124,8 +146,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${HeaderAudioBooks}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -134,8 +158,10 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${Books}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>
 
@@ -144,7 +170,9 @@
         <h2 class="sectionTitle sectionTitle-cards padded-left padded-right" style="display: inline-block; vertical-align: middle;">${People}</h2>
     </div>
 
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false">
-        <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale focuscontainer-x">
+            <div is="emby-itemscontainer" class="padded-left padded-right itemsContainer scrollSlider"></div>
+        </div>
     </div>
 </div>

dashboard-ui/scripts/apploader.js

@@ -1 +1 @@
-!function(){"use strict";function loadRequire(){var src,script=document.createElement("script");src=self.Promise&&navigator.userAgent.toLowerCase().indexOf("os x")===-1?"./bower_components/alameda/alameda.js":"./bower_components/requirejs/require.js",self.dashboardVersion&&(src+="?v="+self.dashboardVersion),script.src=src,script.onload=loadApp,document.head.appendChild(script)}function loadApp(){var script=document.createElement("script"),src="./scripts/site.js";self.dashboardVersion&&(src+="?v="+self.dashboardVersion),script.src=src,document.head.appendChild(script)}loadRequire()}();
+!function(){"use strict";function loadRequire(){var src,script=document.createElement("script");src=self.Promise?"./bower_components/alameda/alameda.js":"./bower_components/requirejs/require.js",self.dashboardVersion&&(src+="?v="+self.dashboardVersion),script.src=src,script.onload=loadApp,document.head.appendChild(script)}function loadApp(){var script=document.createElement("script"),src="./scripts/site.js";self.dashboardVersion&&(src+="?v="+self.dashboardVersion),script.src=src,document.head.appendChild(script)}loadRequire()}();