fix scroller button issues

src/components/emby-itemscontainer/emby-itemscontainer.js

@@ -4,10 +4,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     var ItemsContainerProtoType = Object.create(HTMLDivElement.prototype);
 
     function onClick(e) {
-
         var itemsContainer = this;
         var target = e.target;
-
         var multiSelect = itemsContainer.multiSelect;
 
         if (multiSelect) {
@@ -20,22 +18,18 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function disableEvent(e) {
-
         e.preventDefault();
         e.stopPropagation();
         return false;
     }
 
     function onContextMenu(e) {
-
         var itemsContainer = this;
-
         var target = e.target;
         var card = dom.parentWithAttribute(target, 'data-id');
 
         // check for serverId, it won't be present on selectserver
         if (card && card.getAttribute('data-serverid')) {
-
             inputManager.trigger('menu', {
                 sourceElement: card
             });
@@ -53,7 +47,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     ItemsContainerProtoType.enableMultiSelect = function (enabled) {
-
         var current = this.multiSelect;
 
         if (!enabled) {
@@ -78,7 +71,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     };
 
     function onDrop(evt, itemsContainer) {
-
         var el = evt.item;
 
         var newIndex = evt.newIndex;
@@ -86,9 +78,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
         var playlistId = el.getAttribute('data-playlistid');
 
         if (!playlistId) {
-
             var oldIndex = evt.oldIndex;
-
             el.dispatchEvent(new CustomEvent('itemdrop', {
                 detail: {
                     oldIndex: oldIndex,
@@ -107,27 +97,18 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
         loading.show();
 
         apiClient.ajax({
-
             url: apiClient.getUrl('Playlists/' + playlistId + '/Items/' + itemId + '/Move/' + newIndex),
-
             type: 'POST'
-
         }).then(function () {
-
             loading.hide();
-
         }, function () {
-
             loading.hide();
-
             itemsContainer.refreshItems();
         });
     }
 
     ItemsContainerProtoType.enableDragReordering = function (enabled) {
-
         var current = this.sortable;
-
         if (!enabled) {
             if (current) {
                 current.destroy();
@@ -142,15 +123,12 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
 
         var self = this;
         require(['sortable'], function (Sortable) {
-
             self.sortable = new Sortable(self, {
-
                 draggable: ".listItem",
                 handle: '.listViewDragHandle',
 
                 // dragging ended
-                onEnd: function (/**Event*/evt) {
+                onEnd: function (evt) {
-
                     return onDrop(evt, self);
                 }
             });
@@ -169,17 +147,13 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
 
         // TODO: Check user data change reason?
         if (eventsToMonitor.indexOf('markfavorite') !== -1) {
-
             itemsContainer.notifyRefreshNeeded();
-        }
+        } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
-        else if (eventsToMonitor.indexOf('markplayed') !== -1) {
-
             itemsContainer.notifyRefreshNeeded();
         }
     }
 
     function getEventsToMonitor(itemsContainer) {
-
         var monitor = itemsContainer.getAttribute('data-monitor');
         if (monitor) {
             return monitor.split(',');
@@ -193,7 +167,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
         var itemsContainer = this;
 
         if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) {
-
             itemsContainer.notifyRefreshNeeded();
             return;
         }
@@ -366,7 +339,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     };
 
     ItemsContainerProtoType.detachedCallback = function () {
-
         clearRefreshInterval(this);
 
         this.enableMultiSelect(false);
@@ -390,14 +362,11 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     };
 
     ItemsContainerProtoType.pause = function () {
-
         clearRefreshInterval(this, true);
-
         this.paused = true;
     };
 
     ItemsContainerProtoType.resume = function (options) {
-
         this.paused = false;
 
         var refreshIntervalEndTime = this.refreshIntervalEndTime;
@@ -422,7 +391,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     };
 
     ItemsContainerProtoType.refreshItems = function () {
-
         if (!this.fetchData) {
             return Promise.resolve();
         }
@@ -438,7 +406,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     };
 
     ItemsContainerProtoType.notifyRefreshNeeded = function (isInForeground) {
-
         if (this.paused) {
             this.needsRefresh = true;
             return;
@@ -457,9 +424,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     };
 
     function clearRefreshInterval(itemsContainer, isPausing) {
-
         if (itemsContainer.refreshInterval) {
-
             clearInterval(itemsContainer.refreshInterval);
             itemsContainer.refreshInterval = null;
 
@@ -470,7 +435,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function resetRefreshInterval(itemsContainer, intervalMs) {
-
         clearRefreshInterval(itemsContainer);
 
         if (!intervalMs) {
@@ -484,7 +448,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function onDataFetched(result) {
-
         var items = result.Items || result;
 
         var parentContainer = this.parentContainer;
@@ -496,10 +459,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
             }
         }
 
-        // Scroll back up so they can see the results from the beginning
-        // TODO: Find scroller
-        //window.scrollTo(0, 0);
-
         var activeElement = document.activeElement;
         var focusId;
         var hasActiveElement;
@@ -528,12 +487,11 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
         if (focusId) {
             var newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]');
             if (newElement) {
-
                 try {
                     focusManager.focus(newElement);
                     return;
-                }
+                } catch (err) {
-                catch (err) {
+                    console.log(err);
                 }
             }
         }

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

@@ -7,8 +7,8 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
 
     function getScrollButtonHtml(direction) {
         var html = '';
-
         var icon = direction === 'left' ? '' : '';
+
         html += '<button type="button" is="paper-icon-button-light" data-ripple="false" data-direction="' + direction + '" class="emby-scrollbuttons-button">';
         html += '<i class="md-icon">' + icon + '</i>';
         html += '</button>';
@@ -32,30 +32,35 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
         return 0;
     }
 
-    function updateScrollButtons(scrollButtons, pos, scrollWidth) {
+    function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) {
-        if (pos > 0) {
+        if (scrollWidth <= scrollSize) {
+            scrollButtons.scrollButtonsLeft.classList.add('hide');
+            scrollButtons.scrollButtonsRight.classList.add('hide');
+        }
+
+        if (scrollPos > 0) {
             scrollButtons.scrollButtonsLeft.disabled = false;
         } else {
             scrollButtons.scrollButtonsLeft.disabled = true;
         }
 
-        if (scrollWidth > 0) {
+        var scrollPosEnd = scrollPos + scrollSize;
-            pos += scrollButtons.offsetLeft + scrollButtons.offsetWidth;
+        if (scrollWidth > 0 && scrollPosEnd >= scrollWidth) {
-            if (pos >= scrollWidth) {
+            scrollButtons.scrollButtonsRight.disabled = true;
-                scrollButtons.scrollButtonsRight.disabled = true;
+        } else {
-            } else {
+            scrollButtons.scrollButtonsRight.disabled = false;
-                scrollButtons.scrollButtonsRight.disabled = false;
-            }
         }
     }
 
     function onScroll(e) {
         var scrollButtons = this;
         var scroller = this.scroller;
-        var pos = getScrollPosition(scroller);
+
+        var scrollSize = getScrollSize(scroller);
+        var scrollPos = getScrollPosition(scroller);
         var scrollWidth = getScrollWidth(scroller);
 
-        updateScrollButtons(scrollButtons, pos, scrollWidth);
+        updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth);
     }
 
     function getStyleValue(style, name) {
@@ -112,18 +117,27 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
 
         var direction = this.getAttribute('data-direction');
         var scrollSize = getScrollSize(scroller);
-        var pos = getScrollPosition(scroller);
+        var scrollPos = getScrollPosition(scroller);
+        var scrollWidth = getScrollWidth(scroller);
 
         var newPos;
         if (direction === 'left') {
-            newPos = Math.max(0, pos - scrollSize);
+            newPos = Math.max(0, scrollPos - scrollSize);
         } else {
-            newPos = pos + scrollSize;
+            newPos = scrollPos + scrollSize;
         }
 
         scroller.scrollToPosition(newPos, false);
     }
 
+    EmbyScrollButtonsPrototype.refresh = function (scroller) {
+        var scrollSize = getScrollSize(scroller);
+        var scrollPos = getScrollPosition(scroller);
+        var scrollWidth = getScrollWidth(scroller);
+
+        updateScrollButtons(this, scrollSize, scrollPos, scrollWidth);
+    }
+
     EmbyScrollButtonsPrototype.attachedCallback = function () {
         var scroller = this.nextSibling;
         var parent = this.parentNode;
@@ -146,10 +160,6 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
             capture: false,
             passive: true
         });
-
-        var pos = getScrollPosition(scroller);
-        var scrollWidth = getScrollWidth(scroller);
-        updateScrollButtons(this, pos, scrollWidth);
     };
 
     EmbyScrollButtonsPrototype.detachedCallback = function () {

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

@@ -149,6 +149,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
         // If just inserted it might not have any height yet - yes this is a hack
         this.scroller = new scroller(scrollFrame, options);
         this.scroller.init();
+        this.scroller.reload();
 
         if (layoutManager.tv && this.getAttribute('data-centerfocus')) {
             initCenterFocus(this, this.scroller);
@@ -183,6 +184,14 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
         }
     };
 
+    ScrollerProtoType.afterRefresh = function () {
+        var buttons = this.parentNode.parentNode.querySelector('.emby-scrollbuttons');
+        if (buttons) {
+            this.parentNode.scroller.reload();
+            buttons.refresh(this.parentNode);
+        }
+    }
+
     ScrollerProtoType.detachedCallback = function () {
         if (this.getAttribute('data-navcommands')) {
             inputManager.off(this, onInputCommand);

src/components/homesections/homesections.js

@@ -334,6 +334,9 @@ 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;
+
+        var scroller = elem.querySelector('.emby-scroller');
+        itemsContainer.afterRefresh = scroller.afterRefresh;
     }
 
     function loadRecentlyAdded(elem, apiClient, user, userViews) {
@@ -471,6 +474,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         itemsContainer.fetchData = getContinueWatchingFetchFn(apiClient.serverId());
         itemsContainer.getItemsHtml = getContinueWatchingItemsHtml;
         itemsContainer.parentContainer = elem;
+
+        var scroller = elem.querySelector('.emby-scroller');
+        itemsContainer.afterRefresh = scroller.afterRefresh;
     }
 
     function getContinueListeningFetchFn(serverId) {
@@ -544,6 +550,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         itemsContainer.fetchData = getContinueListeningFetchFn(apiClient.serverId());
         itemsContainer.getItemsHtml = getContinueListeningItemsHtml;
         itemsContainer.parentContainer = elem;
+
+        var scroller = elem.querySelector('.emby-scroller');
+        itemsContainer.afterRefresh = scroller.afterRefresh;
     }
 
     function getOnNowFetchFn(serverId) {
@@ -687,6 +696,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
                 itemsContainer.parentContainer = elem;
                 itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId());
                 itemsContainer.getItemsHtml = getOnNowItemsHtml;
+
+                var scroller = elem.querySelector('.emby-scroller');
+                itemsContainer.afterRefresh = scroller.afterRefresh;
             }
         });
     }
@@ -760,6 +772,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId());
         itemsContainer.getItemsHtml = getNextUpItemsHtml;
         itemsContainer.parentContainer = elem;
+
+        var scroller = elem.querySelector('.emby-scroller');
+        itemsContainer.afterRefresh = scroller.afterRefresh;
     }
 
     function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
@@ -832,6 +847,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly);
         itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly);
         itemsContainer.parentContainer = elem;
+
+        var scroller = elem.querySelector('.emby-scroller');
+        itemsContainer.afterRefresh = scroller.afterRefresh;
     }
 
     return {