move buttons to top right for custom scroll element

src/components/emby-scrollbuttons/emby-scrollbuttons.css

@@ -1,60 +1,20 @@
-.emby-scrollbuttons-scroller {
+.emby-scroller-container {
     position: relative;
 }
 
-.scrollbuttoncontainer {
+.emby-scroller {
+    margin-left: 3.3%;
+    margin-right: 3.3%;
+}
+
+.emby-scrollbuttons {
     position: absolute;
-    top: 10%;
+    top: 0;
-    bottom: 35%;
+    right: 0;
     align-items: center;
     justify-content: center;
     z-index: 1;
-    font-size: 3em;
+    color: #ffffff;
-    color: #fff;
-    display: none;
-    overflow: hidden;
-}
-
-.scrollbuttoncontainer-left {
-    background: rgba(20, 20, 20, .5);
-    background: -moz-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);
-    background: -webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);
-    background: linear-gradient(to right,#000,rgba(0,0,0,0));
-}
-
-.scrollbuttoncontainer-right {
-    background: rgba(20, 20, 20, .5);
-    background: -moz-linear-gradient(right,#000 0,rgba(0,0,0,0) 100%);
-    background: -webkit-linear-gradient(right,#000 0,rgba(0,0,0,0) 100%);
-    background: linear-gradient(to left,#000,rgba(0,0,0,0));
-}
-
-.emby-scrollbuttons-scroller:hover .scrollbuttoncontainer {
     display: flex;
-}
+    overflow: hidden;
-
+}
-.scrollbuttoncontainer-left {
-    left: 0;
-}
-
-.scrollbuttoncontainer-right {
-    right: 0;
-}
-
-.emby-scrollbuttons-scrollbutton {
-    margin: 0 -.2em;
-    transition: transform 160ms ease-out;
-}
-
-.scrollbuttoncontainer:hover > .emby-scrollbuttons-scrollbutton {
-    transform: scale(1.3, 1.3);
-}
-
-.emby-scrollbuttons-scrollbutton:after {
-    content: '';
-    display: none !important;
-}
-
-.emby-scrollbuttons-scrollbutton:focus {
-    color: inherit !important;
-}

src/components/emby-scrollbuttons/emby-scrollbuttons.js

@@ -3,30 +3,20 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
 
     var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
 
-    EmbyScrollButtonsPrototype.createdCallback = function () {
+    EmbyScrollButtonsPrototype.createdCallback = function () {};
-
-    };
-
-    function getScrollButtonContainerHtml(direction) {
 
+    function getScrollButtonHtml(direction) {
         var html = '';
 
-        var hide = direction === 'left' ? ' hide' : '';
-        html += '<div class="scrollbuttoncontainer scrollbuttoncontainer-' + direction + hide + '">';
-
         var icon = direction === 'left' ? '&#xE5CB;' : '&#xE5CC;';
-
+        html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
-        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>';
-
         return html;
     }
 
     function getScrollPosition(parent) {
-
         if (parent.getScrollPosition) {
             return parent.getScrollPosition();
         }
@@ -35,7 +25,6 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
     }
 
     function getScrollWidth(parent) {
-
         if (parent.getScrollSize) {
             return parent.getScrollSize();
         }
@@ -43,46 +32,39 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
         return 0;
     }
 
-    function onScrolledToPosition(scrollButtons, pos, scrollWidth) {
+    function updateScrollButtons(scrollButtons, pos, scrollWidth) {
-
         if (pos > 0) {
-            scrollButtons.scrollButtonsLeft.classList.remove('hide');
+            scrollButtons.scrollButtonsLeft.disabled = false;
         } else {
-            scrollButtons.scrollButtonsLeft.classList.add('hide');
+            scrollButtons.scrollButtonsLeft.disabled = true;
         }
 
         if (scrollWidth > 0) {
-
+            pos += scrollButtons.offsetLeft + scrollButtons.offsetWidth;
-            pos += scrollButtons.offsetWidth;
-
             if (pos >= scrollWidth) {
-                scrollButtons.scrollButtonsRight.classList.add('hide');
+                scrollButtons.scrollButtonsRight.disabled = true;
             } else {
-                scrollButtons.scrollButtonsRight.classList.remove('hide');
+                scrollButtons.scrollButtonsRight.disabled = false;
             }
         }
     }
 
     function onScroll(e) {
-
         var scrollButtons = this;
         var scroller = this.scroller;
         var pos = getScrollPosition(scroller);
         var scrollWidth = getScrollWidth(scroller);
 
-        onScrolledToPosition(scrollButtons, pos, scrollWidth);
+        updateScrollButtons(scrollButtons, pos, scrollWidth);
     }
 
     function getStyleValue(style, name) {
-
         var value = style.getPropertyValue(name);
-
         if (!value) {
             return 0;
         }
 
         value = value.replace('px', '');
-
         if (!value) {
             return 0;
         }
@@ -96,18 +78,15 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
     }
 
     function getScrollSize(elem) {
-
         var scrollSize = elem.offsetWidth;
-
         var style = window.getComputedStyle(elem, null);
 
         var paddingLeft = getStyleValue(style, 'padding-left');
-
         if (paddingLeft) {
             scrollSize -= paddingLeft;
         }
-        var paddingRight = getStyleValue(style, 'padding-right');
 
+        var paddingRight = getStyleValue(style, 'padding-right');
         if (paddingRight) {
             scrollSize -= paddingRight;
         }
@@ -116,12 +95,11 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
         style = window.getComputedStyle(slider, null);
 
         paddingLeft = getStyleValue(style, 'padding-left');
-
         if (paddingLeft) {
             scrollSize -= paddingLeft;
         }
-        paddingRight = getStyleValue(style, 'padding-right');
 
+        paddingRight = getStyleValue(style, 'padding-right');
         if (paddingRight) {
             scrollSize -= paddingRight;
         }
@@ -130,58 +108,55 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
     }
 
     function onScrollButtonClick(e) {
-
+        var scroller = this.parentNode.nextSibling;
-        var parent = dom.parentWithAttribute(this, 'is', 'emby-scroller');
 
         var direction = this.getAttribute('data-direction');
+        var scrollSize = getScrollSize(scroller);
+        var pos = getScrollPosition(scroller);
 
-        var scrollSize = getScrollSize(parent);
-
-        var pos = getScrollPosition(parent);
         var newPos;
-
         if (direction === 'left') {
             newPos = Math.max(0, pos - scrollSize);
         } else {
             newPos = pos + scrollSize;
         }
 
-        parent.scrollToPosition(newPos, false);
+        scroller.scrollToPosition(newPos, false);
     }
 
     EmbyScrollButtonsPrototype.attachedCallback = function () {
+        var scroller = this.nextSibling;
+        var parent = this.parentNode;
+        this.scroller = scroller;
 
-        var parent = dom.parentWithAttribute(this, 'is', 'emby-scroller');
+        parent.classList.add('emby-scroller-container');
-        this.scroller = parent;
 
-        parent.classList.add('emby-scrollbuttons-scroller');
+        this.innerHTML = getScrollButtonHtml('left') + getScrollButtonHtml('right');
-
-        this.innerHTML = getScrollButtonContainerHtml('left') + getScrollButtonContainerHtml('right');
 
         var scrollHandler = onScroll.bind(this);
         this.scrollHandler = scrollHandler;
 
-        var buttons = this.querySelectorAll('.emby-scrollbuttons-scrollbutton');
+        var buttons = this.querySelectorAll('.emby-scrollbuttons-button');
         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, {
+        scroller.addScrollEventListener(scrollHandler, {
             capture: false,
             passive: true
         });
+
+        var pos = getScrollPosition(scroller);
+        var scrollWidth = getScrollWidth(scroller);
+        updateScrollButtons(this, pos, scrollWidth);
     };
 
     EmbyScrollButtonsPrototype.detachedCallback = function () {
-
         var parent = this.scroller;
         this.scroller = null;
 
         var scrollHandler = this.scrollHandler;
-
         if (parent && scrollHandler) {
             parent.removeScrollEventListener(scrollHandler, {
                 capture: false,

src/components/emby-scroller/emby-scroller.js

@@ -8,15 +8,11 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
     };
 
     function initCenterFocus(elem, scrollerInstance) {
-
         dom.addEventListener(elem, 'focus', function (e) {
-
             var focused = focusManager.focusableParent(e.target);
-
             if (focused) {
                 scrollerInstance.toCenter(focused);
             }
-
         }, {
             capture: true,
             passive: true
@@ -28,11 +24,13 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
             this.scroller.slideTo(0, true);
         }
     };
+
     ScrollerProtoType.toStart = function (elem, immediate) {
         if (this.scroller) {
             this.scroller.toStart(elem, immediate);
         }
     };
+
     ScrollerProtoType.toCenter = function (elem, immediate) {
         if (this.scroller) {
             this.scroller.toCenter(elem, immediate);
@@ -82,20 +80,16 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
     };
 
     function onInputCommand(e) {
-
         var cmd = e.detail.command;
-
         if (cmd === 'end') {
             focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands'));
             e.preventDefault();
             e.stopPropagation();
-        }
+        } else if (cmd === 'pageup') {
-        else if (cmd === 'pageup') {
             focusManager.moveFocus(e.target, this, '.' + this.getAttribute('data-navcommands'), -12);
             e.preventDefault();
             e.stopPropagation();
-        }
+        } else if (cmd === 'pagedown') {
-        else if (cmd === 'pagedown') {
             focusManager.moveFocus(e.target, this, '.' + this.getAttribute('data-navcommands'), 12);
             e.preventDefault();
             e.stopPropagation();
@@ -104,18 +98,16 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
 
     function initHeadroom(elem) {
         require(['headroom'], function (Headroom) {
-
             var headroom = new Headroom([], {
                 scroller: elem
             });
-            
+
             headroom.add(document.querySelector('.skinHeader'));
             elem.headroom = headroom;
         });
     }
 
     ScrollerProtoType.attachedCallback = function () {
-
         if (this.getAttribute('data-navcommands')) {
             inputManager.on(this, onInputCommand);
         }
@@ -141,10 +133,8 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
             slidee: slider,
             scrollBy: 200,
             speed: horizontal ? 270 : 240,
-            //immediateSpeed: pageOptions.immediateSpeed,
             elasticBounds: 1,
             dragHandle: 1,
-            scrollWidth: this.getAttribute('data-scrollsize') === 'auto' ? null : 5000000,
             autoImmediate: true,
             skipSlideToWhenVisible: this.getAttribute('data-skipfocuswhenvisible') === 'true',
             dispatchScrollEvent: enableScrollButtons || bindHeader || this.getAttribute('data-scrollevent') === 'true',
@@ -152,7 +142,6 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
             allowNativeSmoothScroll: this.getAttribute('data-allownativesmoothscroll') === 'true' && !enableScrollButtons,
             allowNativeScroll: !enableScrollButtons,
             forceHideScrollbars: enableScrollButtons,
-
             // In edge, with the native scroll, the content jumps around when hovering over the buttons
             requireAnimation: enableScrollButtons && browser.edge
         };
@@ -175,14 +164,12 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
     };
 
     function loadScrollButtons(scroller) {
-
         require(['emby-scrollbuttons'], function () {
-            scroller.insertAdjacentHTML('beforeend', '<div is="emby-scrollbuttons"></div>');
+            scroller.insertAdjacentHTML('beforebegin', '<div is="emby-scrollbuttons" class="emby-scrollbuttons padded-right"></div>');
         });
     }
 
     ScrollerProtoType.pause = function () {
-
         var headroom = this.headroom;
         if (headroom) {
             headroom.pause();
@@ -190,7 +177,6 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
     };
 
     ScrollerProtoType.resume = function () {
-
         var headroom = this.headroom;
         if (headroom) {
             headroom.resume();
@@ -198,7 +184,6 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
     };
 
     ScrollerProtoType.detachedCallback = function () {
-
         if (this.getAttribute('data-navcommands')) {
             inputManager.off(this, onInputCommand);
         }

src/components/emby-slider/emby-slider.css

@@ -27,10 +27,6 @@ _:-ms-input-placeholder {
     /* Disable webkit tap highlighting */
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     display: block;
-    /**************************** Tracks ****************************/
-    /**************************** Thumbs ****************************/
-    /**************************** 0-value ****************************/
-    /**************************** Disabled ****************************/
 }
 
     .mdl-slider::-moz-focus-outer {

src/components/guide/tvguide.template.html

@@ -18,7 +18,6 @@
 </div>
 
 <div is="emby-scroller" class="guideVerticalScroller flex flex-grow programContainer guideScroller" data-skipfocuswhenvisible="true" data-horizontal="false">
-
     <div class="scrollSlider flex flex-grow flex-direction-row" style="overflow:hidden;contain: layout style paint;">
         <div class="channelsContainer">
             <div class="channelList"></div>

src/components/homesections/homesections.js

@@ -2,9 +2,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     'use strict';
 
     function getDefaultSection(index) {
-
         switch (index) {
-
             case 0:
                 return 'smalllibrarytiles';
             case 1:
@@ -25,13 +23,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getAllSectionsToShow(userSettings, sectionCount) {
-
         var sections = [];
-
         for (var i = 0, length = sectionCount; i < length; i++) {
-
             var section = userSettings.get('homesection' + i) || getDefaultSection(i);
-
             if (section === 'folders') {
                 section = getDefaultSection(0);
             }
@@ -43,15 +37,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadSections(elem, apiClient, user, userSettings) {
-
         return getUserViews(apiClient, user.Id).then(function (userViews) {
-
-            var i, length;
-            var sectionCount = 7;
-
             var html = '';
-            for (i = 0, length = sectionCount; i < length; i++) {
 
+            var sectionCount = 7;
+            for (var i = 0; i < sectionCount; i++) {
                 html += '<div class="verticalSection section' + i + '"></div>';
             }
 
@@ -60,14 +50,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
             var promises = [];
             var sections = getAllSectionsToShow(userSettings, sectionCount);
-
+            for (var i = 0; i < sections.length; i++) {
-            for (i = 0, length = sections.length; i < length; i++) {
-
                 promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
             }
 
             return Promise.all(promises).then(function () {
-
                 return resume(elem, {
                     refresh: true,
                     returnPromise: false
@@ -77,12 +64,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function destroySections(elem) {
-
         var elems = elem.querySelectorAll('.itemsContainer');
-        var i, length;
+        for (var i = 0; i < elems.length; i++) {
-
-        for (i = 0, length = elems.length; i < length; i++) {
-
             elems[i].fetchData = null;
             elems[i].parentContainer = null;
             elems[i].getItemsHtml = null;
@@ -92,17 +75,13 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function pause(elem) {
-
         var elems = elem.querySelectorAll('.itemsContainer');
-        var i, length;
+        for (var i = 0; i < elems.length; i++) {
-        for (i = 0, length = elems.length; i < length; i++) {
-
             elems[i].pause();
         }
     }
 
     function resume(elem, options) {
-
         var elems = elem.querySelectorAll('.itemsContainer');
         var i, length;
         var promises = [];
@@ -159,9 +138,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getUserViews(apiClient, userId) {
-
         return apiClient.getUserViews({}, userId || apiClient.getCurrentUserId()).then(function (result) {
-
             return result.Items;
         });
     }
@@ -261,21 +238,15 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getFetchLatestItemsFn(serverId, parentId, collectionType) {
-
         return function () {
-
             var apiClient = connectionManager.getApiClient(serverId);
-
             var limit = 16;
 
             if (enableScrollX()) {
-
                 if (collectionType === 'music') {
                     limit = 30;
                 }
-            }
+            } else {
-            else {
-
                 if (collectionType === 'tvshows') {
                     limit = 5;
                 } else if (collectionType === 'music') {
@@ -286,7 +257,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             }
 
             var options = {
-
                 Limit: limit,
                 Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
                 ImageTypeLimit: 1,
@@ -299,9 +269,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getLatestItemsHtmlFn(itemType, viewType) {
-
         return function (items) {
-
             var shape = itemType === 'Channel' || viewType === 'movies' ?
                 getPortraitShape() :
                 viewType === 'music' ?
@@ -331,31 +299,28 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function renderLatestSection(elem, apiClient, user, parent) {
-
         var html = '';
+
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
         if (!layoutManager.tv) {
-
             html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(parent, {
-
                 section: 'latest'
-
             }) + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('LatestFromLibrary', parent.Name);
             html += '</h2>';
             html += '<i class="md-icon">&#xE5CC;</i>';
             html += '</a>';
-
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
         }
         html += '</div>';
 
         if (enableScrollX()) {
-            html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale"><div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x padded-left padded-right">';
+            html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer focuscontainer-x scrollSlider">';
         } else {
-            html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer focuscontainer-x padded-left padded-right vertical-wrap">';
         }
 
         if (enableScrollX()) {
@@ -369,19 +334,14 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType);
         itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType);
         itemsContainer.parentContainer = elem;
-
     }
 
     function loadRecentlyAdded(elem, apiClient, user, userViews) {
-
         elem.classList.remove('verticalSection');
-
         var excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
 
         for (var i = 0, length = userViews.length; i < length; i++) {
-
             var item = userViews[i];
-
             if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) {
                 continue;
             }
@@ -406,39 +366,34 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
-
-        elem.classList.remove('verticalSection');
-
         var html = '';
 
-        var scrollX = !layoutManager.desktop;
-
         if (userViews.length) {
-            html += '<div class="verticalSection">';
+            html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
             html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
 
-            if (scrollX) {
+            if (enableScrollX()) {
-                html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true"><div is="emby-itemscontainer" class="scrollSlider focuscontainer-x padded-left padded-right">';
+                html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
+                html += '<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x">';
             } else {
-                html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
+                html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right focuscontainer-x vertical-wrap">';
             }
 
             html += cardBuilder.getCardsHtml({
                 items: userViews,
-                shape: scrollX ? 'overflowSmallBackdrop' : shape,
+                shape: enableScrollX() ? 'overflowSmallBackdrop' : shape,
                 showTitle: true,
                 centerText: true,
                 overlayText: false,
                 lazy: true,
                 transition: false,
-                allowBottomPadding: !scrollX
+                allowBottomPadding: !enableScrollX()
             });
 
-            if (scrollX) {
+            if (enableScrollX()) {
                 html += '</div>';
             }
             html += '</div>';
-            html += '</div>';
         }
 
         elem.innerHTML = html;
@@ -446,27 +401,19 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getContinueWatchingFetchFn(serverId) {
-
         return function () {
-
             var apiClient = connectionManager.getApiClient(serverId);
-
             var screenWidth = dom.getWindowSize().innerWidth;
 
             var limit;
-
             if (enableScrollX()) {
-
                 limit = 12;
-
             } else {
-
                 limit = screenWidth >= 1920 ? 8 : (screenWidth >= 1600 ? 8 : (screenWidth >= 1200 ? 9 : 6));
                 limit = Math.min(limit, 5);
             }
 
             var options = {
-
                 Limit: limit,
                 Recursive: true,
                 Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
@@ -481,9 +428,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getContinueWatchingItemsHtml(items) {
-
         var cardLayout = false;
-
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: true,
@@ -504,12 +449,12 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadResumeVideo(elem, apiClient, userId) {
-
         var html = '';
-        html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
 
+        html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
         if (enableScrollX()) {
-            html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale"><div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x padded-left padded-right" data-monitor="videoplayback,markplayed">';
+            html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="videoplayback,markplayed">';
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="videoplayback,markplayed">';
         }
@@ -529,27 +474,19 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getContinueListeningFetchFn(serverId) {
-
         return function () {
-
             var apiClient = connectionManager.getApiClient(serverId);
-
             var screenWidth = dom.getWindowSize().innerWidth;
 
             var limit;
-
             if (enableScrollX()) {
-
                 limit = 12;
-
             } else {
-
                 limit = screenWidth >= 1920 ? 8 : (screenWidth >= 1600 ? 8 : (screenWidth >= 1200 ? 9 : 6));
                 limit = Math.min(limit, 5);
             }
 
             var options = {
-
                 Limit: limit,
                 Recursive: true,
                 Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
@@ -564,9 +501,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getContinueListeningItemsHtml(items) {
-
         var cardLayout = false;
-
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: true,
@@ -587,12 +522,12 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadResumeAudio(elem, apiClient, userId) {
-
         var html = '';
-        html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
 
+        html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
         if (enableScrollX()) {
-            html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale"><div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x padded-left padded-right" data-monitor="audioplayback,markplayed">';
+            html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="audioplayback,markplayed">';
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="audioplayback,markplayed">';
         }
@@ -733,7 +668,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 html += '</div>';
 
                 if (enableScrollX()) {
-                    html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale"><div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x padded-left padded-right" data-refreshinterval="300000">';
+                    html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale">';
+                    html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-refreshinterval="300000">'
                 } else {
                     html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-refreshinterval="300000">';
                 }
@@ -756,13 +692,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getNextUpFetchFn(serverId) {
-
         return function () {
-
             var apiClient = connectionManager.getApiClient(serverId);
-
             return apiClient.getNextUpEpisodes({
-
                 Limit: enableScrollX() ? 24 : 15,
                 Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo",
                 UserId: apiClient.getCurrentUserId(),
@@ -774,9 +706,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getNextUpItemsHtml(items) {
-
         var cardLayout = false;
-
         return cardBuilder.getCardsHtml({
             items: items,
             preferThumb: true,
@@ -794,29 +724,26 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadNextUp(elem, apiClient, userId) {
-
         var html = '';
+
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
         if (!layoutManager.tv) {
-
             html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl('nextup', {
-
                 serverId: apiClient.serverId()
-
             }) + '" class="button-flat button-flat-mini sectionTitleTextButton">';
             html += '<h2 class="sectionTitle sectionTitle-cards">';
             html += globalize.translate('HeaderNextUp');
             html += '</h2>';
             html += '<i class="md-icon">&#xE5CC;</i>';
             html += '</a>';
-
         } else {
             html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>';
         }
         html += '</div>';
 
         if (enableScrollX()) {
-            html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale"><div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x padded-left padded-right" data-monitor="videoplayback,markplayed">';
+            html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="videoplayback,markplayed">'
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="videoplayback,markplayed">';
         }
@@ -824,7 +751,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         if (enableScrollX()) {
             html += '</div>';
         }
-
         html += '</div>';
 
         elem.classList.add('hide');
@@ -837,29 +763,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
-
         return function () {
-
             var apiClient = connectionManager.getApiClient(serverId);
-
             return apiClient.getLiveTvRecordings({
-
                 userId: apiClient.getCurrentUserId(),
                 Limit: enableScrollX() ? 12 : 5,
                 Fields: "PrimaryImageAspectRatio,BasicSyncInfo",
                 EnableTotalRecordCount: false,
                 IsLibraryItem: activeRecordingsOnly ? null : false,
                 IsInProgress: activeRecordingsOnly ? true : null
-
             });
         };
     }
 
     function getLatestRecordingItemsHtml(activeRecordingsOnly) {
-
         return function (items) {
             var cardLayout = false;
-
             return cardBuilder.getCardsHtml({
                 items: items,
                 shape: enableScrollX() ? 'autooverflow' : 'auto',
@@ -884,7 +803,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient, userId) {
-
         var title = activeRecordingsOnly ?
             globalize.translate('HeaderActiveRecordings') :
             globalize.translate('HeaderLatestRecordings');
@@ -893,16 +811,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
 
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
         html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
-        if (!layoutManager.tv) {
-            //html += '<a href="livetv.html?tab=3" class="clearLink" style="margin-left:2em;"><button is="emby-button" type="button" class="raised more mini"><span>' + globalize.translate('More') + '</span></button></a>';
-            //html += '<button data-href="" type="button" is="emby-button" class="raised raised-mini sectionTitleButton btnMore">';
-            //html += '<span>' + globalize.translate('More') + '</span>';
-            //html += '</button>';
-        }
         html += '</div>';
 
         if (enableScrollX()) {
-            html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale"><div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x padded-left padded-right">';
+            html += '<div is="emby-scroller" data-mousewheel="false" data-centerfocus="true" class="padded-top-focusscale padded-bottom-focusscale">';
+            html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">'
         } else {
             html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
         }
@@ -910,7 +823,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         if (enableScrollX()) {
             html += '</div>';
         }
-
         html += '</div>';
 
         elem.classList.add('hide');

src/components/search/searchresults.template.html

@@ -5,7 +5,6 @@
     </div>
 
     <div class="searchSuggestionsList padded-left padded-right">
-
     </div>
 </div>
 
@@ -13,7 +12,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Movies}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -21,7 +20,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Shows}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -29,7 +28,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Episodes}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -37,7 +36,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Sports}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -45,7 +44,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Kids}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -53,7 +52,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${News}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -61,7 +60,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Programs}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -69,7 +68,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Videos}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -77,7 +76,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Playlists}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -85,7 +84,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Artists}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -93,7 +92,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Albums}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -101,7 +100,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Songs}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -109,7 +108,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${HeaderPhotoAlbums}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -117,7 +116,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Photos}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -125,7 +124,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${HeaderAudioBooks}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -133,7 +132,7 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Books}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>
 
@@ -141,6 +140,6 @@
     <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${People}</h2>
 
     <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" data-mousewheel="false" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x padded-left padded-right itemsContainer scrollSlider"></div>
+        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
     </div>
 </div>

src/controllers/favorites.js

@@ -2,19 +2,19 @@ define(["appRouter", "cardBuilder", "dom", "globalize", "connectionManager", "ap
     "use strict";
 
     function enableScrollX() {
-        return !0
+        return true;
     }
 
     function getThumbShape() {
-        return enableScrollX() ? "overflowBackdrop" : "backdrop"
+        return enableScrollX() ? "overflowBackdrop" : "backdrop";
     }
 
     function getPosterShape() {
-        return enableScrollX() ? "overflowPortrait" : "portrait"
+        return enableScrollX() ? "overflowPortrait" : "portrait";
     }
 
     function getSquareShape() {
-        return enableScrollX() ? "overflowSquare" : "square"
+        return enableScrollX() ? "overflowSquare" : "square";
     }
 
     function getSections() {

src/itemdetails.html

@@ -233,9 +233,8 @@
             <h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
 
             <div is="emby-scroller" class="emby-scroller" data-mousewheel="false" data-centerfocus="true" data-horizontal="true">
-
                 <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale">
-                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer padded-left padded-right"></div>
+                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
             </div>
         </div>
@@ -243,9 +242,8 @@
             <h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
 
             <div is="emby-scroller" class="emby-scroller" data-mousewheel="false" data-centerfocus="true" data-horizontal="true">
-
                 <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale">
-                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer padded-left padded-right"></div>
+                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
             </div>
         </div>
@@ -256,7 +254,7 @@
             </h2>
             <div is="emby-scroller" class="emby-scroller" data-mousewheel="false" data-centerfocus="true" data-horizontal="true">
                 <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale">
-                    <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer padded-left padded-right"></div>
+                    <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
             </div>
         </div>
@@ -285,9 +283,8 @@
             <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderScenes}</h2>
 
             <div is="emby-scroller" class="emby-scroller" data-mousewheel="false" data-centerfocus="true" data-horizontal="true">
-
                 <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale">
-                    <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer padded-left padded-right"></div>
+                    <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
             </div>
         </div>
@@ -296,9 +293,8 @@
             <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMoreLikeThis}</h2>
 
             <div is="emby-scroller" class="emby-scroller" data-mousewheel="false" data-centerfocus="true" data-horizontal="true">
-
                 <div class="scrollerframe padded-top-focusscale padded-bottom-focusscale">
-                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer padded-left padded-right similarContent"></div>
+                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
                 </div>
             </div>
         </div>