From 241be6a70d75c3a53f4678620d32784b2fabdab6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Mon, 17 Jan 2022 19:32:28 +0100 Subject: [PATCH] Fix: Search with horizontal scroll and improve performance --- dist/plex-meets-homeassistant.js | 72 +++++++++++++++----------- src/plex-meets-homeassistant.ts | 88 ++++++++++++++++++++------------ 2 files changed, 97 insertions(+), 63 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index a6b7e0f..8fe1b24 100644 --- a/dist/plex-meets-homeassistant.js +++ b/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) && - (!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 renderElements = (render, hasEpisodesResult, searchValues, itemsPerRow) => { 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) { - this.contentContainer.appendChild(movieElem); + 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)) { - 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`; - } + containerWidth += parseFloat(movieElem.style.width) + marginRight; } } 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); diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 86b92b4..8321a0d 100644 --- a/src/plex-meets-homeassistant.ts +++ b/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 => { - 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 renderElements = ( + render: boolean, + hasEpisodesResult: any, + searchValues: Array, + itemsPerRow: number + ): Record => { 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); _.forEach(this.data[this.config.libraryName], (movieData: Record) => { renderMore = (!this.maxCount || this.renderedItems < this.maxCount) && @@ -662,7 +651,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { shouldRender = true; } if (shouldRender) { - this.contentContainer.appendChild(movieElem); + 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)) { - 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`; - } + containerWidth += parseFloat(movieElem.style.width) + marginRight; } } @@ -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;