Fix #96: Scroll functionality broken

main 3.6.8
Juraj Nyíri 1 year ago
parent b3b3773de7
commit 8d9880da72

File diff suppressed because one or more lines are too long

@ -205,9 +205,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
renderNewElementsIfNeeded = (): void => { renderNewElementsIfNeeded = (): void => {
const loadAdditionalRowsCount = 2; // todo: make this configurable const loadAdditionalRowsCount = 2; // todo: make this configurable
const height = getHeight(this.content); const height = getHeight(this.content);
let { scrollTop } = this.haWindow;
if (scrollTop < window.scrollY) {
scrollTop = window.scrollY;
}
if ( if (
!this.detailsShown && !this.detailsShown &&
window.innerHeight + this.haWindow.scrollTop > height - 300 && window.innerHeight + scrollTop > height - 300 &&
this.renderedItems > 0 && this.renderedItems > 0 &&
this.renderedItems < this.data[this.config.libraryName].length && this.renderedItems < this.data[this.config.libraryName].length &&
(!this.maxCount || this.renderedItems < this.maxCount) && (!this.maxCount || this.renderedItems < this.maxCount) &&
@ -254,7 +258,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.hassObj) { if (this.hassObj) {
this.entityRegistry = await fetchEntityRegistry(this.hassObj.connection); this.entityRegistry = await fetchEntityRegistry(this.hassObj.connection);
} }
const scrollListener = () => { const scrollListener = () => {
// todo: improve performance by calculating this when needed only // todo: improve performance by calculating this when needed only
if (this.detailsShown && this.activeMovieElem && !isVideoFullScreen(this) && this.isVisible) { if (this.detailsShown && this.activeMovieElem && !isVideoFullScreen(this) && this.isVisible) {
@ -298,9 +301,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.haWindow.addEventListener('scroll', scrollListener); this.haWindow.addEventListener('scroll', scrollListener);
// window.addEventListener('scroll', scrollListener); window.addEventListener('scroll', scrollListener);
// window.addEventListener('wheel', scrollListener); window.addEventListener('wheel', scrollListener);
// window.addEventListener('touchmove', scrollListener); window.addEventListener('touchmove', scrollListener);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.resizeHandler(); this.resizeHandler();
}); });
@ -941,7 +944,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
<table> <table>
<tr> <tr>
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this <td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'> .fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
Directed by Directed by
</td> </td>
<td class='metaInfoDetailsData'> <td class='metaInfoDetailsData'>
@ -950,7 +953,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
</tr> </tr>
<tr> <tr>
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this <td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'> .fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
Written by Written by
</td> </td>
<td class='metaInfoDetailsData'> <td class='metaInfoDetailsData'>
@ -959,7 +962,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
</tr> </tr>
<tr> <tr>
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this <td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'> .fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
Studio Studio
</td> </td>
<td class='metaInfoDetailsData'> <td class='metaInfoDetailsData'>
@ -968,7 +971,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
</tr> </tr>
<tr> <tr>
<td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this <td class='metaInfoDetails' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4}px; margin-top:${this
.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'> .fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this.fontSize4 / 4}px;'>
Genre Genre
</td> </td>
<td class='metaInfoDetailsData'> <td class='metaInfoDetailsData'>
@ -1422,28 +1425,24 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
(this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined (this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined
? `<span class='minutesDetail' style='font-size:${this.fontSize4}px; line-height:${ ? `<span class='minutesDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
this.fontSize4 }px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this .fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${Math.round(
.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${Math.round(
parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000 parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000
)} min</span>` )} min</span>`
: '') + : '') +
(mainData.contentRating !== undefined (mainData.contentRating !== undefined
? `<span class='contentRatingDetail' style='font-size:${this.fontSize4}px; line-height:${ ? `<span class='contentRatingDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
this.fontSize4 }px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this .fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${escapeHtml(
.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${escapeHtml(
mainData.contentRating mainData.contentRating
)}</span>` )}</span>`
: '') + : '') +
(mainData.rating !== undefined (mainData.rating !== undefined
? `<span class='ratingDetail' style='font-size:${this.fontSize4}px; line-height:${ ? `<span class='ratingDetail' style='font-size:${this.fontSize4}px; line-height:${this.fontSize4
this.fontSize4 }px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this
}px; margin-top:${this.fontSize4 / 4}px; margin-bottom:${this.fontSize4 / 4}px; margin-right:${this .fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${mainData.rating < 5 ? '&#128465;' : '&#11088;'
.fontSize4 / 4}px; padding:${this.fontSize4 / 2}px ${this.fontSize4}px;'>${ }&nbsp;${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}</span>`
mainData.rating < 5 ? '&#128465;' : '&#11088;'
}&nbsp;${Math.round(parseFloat(escapeHtml(mainData.rating)) * 10) / 10}</span>`
: '')}<div class='clear'></div>`; : '')}<div class='clear'></div>`;
const detailDesc = this.getElementsByClassName('detailDesc')[0] as HTMLElement; const detailDesc = this.getElementsByClassName('detailDesc')[0] as HTMLElement;
@ -1583,9 +1582,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
fullscreenTrailer.style.visibility = 'visible'; fullscreenTrailer.style.visibility = 'visible';
contentbg.classList.add('no-transparency'); contentbg.classList.add('no-transparency');
playingFired = true; playingFired = true;
this.videoElem.style.width = `${ this.videoElem.style.width = `${(this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth
(this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth }px`;
}px`;
this.videoElem.style.visibility = 'visible'; this.videoElem.style.visibility = 'visible';
this.videoElem.style.top = `${top}px`; this.videoElem.style.top = `${top}px`;
} }
@ -1672,9 +1670,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const seasonContainer = document.createElement('div'); const seasonContainer = document.createElement('div');
seasonContainer.className = 'seasonContainer'; seasonContainer.className = 'seasonContainer';
seasonContainer.style.width = `${CSS_STYLE.width}px`; seasonContainer.style.width = `${CSS_STYLE.width}px`;
const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${ const thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
this.minExpandedHeight }&minSize=1&upscale=1&url=${childData.thumb}&X-Plex-Token=${this.config.token}`;
}&minSize=1&upscale=1&url=${childData.thumb}&X-Plex-Token=${this.config.token}`;
const seasonElem = document.createElement('div'); const seasonElem = document.createElement('div');
seasonElem.className = 'seasonElem'; seasonElem.className = 'seasonElem';
@ -2071,13 +2068,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
let thumbURL = ''; let thumbURL = '';
if (this.plex) { if (this.plex) {
if (_.isEqual(data.type, 'episode')) { if (_.isEqual(data.type, 'episode')) {
thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${ thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
this.minExpandedHeight }&minSize=1&upscale=1&url=${data.grandparentThumb}&X-Plex-Token=${this.config.token}`;
}&minSize=1&upscale=1&url=${data.grandparentThumb}&X-Plex-Token=${this.config.token}`;
} else { } else {
thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${ thumbURL = `${this.plex.getBasicURL()}/photo/:/transcode?width=${this.minExpandedWidth}&height=${this.minExpandedHeight
this.minExpandedHeight }&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;
}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;
} }
} }

Loading…
Cancel
Save