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() {
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 = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
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 +=
'<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.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();
};

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

@ -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 = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
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 +=
'<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.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<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);
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();
};

Write Preview
Loading…
Cancel
Save