mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code 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

12
src/components/emby-scrollbuttons/emby-scrollbuttons.js
View file

@ -33,8 +33,8 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
} }
function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) { function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) {
// hack alert add ten for rounding errors // hack alert add twenty for rounding errors
if (scrollWidth <= scrollSize + 10) { if (scrollWidth <= scrollSize + 20) {
scrollButtons.scrollButtonsLeft.classList.add('hide'); scrollButtons.scrollButtonsLeft.classList.add('hide');
scrollButtons.scrollButtonsRight.classList.add('hide'); scrollButtons.scrollButtonsRight.classList.add('hide');
} }
@ -131,14 +131,6 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
scroller.scrollToPosition(newPos, false); 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 () { EmbyScrollButtonsPrototype.attachedCallback = function () {
var scroller = this.nextSibling; var scroller = this.nextSibling;
var parent = this.parentNode; var parent = this.parentNode;

8
src/components/emby-scroller/emby-scroller.js
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 () { ScrollerPrototype.detachedCallback = function () {
if (this.getAttribute('data-navcommands')) { if (this.getAttribute('data-navcommands')) {
inputManager.off(this, onInputCommand); inputManager.off(this, onInputCommand);

77
src/components/homesections/homesections.js
View file

@ -91,7 +91,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
var promise = Promise.all(promises); var promise = Promise.all(promises);
if (!options || options.returnPromise !== false) { if (!options || options.returnPromise !== false) {
return promise; return promise;
} }
@ -106,32 +105,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
if (section === 'latestmedia') { if (section === 'latestmedia') {
loadRecentlyAdded(elem, apiClient, user, userViews); 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); loadLibraryTiles(elem, apiClient, user, userSettings, 'smallBackdrop', userViews, allSections);
} } else if (section === 'librarybuttons') {
else if (section === 'librarybuttons') {
loadlibraryButtons(elem, apiClient, user, userSettings, userViews, allSections); loadlibraryButtons(elem, apiClient, user, userSettings, userViews, allSections);
} } else if (section === 'resume') {
else if (section === 'resume') {
loadResumeVideo(elem, apiClient, userId); loadResumeVideo(elem, apiClient, userId);
} } else if (section === 'resumeaudio') {
else if (section === 'resumeaudio') {
loadResumeAudio(elem, apiClient, userId); loadResumeAudio(elem, apiClient, userId);
} } else if (section === 'activerecordings') {
else if (section === 'activerecordings') {
loadLatestLiveTvRecordings(elem, true, apiClient, userId); loadLatestLiveTvRecordings(elem, true, apiClient, userId);
} } else if (section === 'nextup') {
else if (section === 'nextup') {
loadNextUp(elem, apiClient, userId); loadNextUp(elem, apiClient, userId);
} } else if (section === 'onnow' || section === 'livetv') {
else if (section === 'onnow' || section === 'livetv') {
return loadOnNow(elem, apiClient, user); return loadOnNow(elem, apiClient, user);
} } else {
else {
elem.innerHTML = ''; elem.innerHTML = '';
return Promise.resolve(); return Promise.resolve();
} }
return Promise.resolve(); return Promise.resolve();
@ -163,9 +152,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
var html = ""; var html = "";
html += '<div class="verticalSection verticalSection-extrabottompadding">'; 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 += '<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">'; 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>'; html += '</div>';
if (enableScrollX()) { 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 focuscontainer-x scrollSlider">'; html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer focuscontainer-x padded-left padded-right vertical-wrap">'; 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.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType);
itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType); itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType);
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
var scroller = elem.querySelector('.emby-scroller');
itemsContainer.afterRefresh = scroller.afterRefresh;
} }
function loadRecentlyAdded(elem, apiClient, user, userViews) { 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) { function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
var html = ''; var html = '';
if (userViews.length) { if (userViews.length) {
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderMyMedia') + '</h2>';
html += '</div>';
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">'; 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 { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right focuscontainer-x vertical-wrap">'; 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>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
if (enableScrollX()) { 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">'; html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="videoplayback,markplayed">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="videoplayback,markplayed">'; 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.fetchData = getContinueWatchingFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getContinueWatchingItemsHtml; itemsContainer.getItemsHtml = getContinueWatchingItemsHtml;
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
var scroller = elem.querySelector('.emby-scroller');
itemsContainer.afterRefresh = scroller.afterRefresh;
} }
function getContinueListeningFetchFn(serverId) { 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>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
if (enableScrollX()) { 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">'; html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="audioplayback,markplayed">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="audioplayback,markplayed">'; 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.fetchData = getContinueListeningFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getContinueListeningItemsHtml; itemsContainer.getItemsHtml = getContinueListeningItemsHtml;
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
var scroller = elem.querySelector('.emby-scroller');
itemsContainer.afterRefresh = scroller.afterRefresh;
} }
function getOnNowFetchFn(serverId) { function getOnNowFetchFn(serverId) {
@ -623,9 +597,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
if (enableScrollX()) { 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 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 { } 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', { 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>'; html += '</div>';
if (enableScrollX()) { 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-refreshinterval="300000">' html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">'
} else { } 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()) { if (enableScrollX()) {
@ -697,9 +671,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId()); itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getOnNowItemsHtml; 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>'; html += '</div>';
if (enableScrollX()) { 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">' html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x" data-monitor="videoplayback,markplayed">'
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-monitor="videoplayback,markplayed">'; 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.fetchData = getNextUpFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getNextUpItemsHtml; itemsContainer.getItemsHtml = getNextUpItemsHtml;
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
var scroller = elem.querySelector('.emby-scroller');
itemsContainer.afterRefresh = scroller.afterRefresh;
} }
function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) { function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
@ -830,7 +798,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
html += '</div>'; html += '</div>';
if (enableScrollX()) { 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">' html += '<div is="emby-itemscontainer" class="itemsContainer scrollSlider focuscontainer-x">'
} else { } 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 vertical-wrap focuscontainer-x">';
@ -848,9 +816,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly); itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly);
itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly); itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly);
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
var scroller = elem.querySelector('.emby-scroller');
itemsContainer.afterRefresh = scroller.afterRefresh;
} }
return { return {

5
src/components/scroller.js
View file

@ -299,13 +299,10 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
} }
// Start animation rendering // Start animation rendering
if (newPos !== pos.dest) { // NOTE the dependency was modified here to fix a scrollbutton issue
pos.dest = newPos; pos.dest = newPos;
renderAnimateWithTransform(from, newPos, immediate); renderAnimateWithTransform(from, newPos, immediate);
lastAnimate = now; lastAnimate = now;
}
}; };
function setStyleProperty(elem, name, value, speed, resetTransition) { function setStyleProperty(elem, name, value, speed, resetTransition) {

4
src/css/librarybrowser.css
View file

@ -960,11 +960,11 @@
} }
.padded-left { .padded-left {
padding-left: 4em; padding-left: 3.3%;
} }
.padded-right { .padded-right {
padding-right: 4em; padding-right: 3.3%;
} }
.padded-top { .padded-top {

14
src/itemdetails.html
View file

@ -207,9 +207,7 @@
</div> </div>
<div class="collectionItems"></div> <div class="collectionItems"></div>
<div class="nextUpSection verticalSection detailVerticalSection hide"> <div class="nextUpSection verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left"> <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderNextUp}</h2>
${HeaderNextUp}
</h2>
<div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div> <div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div>
</div> </div>
<div class="programGuideSection hide verticalSection detailVerticalSection"> <div class="programGuideSection hide verticalSection detailVerticalSection">
@ -224,9 +222,7 @@
</div> </div>
</div> </div>
<div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide"> <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left"> <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderAdditionalParts}</h2>
${HeaderAdditionalParts}
</h2>
<div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div> <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
</div> </div>
<div class="verticalSection itemVerticalSection moreFromSeasonSection hide"> <div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
@ -247,11 +243,9 @@
</div> </div>
</div> </div>
</div> </div>
<div id="castCollapsible" class="verticalSection detailVerticalSection hide"> <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
<h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right"> <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderCastCrew}</h2>
${HeaderCastCrew}
</h2>
<div is="emby-scroller" class="emby-scroller" data-mousewheel="false" data-centerfocus="true" data-horizontal="true"> <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 class="scrollerframe padded-top-focusscale padded-bottom-focusscale">
<div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div> <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>