HomeAssistant
/
PlexMeetsHomeAssistant
mirror of https://github.com/JurajNyiri/PlexMeetsHomeAssistant.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add: Spinner at the end of webpage

Browse Source
pull/16/head
Juraj Nyíri 4 years ago
parent e943055a52
commit 4261b304e3
2 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File

21
dist/plex-meets-homeassistant.js vendored
Unescape View File

@ -19606,6 +19606,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.plexProtocol = 'http'; this.plexProtocol = 'http';
this.maxRenderCount = false;
this.seasonContainerClickEnabled = true; this.seasonContainerClickEnabled = true;
this.looseSearch = false; this.looseSearch = false;
this.movieElems = []; this.movieElems = [];
@ -19696,6 +19697,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
return searchContainer; return searchContainer;
}; };
this.renderPage = () => { this.renderPage = () => {
const spinner = document.createElement('div');
spinner.style.display = 'flex';
spinner.style.alignItems = 'center';
spinner.style.justifyContent = 'center';
spinner.innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
if (this.content) { if (this.content) {
this.content.remove(); this.content.remove();
} }
@ -19717,8 +19723,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
else if (this.loading) { else if (this.loading) {
this.content.style.padding = '16px 16px 16px'; this.content.style.padding = '16px 16px 16px';
this.content.innerHTML += this.content.appendChild(spinner);
'<div style="display: flex; align-items: center; justify-content: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>';
} }
this.card.appendChild(this.content); this.card.appendChild(this.content);
let count = 0; let count = 0;
@ -19756,11 +19761,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const searchValues = lodash.split(this.searchValue, ' '); const searchValues = lodash.split(this.searchValue, ' ');
let lastRowTop = 0; let lastRowTop = 0;
let columnsCount = 0; let columnsCount = 0;
let maxRenderCount = false;
const loadAdditionalRowsCount = 2; // todo: make this configurable const loadAdditionalRowsCount = 2; // todo: make this configurable
// eslint-disable-next-line consistent-return // eslint-disable-next-line consistent-return
lodash.forEach(this.data[this.config.libraryName], (movieData) => { 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); const movieElem = this.getMovieElement(movieData);
let shouldRender = false; let shouldRender = false;
if (this.looseSearch) { if (this.looseSearch) {
@ -19788,9 +19792,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
columnsCount = count - 1; columnsCount = count - 1;
} }
lastRowTop = movieElem.getBoundingClientRect().top; lastRowTop = movieElem.getBoundingClientRect().top;
if (!isScrolledIntoView(movieElem) && !maxRenderCount) { if (!isScrolledIntoView(movieElem) && !this.maxRenderCount) {
maxRenderCount = count - 1 + columnsCount * loadAdditionalRowsCount; this.maxRenderCount = count - 1 + columnsCount * loadAdditionalRowsCount;
console.log(`Set max render count to ${maxRenderCount}`); console.log(`Set max render count to ${this.maxRenderCount}`);
} }
} }
} }
@ -19802,6 +19806,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const endElem = document.createElement('div'); const endElem = document.createElement('div');
endElem.className = 'clear'; endElem.className = 'clear';
this.content.appendChild(endElem); this.content.appendChild(endElem);
if ((!this.maxCount || count < this.maxCount) && !(!this.maxRenderCount || count < this.maxRenderCount)) {
this.content.appendChild(spinner);
}
this.calculatePositions(); this.calculatePositions();
this.loadCustomStyles(); this.loadCustomStyles();
}; };

25
src/plex-meets-homeassistant.ts
Unescape View File

@ -13,6 +13,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
plex: Plex | undefined; plex: Plex | undefined;
maxRenderCount: number | boolean = false;
seasonContainerClickEnabled = true; seasonContainerClickEnabled = true;
showDetailsTimeout: any; showDetailsTimeout: any;
@ -179,6 +181,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
renderPage = (): void => { renderPage = (): void => {
const spinner = document.createElement('div');
spinner.style.display = 'flex';
spinner.style.alignItems = 'center';
spinner.style.justifyContent = 'center';
spinner.innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
if (this.content) { if (this.content) {
this.content.remove(); this.content.remove();
} }
@ -201,8 +208,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.content.innerHTML += `Library ${escapeHtml(this.config.libraryName)} has no items.`; this.content.innerHTML += `Library ${escapeHtml(this.config.libraryName)} has no items.`;
} else if (this.loading) { } else if (this.loading) {
this.content.style.padding = '16px 16px 16px'; this.content.style.padding = '16px 16px 16px';
this.content.innerHTML += this.content.appendChild(spinner);
'<div style="display: flex; align-items: center; justify-content: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>';
} }
this.card.appendChild(this.content); this.card.appendChild(this.content);
@ -249,13 +255,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
let rowsRendered = 0; let rowsRendered = 0;
let lastRowTop = 0; let lastRowTop = 0;
let columnsCount = 0; let columnsCount = 0;
const keepRendering = true;
let maxRenderCount: any = false;
const loadAdditionalRowsCount = 2; // todo: make this configurable const loadAdditionalRowsCount = 2; // todo: make this configurable
// eslint-disable-next-line consistent-return // eslint-disable-next-line consistent-return
_.forEach(this.data[this.config.libraryName], (movieData: Record<string, any>) => { _.forEach(this.data[this.config.libraryName], (movieData: Record<string, any>) => {
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); const movieElem = this.getMovieElement(movieData);
let shouldRender = false; let shouldRender = false;
if (this.looseSearch) { if (this.looseSearch) {
@ -283,9 +287,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
lastRowTop = movieElem.getBoundingClientRect().top; lastRowTop = movieElem.getBoundingClientRect().top;
rowsRendered += 1; rowsRendered += 1;
if (!isScrolledIntoView(movieElem) && !maxRenderCount) { if (!isScrolledIntoView(movieElem) && !this.maxRenderCount) {
maxRenderCount = count - 1 + columnsCount * loadAdditionalRowsCount; this.maxRenderCount = count - 1 + columnsCount * loadAdditionalRowsCount;
console.log(`Set max render count to ${maxRenderCount}`); console.log(`Set max render count to ${this.maxRenderCount}`);
} }
} }
} else { } else {
@ -293,10 +297,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}); });
} }
const endElem = document.createElement('div'); const endElem = document.createElement('div');
endElem.className = 'clear'; endElem.className = 'clear';
this.content.appendChild(endElem); this.content.appendChild(endElem);
if ((!this.maxCount || count < this.maxCount) && !(!this.maxRenderCount || count < this.maxRenderCount)) {
this.content.appendChild(spinner);
}
this.calculatePositions(); this.calculatePositions();
this.loadCustomStyles(); this.loadCustomStyles();
}; };

Write Preview
Loading…
Cancel
Save