From 73b14386ef311336216f5b5569b27f238356efe3 Mon Sep 17 00:00:00 2001 From: dkanada Date: Thu, 23 May 2019 00:04:48 -0700 Subject: [PATCH] fix scroller button issues --- .../emby-itemscontainer.js | 50 ++----------------- .../emby-scrollbuttons/emby-scrollbuttons.js | 48 +++++++++++------- src/components/emby-scroller/emby-scroller.js | 9 ++++ src/components/homesections/homesections.js | 18 +++++++ 4 files changed, 60 insertions(+), 65 deletions(-) diff --git a/src/components/emby-itemscontainer/emby-itemscontainer.js b/src/components/emby-itemscontainer/emby-itemscontainer.js index 2b002c70e8..7120b235ca 100644 --- a/src/components/emby-itemscontainer/emby-itemscontainer.js +++ b/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); } } } diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.js b/src/components/emby-scrollbuttons/emby-scrollbuttons.js index 94307624ab..8297dd0283 100644 --- a/src/components/emby-scrollbuttons/emby-scrollbuttons.js +++ b/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 += ''; @@ -32,30 +32,35 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' return 0; } - function updateScrollButtons(scrollButtons, pos, scrollWidth) { - if (pos > 0) { + function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) { + 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) { - pos += scrollButtons.offsetLeft + scrollButtons.offsetWidth; - if (pos >= scrollWidth) { - scrollButtons.scrollButtonsRight.disabled = true; - } else { - scrollButtons.scrollButtonsRight.disabled = false; - } + var scrollPosEnd = scrollPos + scrollSize; + if (scrollWidth > 0 && scrollPosEnd >= scrollWidth) { + scrollButtons.scrollButtonsRight.disabled = true; + } else { + 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 () { diff --git a/src/components/emby-scroller/emby-scroller.js b/src/components/emby-scroller/emby-scroller.js index 51673a924a..ed634df58a 100644 --- a/src/components/emby-scroller/emby-scroller.js +++ b/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); diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js index 5a8d4983a5..16876c5088 100644 --- a/src/components/homesections/homesections.js +++ b/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 {