wjones/jellyfin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix all outstanding bugs and quirks with new scrollbuttons

Browse Source
This commit is contained in:
dkanada
2019-07-02 00:12:04 -07:00
parent 63b4249c34
commit 9c9d4ba58c
6 changed files with 33 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/emby-scrollbuttons/emby-scrollbuttons.js
+2 -10
View File
@@ -33,8 +33,8 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
}
function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) {
// hack alert add ten for rounding errors
if (scrollWidth <= scrollSize + 10) {
// hack alert add twenty for rounding errors
if (scrollWidth <= scrollSize + 20) {
scrollButtons.scrollButtonsLeft.classList.add('hide');
scrollButtons.scrollButtonsRight.classList.add('hide');
}
@@ -131,14 +131,6 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
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;
src/components/emby-scroller/emby-scroller.js
-8
View File
@@ -184,14 +184,6 @@ 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
+21 -56
View File
@@ -91,7 +91,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
}
var promise = Promise.all(promises);
if (!options || options.returnPromise !== false) {
return promise;
}
@@ -106,32 +105,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
if (section === 'latestmedia') {
loadRecentlyAdded(elem, apiClient, user, userViews);
}
else if (section === 'librarytiles' || section === 'smalllibrarytiles' || section === 'smalllibrarytiles-automobile' || section === 'librarytiles-automobile') {
} else if (section === 'librarytiles' || section === 'smalllibrarytiles' || section === 'smalllibrarytiles-automobile' || section === 'librarytiles-automobile') {
loadLibraryTiles(elem, apiClient, user, userSettings, 'smallBackdrop', userViews, allSections);
}
else if (section === 'librarybuttons') {
} else if (section === 'librarybuttons') {
loadlibraryButtons(elem, apiClient, user, userSettings, userViews, allSections);
}
else if (section === 'resume') {
} else if (section === 'resume') {
loadResumeVideo(elem, apiClient, userId);
}
else if (section === 'resumeaudio') {
} else if (section === 'resumeaudio') {
loadResumeAudio(elem, apiClient, userId);
}
else if (section === 'activerecordings') {
} else if (section === 'activerecordings') {
loadLatestLiveTvRecordings(elem, true, apiClient, userId);
}
else if (section === 'nextup') {
} else if (section === 'nextup') {
loadNextUp(elem, apiClient, userId);
}
else if (section === 'onnow' || section === 'livetv') {
} else if (section === 'onnow' || section === 'livetv') {
return loadOnNow(elem, apiClient, user);
}
else {
} else {
elem.innerHTML = '';
return Promise.resolve();
}
return Promise.resolve();
@@ -163,9 +152,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
var html = "";
html += '<div class="verticalSection verticalSection-extrabottompadding">';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
html += '</div>';
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">';
@@ -317,8 +304,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">';
html += '<div is="emby-itemscontainer" class="itemsContainer focuscontainer-x scrollSlider">';
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer focuscontainer-x padded-left padded-right vertical-wrap">';
}
@@ -334,9 +321,6 @@ 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) {
@@ -370,15 +354,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
var html = '';
if (userViews.length) {
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderMyMedia') + '</h2>';
html += '</div>';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
if (enableScrollX()) {
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">';
html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right focuscontainer-x vertical-wrap">';
}
@@ -457,7 +437,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
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">';
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
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">';
@@ -475,9 +455,6 @@ 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) {
@@ -533,7 +510,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
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">';
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
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">';
@@ -551,9 +528,6 @@ 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) {
@@ -623,9 +597,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
if (enableScrollX()) {
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true" data-scrollbuttons="false">';
html += '<div class="scrollSlider padded-left padded-right padded-top padded-bottom focuscontainer-x">';
html += '<div class="padded-left padded-right padded-top padded-bottom scrollSlider focuscontainer-x">';
} else {
html += '<div class="padded-left padded-right padded-top focuscontainer-x">';
html += '<div class="padded-left padded-right padded-top padded-bottom focuscontainer-x">';
}
html += '<a style="margin-left:.8em;margin-right:0;" is="emby-linkbutton" href="' + appRouter.getRouteUrl('livetv', {
@@ -678,10 +652,10 @@ 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">';
html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-refreshinterval="300000">'
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
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" data-refreshinterval="300000">';
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x">';
}
if (enableScrollX()) {
@@ -697,9 +671,6 @@ 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;
}
});
}
@@ -755,7 +726,7 @@ 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">';
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
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">';
@@ -773,9 +744,6 @@ 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) {
@@ -830,7 +798,7 @@ 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">';
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
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">';
@@ -848,9 +816,6 @@ 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 {
src/components/scroller.js
+4 -7
View File
@@ -299,13 +299,10 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}
// Start animation rendering
if (newPos !== pos.dest) {
pos.dest = newPos;
renderAnimateWithTransform(from, newPos, immediate);
lastAnimate = now;
}
// NOTE the dependency was modified here to fix a scrollbutton issue
pos.dest = newPos;
renderAnimateWithTransform(from, newPos, immediate);
lastAnimate = now;
};
function setStyleProperty(elem, name, value, speed, resetTransition) {
src/css/librarybrowser.css
+2 -2
View File
@@ -960,11 +960,11 @@
}
.padded-left {
padding-left: 4em;
padding-left: 3.3%;
}
.padded-right {
padding-right: 4em;
padding-right: 3.3%;
}
.padded-top {
src/itemdetails.html
+4 -10
View File
@@ -207,9 +207,7 @@
</div>
<div class="collectionItems"></div>
<div class="nextUpSection verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">
${HeaderNextUp}
</h2>
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderNextUp}</h2>
<div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div>
</div>
<div class="programGuideSection hide verticalSection detailVerticalSection">
@@ -224,9 +222,7 @@
</div>
</div>
<div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">
${HeaderAdditionalParts}
</h2>
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderAdditionalParts}</h2>
<div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
</div>
<div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
@@ -247,11 +243,9 @@
</div>
</div>
</div>
<div id="castCollapsible" class="verticalSection detailVerticalSection hide">
<h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">
${HeaderCastCrew}
</h2>
<h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderCastCrew}</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"></div>