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

Fix: Search with horizontal scroll and improve performance

Browse Source
pull/72/head
Juraj Nyíri 3 years ago
parent 5aae117116
commit 241be6a70d
2 changed files with 97 additions and 63 deletions
Show Stats Download Patch File Download Diff File

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

@ -21978,7 +21978,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.contentBGHeight = 0; this.contentBGHeight = 0;
this.initialDataLoaded = false; this.initialDataLoaded = false;
this.renderNewElementsIfNeeded = () => { this.renderNewElementsIfNeeded = () => {
console.log('renderNewElementsIfNeeded');
const loadAdditionalRowsCount = 2; // todo: make this configurable const loadAdditionalRowsCount = 2; // todo: make this configurable
const height = getHeight(this.content); const height = getHeight(this.content);
if (!this.detailsShown && if (!this.detailsShown &&
@ -22375,29 +22374,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
return searchContainer; return searchContainer;
}; };
this.renderMovieElems = () => { 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 const loadAdditionalRowsCount = 2; // todo: make this configurable
let lastRowTop = 0;
this.renderedRows = 0; this.renderedRows = 0;
this.renderedItems = 0;
this.columnsCount = 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) => { lodash.forEach(this.data[this.config.libraryName], (movieData) => {
renderMore = renderMore =
(!this.maxCount || this.renderedItems < this.maxCount) && (!this.maxCount || this.renderedItems < this.maxCount) &&
@ -22429,7 +22416,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
shouldRender = true; shouldRender = true;
} }
if (shouldRender) { if (shouldRender) {
this.contentContainer.appendChild(movieElem); if (render) {
this.contentContainer.appendChild(movieElem);
}
if (this.useHorizontalScroll) { if (this.useHorizontalScroll) {
if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) { if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
this.renderedRows += 1; this.renderedRows += 1;
@ -22437,14 +22426,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
const marginRight = 10; const marginRight = 10;
if (this.renderedRows === 1 || !this.maxRows || this.maxRows < 2) { 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; this.renderedItems += 1;
@ -22466,6 +22448,36 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
return false; 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]; const contentbg = this.getElementsByClassName('contentbg')[0];
this.contentBGHeight = getHeight(contentbg); this.contentBGHeight = getHeight(contentbg);

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

@ -184,7 +184,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
renderNewElementsIfNeeded = (): void => { renderNewElementsIfNeeded = (): void => {
console.log('renderNewElementsIfNeeded');
const loadAdditionalRowsCount = 2; // todo: make this configurable const loadAdditionalRowsCount = 2; // todo: make this configurable
const height = getHeight(this.content); const height = getHeight(this.content);
if ( if (
@ -601,33 +600,23 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
renderMovieElems = (): void => { renderMovieElems = (): void => {
let renderMore = const renderElements = (
(!this.maxCount || this.renderedItems < this.maxCount) && render: boolean,
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) && hasEpisodesResult: any,
(!this.maxRows || this.renderedRows <= this.maxRows); searchValues: Array<string>,
if ( itemsPerRow: number
this.data[this.config.libraryName] && ): Record<string, any> => {
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 const loadAdditionalRowsCount = 2; // todo: make this configurable
let lastRowTop = 0;
this.renderedRows = 0; this.renderedRows = 0;
this.renderedItems = 0;
this.columnsCount = 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<string, any>) => { _.forEach(this.data[this.config.libraryName], (movieData: Record<string, any>) => {
renderMore = renderMore =
(!this.maxCount || this.renderedItems < this.maxCount) && (!this.maxCount || this.renderedItems < this.maxCount) &&
@ -662,7 +651,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
shouldRender = true; shouldRender = true;
} }
if (shouldRender) { if (shouldRender) {
this.contentContainer.appendChild(movieElem); if (render) {
this.contentContainer.appendChild(movieElem);
}
if (this.useHorizontalScroll) { if (this.useHorizontalScroll) {
if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) { if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
this.renderedRows += 1; this.renderedRows += 1;
@ -670,13 +661,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
const marginRight = 10; const marginRight = 10;
if (this.renderedRows === 1 || !this.maxRows || this.maxRows < 2) { 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; 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; const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement;

Write Preview
Loading…
Cancel
Save