From 4261b304e3925ba7349e4ae04c2fe1354c5f0a98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Fri, 21 May 2021 23:07:06 +0200 Subject: [PATCH] Add: Spinner at the end of webpage --- dist/plex-meets-homeassistant.js | 21 ++++++++++++++------- src/plex-meets-homeassistant.ts | 25 +++++++++++++++++-------- 2 files changed, 31 insertions(+), 15 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 4fb966d..d31ef40 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19606,6 +19606,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { constructor() { super(...arguments); this.plexProtocol = 'http'; + this.maxRenderCount = false; this.seasonContainerClickEnabled = true; this.looseSearch = false; this.movieElems = []; @@ -19696,6 +19697,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { return searchContainer; }; this.renderPage = () => { + const spinner = document.createElement('div'); + spinner.style.display = 'flex'; + spinner.style.alignItems = 'center'; + spinner.style.justifyContent = 'center'; + spinner.innerHTML = '
'; if (this.content) { this.content.remove(); } @@ -19717,8 +19723,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { } else if (this.loading) { this.content.style.padding = '16px 16px 16px'; - this.content.innerHTML += - '
'; + this.content.appendChild(spinner); } this.card.appendChild(this.content); let count = 0; @@ -19756,11 +19761,10 @@ class PlexMeetsHomeAssistant extends HTMLElement { const searchValues = lodash.split(this.searchValue, ' '); let lastRowTop = 0; let columnsCount = 0; - let maxRenderCount = false; const loadAdditionalRowsCount = 2; // todo: make this configurable // eslint-disable-next-line consistent-return lodash.forEach(this.data[this.config.libraryName], (movieData) => { - if ((!this.maxCount || count < this.maxCount) && (!maxRenderCount || count < maxRenderCount)) { + if ((!this.maxCount || count < this.maxCount) && (!this.maxRenderCount || count < this.maxRenderCount)) { const movieElem = this.getMovieElement(movieData); let shouldRender = false; if (this.looseSearch) { @@ -19788,9 +19792,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { columnsCount = count - 1; } lastRowTop = movieElem.getBoundingClientRect().top; - if (!isScrolledIntoView(movieElem) && !maxRenderCount) { - maxRenderCount = count - 1 + columnsCount * loadAdditionalRowsCount; - console.log(`Set max render count to ${maxRenderCount}`); + if (!isScrolledIntoView(movieElem) && !this.maxRenderCount) { + this.maxRenderCount = count - 1 + columnsCount * loadAdditionalRowsCount; + console.log(`Set max render count to ${this.maxRenderCount}`); } } } @@ -19802,6 +19806,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { const endElem = document.createElement('div'); endElem.className = 'clear'; this.content.appendChild(endElem); + if ((!this.maxCount || count < this.maxCount) && !(!this.maxRenderCount || count < this.maxRenderCount)) { + this.content.appendChild(spinner); + } this.calculatePositions(); this.loadCustomStyles(); }; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 752f00b..fd3c82c 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -13,6 +13,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { plex: Plex | undefined; + maxRenderCount: number | boolean = false; + seasonContainerClickEnabled = true; showDetailsTimeout: any; @@ -179,6 +181,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; renderPage = (): void => { + const spinner = document.createElement('div'); + spinner.style.display = 'flex'; + spinner.style.alignItems = 'center'; + spinner.style.justifyContent = 'center'; + spinner.innerHTML = '
'; if (this.content) { this.content.remove(); } @@ -201,8 +208,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.content.innerHTML += `Library ${escapeHtml(this.config.libraryName)} has no items.`; } else if (this.loading) { this.content.style.padding = '16px 16px 16px'; - this.content.innerHTML += - '
'; + this.content.appendChild(spinner); } this.card.appendChild(this.content); @@ -249,13 +255,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { let rowsRendered = 0; let lastRowTop = 0; let columnsCount = 0; - const keepRendering = true; - let maxRenderCount: any = false; const loadAdditionalRowsCount = 2; // todo: make this configurable // eslint-disable-next-line consistent-return _.forEach(this.data[this.config.libraryName], (movieData: Record) => { - if (keepRendering && (!this.maxCount || count < this.maxCount) && (!maxRenderCount || count < maxRenderCount)) { + if ((!this.maxCount || count < this.maxCount) && (!this.maxRenderCount || count < this.maxRenderCount)) { const movieElem = this.getMovieElement(movieData); let shouldRender = false; if (this.looseSearch) { @@ -283,9 +287,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { } lastRowTop = movieElem.getBoundingClientRect().top; rowsRendered += 1; - if (!isScrolledIntoView(movieElem) && !maxRenderCount) { - maxRenderCount = count - 1 + columnsCount * loadAdditionalRowsCount; - console.log(`Set max render count to ${maxRenderCount}`); + if (!isScrolledIntoView(movieElem) && !this.maxRenderCount) { + this.maxRenderCount = count - 1 + columnsCount * loadAdditionalRowsCount; + console.log(`Set max render count to ${this.maxRenderCount}`); } } } else { @@ -293,10 +297,15 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }); } + const endElem = document.createElement('div'); endElem.className = 'clear'; this.content.appendChild(endElem); + if ((!this.maxCount || count < this.maxCount) && !(!this.maxRenderCount || count < this.maxRenderCount)) { + this.content.appendChild(spinner); + } + this.calculatePositions(); this.loadCustomStyles(); };