Fix: Progressive scroll repeating items

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,6 +22420,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                             shouldRender = true;
                         }
                         if (shouldRender) {
+                            count += 1; // keeps track of already rendered items for progressive scroll
+                            if (count > this.renderedItems) {
                                 if (render) {
                                     this.contentContainer.appendChild(movieElem);
                                 }
@@ -22431,7 +22437,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                                 }
                                 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`;
                 }

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<string>,
 			itemsPerRow: number
 		): Record<string, any> => {
+			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<string, any>) => {
 				renderMore =
 					(!this.maxCount || this.renderedItems < this.maxCount) &&
@@ -650,7 +656,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 					) {
 						shouldRender = true;
 					}
+
 					if (shouldRender) {
+						count += 1; // keeps track of already rendered items for progressive scroll
+						if (count > this.renderedItems) {
 							if (render) {
 								this.contentContainer.appendChild(movieElem);
 							}
@@ -667,7 +676,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 
 							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`;
 			}