cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix scroller button issues

Browse Source
This commit is contained in:
dkanada 2019-05-23 00:04:48 -07:00
parent 976ec25e3b
commit 73b14386ef
4 changed files with 60 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/emby-itemscontainer/emby-itemscontainer.js
View File

@ -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);
}
}
}

42
src/components/emby-scrollbuttons/emby-scrollbuttons.js
View File

@ -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) {
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) {
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 () {

9
src/components/emby-scroller/emby-scroller.js
View File

@ -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);

18
src/components/homesections/homesections.js
View File

@ -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 {