From 48a3f64a08305ef4be28a47430eccae5cf6fbf74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Mon, 17 Jan 2022 20:18:56 +0100 Subject: [PATCH] Fix: Progressive scroll repeating items --- dist/plex-meets-homeassistant.js | 48 ++++++++++++++++++--------- src/plex-meets-homeassistant.ts | 56 ++++++++++++++++++++++---------- 2 files changed, 71 insertions(+), 33 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index a06f2e5..1ba6846 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -21985,7 +21985,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.renderedItems > 0 && this.renderedItems < this.data[this.config.libraryName].length && (!this.maxCount || this.renderedItems < this.maxCount) && - (!this.maxRows || this.renderedRows < this.config.maxRows)) { + (!this.maxRows || this.renderedRows < this.config.maxRows) && + lodash.isEmpty(this.searchValue)) { this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2); this.renderMovieElems(); this.calculatePositions(); @@ -22374,17 +22375,20 @@ class PlexMeetsHomeAssistant extends HTMLElement { return searchContainer; }; this.renderMovieElems = () => { + console.log('renderMovieElems'); const renderElements = (render, hasEpisodesResult, searchValues, itemsPerRow) => { + console.log('renderElements'); + const origRenderedRows = this.renderedRows; + const origRenderedItems = this.renderedItems; + const origColumnsCount = this.columnsCount; const loadAdditionalRowsCount = 2; // todo: make this configurable let lastRowTop = 0; - this.renderedRows = 0; - this.renderedItems = 0; - this.columnsCount = 0; this.contentContainer.style.width = ''; let containerWidth = 0; let renderMore = (!this.maxCount || this.renderedItems < this.maxCount) && (!this.maxRenderCount || this.renderedItems < this.maxRenderCount) && (!this.maxRows || this.renderedRows <= this.maxRows); + let count = 0; lodash.forEach(this.data[this.config.libraryName], (movieData) => { renderMore = (!this.maxCount || this.renderedItems < this.maxCount) && @@ -22416,22 +22420,28 @@ class PlexMeetsHomeAssistant extends HTMLElement { shouldRender = true; } if (shouldRender) { - if (render) { - this.contentContainer.appendChild(movieElem); - } - if (this.useHorizontalScroll) { - if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) { - this.renderedRows += 1; - movieElem.style.clear = 'both'; + count += 1; // keeps track of already rendered items for progressive scroll + if (count > this.renderedItems) { + if (render) { + this.contentContainer.appendChild(movieElem); } - const marginRight = 10; - if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) { - containerWidth += parseFloat(movieElem.style.width) + marginRight; + if (this.useHorizontalScroll) { + if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) { + this.renderedRows += 1; + movieElem.style.clear = 'both'; + } + const marginRight = 10; + if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) { + containerWidth += parseFloat(movieElem.style.width) + marginRight; + } } + this.renderedItems += 1; } - this.renderedItems += 1; } - if (shouldRender && lastRowTop !== movieElem.getBoundingClientRect().top && !this.useHorizontalScroll) { + if (render && + shouldRender && + lastRowTop !== movieElem.getBoundingClientRect().top && + !this.useHorizontalScroll) { this.renderedRows += 1; if (lastRowTop !== 0 && this.columnsCount === 0) { this.columnsCount = this.renderedItems - 1; @@ -22439,6 +22449,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { lastRowTop = movieElem.getBoundingClientRect().top; if (!isScrolledIntoView(movieElem) && !this.maxRenderCount && this.renderedItems > 0) { this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * loadAdditionalRowsCount; + console.log(`1: this.maxRenderCount = ${this.maxRenderCount}`); } } if (this.maxRows && this.renderedRows > this.maxRows && !this.useHorizontalScroll) { @@ -22448,6 +22459,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { } return false; }); + if (!render) { + this.renderedRows = origRenderedRows; + this.renderedItems = origRenderedItems; + this.columnsCount = origColumnsCount; + } if (render && containerWidth > 0) { this.contentContainer.style.width = `${containerWidth}px`; } diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 5645d92..57f8bde 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -192,7 +192,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.renderedItems > 0 && this.renderedItems < this.data[this.config.libraryName].length && (!this.maxCount || this.renderedItems < this.maxCount) && - (!this.maxRows || this.renderedRows < this.config.maxRows) + (!this.maxRows || this.renderedRows < this.config.maxRows) && + _.isEmpty(this.searchValue) ) { this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2); this.renderMovieElems(); @@ -600,23 +601,28 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; renderMovieElems = (): void => { + console.log('renderMovieElems'); const renderElements = ( render: boolean, hasEpisodesResult: any, searchValues: Array, itemsPerRow: number ): Record => { + console.log('renderElements'); + const origRenderedRows = this.renderedRows; + const origRenderedItems = this.renderedItems; + const origColumnsCount = this.columnsCount; + const loadAdditionalRowsCount = 2; // todo: make this configurable let lastRowTop = 0; - this.renderedRows = 0; - this.renderedItems = 0; - this.columnsCount = 0; this.contentContainer.style.width = ''; let containerWidth = 0; let renderMore = (!this.maxCount || this.renderedItems < this.maxCount) && (!this.maxRenderCount || this.renderedItems < this.maxRenderCount) && (!this.maxRows || this.renderedRows <= this.maxRows); + + let count = 0; _.forEach(this.data[this.config.libraryName], (movieData: Record) => { renderMore = (!this.maxCount || this.renderedItems < this.maxCount) && @@ -650,24 +656,33 @@ class PlexMeetsHomeAssistant extends HTMLElement { ) { shouldRender = true; } + if (shouldRender) { - if (render) { - this.contentContainer.appendChild(movieElem); - } - if (this.useHorizontalScroll) { - if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) { - this.renderedRows += 1; - movieElem.style.clear = 'both'; + count += 1; // keeps track of already rendered items for progressive scroll + if (count > this.renderedItems) { + if (render) { + this.contentContainer.appendChild(movieElem); } - const marginRight = 10; - if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) { - containerWidth += parseFloat(movieElem.style.width) + marginRight; + if (this.useHorizontalScroll) { + if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) { + this.renderedRows += 1; + movieElem.style.clear = 'both'; + } + const marginRight = 10; + if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) { + containerWidth += parseFloat(movieElem.style.width) + marginRight; + } } - } - this.renderedItems += 1; + this.renderedItems += 1; + } } - if (shouldRender && lastRowTop !== movieElem.getBoundingClientRect().top && !this.useHorizontalScroll) { + if ( + render && + shouldRender && + lastRowTop !== movieElem.getBoundingClientRect().top && + !this.useHorizontalScroll + ) { this.renderedRows += 1; if (lastRowTop !== 0 && this.columnsCount === 0) { this.columnsCount = this.renderedItems - 1; @@ -675,15 +690,22 @@ class PlexMeetsHomeAssistant extends HTMLElement { lastRowTop = movieElem.getBoundingClientRect().top; if (!isScrolledIntoView(movieElem) && !this.maxRenderCount && this.renderedItems > 0) { this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * loadAdditionalRowsCount; + console.log(`1: this.maxRenderCount = ${this.maxRenderCount}`); } } if (this.maxRows && this.renderedRows > this.maxRows && !this.useHorizontalScroll) { movieElem.remove(); } + return true; } return false; }); + if (!render) { + this.renderedRows = origRenderedRows; + this.renderedItems = origRenderedItems; + this.columnsCount = origColumnsCount; + } if (render && containerWidth > 0) { this.contentContainer.style.width = `${containerWidth}px`; }