Fix: Search with horizontal scroll and improve performance

dist/plex-meets-homeassistant.js

@@ -21978,7 +21978,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
         this.contentBGHeight = 0;
         this.initialDataLoaded = false;
         this.renderNewElementsIfNeeded = () => {
-            console.log('renderNewElementsIfNeeded');
             const loadAdditionalRowsCount = 2; // todo: make this configurable
             const height = getHeight(this.content);
             if (!this.detailsShown &&
@@ -22375,29 +22374,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
             return searchContainer;
         };
         this.renderMovieElems = () => {
-            let renderMore = (!this.maxCount || this.renderedItems < this.maxCount) &&
+            const renderElements = (render, hasEpisodesResult, searchValues, itemsPerRow) => {
-                (!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
-                (!this.maxRows || this.renderedRows <= this.maxRows);
-            if (this.data[this.config.libraryName] &&
-                this.renderedItems < this.data[this.config.libraryName].length &&
-                renderMore) {
-                let maxRenderedItems = this.data[this.config.libraryName].length;
-                let itemsPerRow = this.data[this.config.libraryName].length;
-                if (this.maxCount) {
-                    maxRenderedItems = this.maxCount;
-                }
-                itemsPerRow = maxRenderedItems;
-                if (this.maxRows) {
-                    itemsPerRow = Math.ceil(maxRenderedItems / this.maxRows);
-                }
-                // eslint-disable-next-line consistent-return
-                const searchValues = lodash.split(this.searchValue, ' ');
-                // eslint-disable-next-line consistent-return
-                let lastRowTop = 0;
                 const loadAdditionalRowsCount = 2; // todo: make this configurable
+                let lastRowTop = 0;
                 this.renderedRows = 0;
+                this.renderedItems = 0;
                 this.columnsCount = 0;
-                const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]);
+                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);
                 lodash.forEach(this.data[this.config.libraryName], (movieData) => {
                     renderMore =
                         (!this.maxCount || this.renderedItems < this.maxCount) &&
@@ -22429,7 +22416,9 @@ 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;
@@ -22437,14 +22426,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                                 }
                                 const marginRight = 10;
                                 if (this.renderedRows === 1 || !this.maxRows || this.maxRows < 2) {
-                                    if (lodash.isEmpty(this.contentContainer.style.width)) {
+                                    containerWidth += parseFloat(movieElem.style.width) + marginRight;
-                                        this.contentContainer.style.width = `${parseFloat(movieElem.style.width) + marginRight}px`;
-                                    }
-                                    else {
-                                        this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
-                                            parseFloat(movieElem.style.width) +
-                                            marginRight}px`;
-                                    }
                                 }
                             }
                             this.renderedItems += 1;
@@ -22466,6 +22448,36 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                     }
                     return false;
                 });
+                if (render) {
+                    this.contentContainer.style.width = `${containerWidth}px`;
+                }
+                return {
+                    renderedItems: this.renderedItems
+                };
+            };
+            const renderMore = (!this.maxCount || this.renderedItems < this.maxCount) &&
+                (!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
+                (!this.maxRows || this.renderedRows <= this.maxRows);
+            if (this.data[this.config.libraryName] &&
+                this.renderedItems < this.data[this.config.libraryName].length &&
+                renderMore) {
+                let maxRenderedItems = this.data[this.config.libraryName].length;
+                let itemsPerRow = this.data[this.config.libraryName].length;
+                if (this.maxCount) {
+                    maxRenderedItems = this.maxCount;
+                }
+                itemsPerRow = maxRenderedItems;
+                if (this.maxRows) {
+                    itemsPerRow = Math.ceil(maxRenderedItems / this.maxRows);
+                }
+                const searchValues = lodash.split(this.searchValue, ' ');
+                const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]);
+                const { renderedItems } = renderElements(false, hasEpisodesResult, searchValues, itemsPerRow);
+                itemsPerRow = renderedItems;
+                if (this.maxRows) {
+                    itemsPerRow = Math.ceil(renderedItems / this.maxRows);
+                }
+                renderElements(true, hasEpisodesResult, searchValues, itemsPerRow);
             }
             const contentbg = this.getElementsByClassName('contentbg')[0];
             this.contentBGHeight = getHeight(contentbg);

src/plex-meets-homeassistant.ts

@@ -184,7 +184,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 	}
 
 	renderNewElementsIfNeeded = (): void => {
-		console.log('renderNewElementsIfNeeded');
 		const loadAdditionalRowsCount = 2; // todo: make this configurable
 		const height = getHeight(this.content);
 		if (
@@ -601,33 +600,23 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 	};
 
 	renderMovieElems = (): void => {
+		const renderElements = (
+			render: boolean,
+			hasEpisodesResult: any,
+			searchValues: Array<string>,
+			itemsPerRow: number
+		): Record<string, any> => {
+			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);
-		if (
-			this.data[this.config.libraryName] &&
-			this.renderedItems < this.data[this.config.libraryName].length &&
-			renderMore
-		) {
-			let maxRenderedItems = this.data[this.config.libraryName].length;
-			let itemsPerRow = this.data[this.config.libraryName].length;
-			if (this.maxCount) {
-				maxRenderedItems = this.maxCount;
-			}
-			itemsPerRow = maxRenderedItems;
-			if (this.maxRows) {
-				itemsPerRow = Math.ceil(maxRenderedItems / this.maxRows);
-			}
-			// eslint-disable-next-line consistent-return
-			const searchValues = _.split(this.searchValue, ' ');
-			// eslint-disable-next-line consistent-return
-			let lastRowTop = 0;
-
-			const loadAdditionalRowsCount = 2; // todo: make this configurable
-			this.renderedRows = 0;
-			this.columnsCount = 0;
-			const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]);
 			_.forEach(this.data[this.config.libraryName], (movieData: Record<string, any>) => {
 				renderMore =
 					(!this.maxCount || this.renderedItems < this.maxCount) &&
@@ -662,7 +651,9 @@ 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;
@@ -670,13 +661,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 							}
 							const marginRight = 10;
 							if (this.renderedRows === 1 || !this.maxRows || this.maxRows < 2) {
-								if (_.isEmpty(this.contentContainer.style.width)) {
+								containerWidth += parseFloat(movieElem.style.width) + marginRight;
-									this.contentContainer.style.width = `${parseFloat(movieElem.style.width) + marginRight}px`;
-								} else {
-									this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
-										parseFloat(movieElem.style.width) +
-										marginRight}px`;
-								}
 							}
 						}
 
@@ -699,6 +684,43 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 				}
 				return false;
 			});
+			if (render) {
+				this.contentContainer.style.width = `${containerWidth}px`;
+			}
+			return {
+				renderedItems: this.renderedItems
+			};
+		};
+
+		const renderMore =
+			(!this.maxCount || this.renderedItems < this.maxCount) &&
+			(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
+			(!this.maxRows || this.renderedRows <= this.maxRows);
+		if (
+			this.data[this.config.libraryName] &&
+			this.renderedItems < this.data[this.config.libraryName].length &&
+			renderMore
+		) {
+			let maxRenderedItems = this.data[this.config.libraryName].length;
+			let itemsPerRow = this.data[this.config.libraryName].length;
+			if (this.maxCount) {
+				maxRenderedItems = this.maxCount;
+			}
+			itemsPerRow = maxRenderedItems;
+			if (this.maxRows) {
+				itemsPerRow = Math.ceil(maxRenderedItems / this.maxRows);
+			}
+			const searchValues = _.split(this.searchValue, ' ');
+
+			const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]);
+
+			const { renderedItems } = renderElements(false, hasEpisodesResult, searchValues, itemsPerRow);
+			itemsPerRow = renderedItems;
+			if (this.maxRows) {
+				itemsPerRow = Math.ceil(renderedItems / this.maxRows);
+			}
+
+			renderElements(true, hasEpisodesResult, searchValues, itemsPerRow);
 		}
 
 		const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement;