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

Fix: Progressive scroll repeating items

Browse Source
pull/72/head
Juraj Nyíri 3 years ago
parent 87cc39d051
commit 48a3f64a08
2 changed files with 71 additions and 33 deletions
Show Stats Download Patch File Download Diff File

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

@ -21985,7 +21985,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.renderedItems > 0 && this.renderedItems > 0 &&
this.renderedItems < this.data[this.config.libraryName].length && this.renderedItems < this.data[this.config.libraryName].length &&
(!this.maxCount || this.renderedItems < this.maxCount) && (!this.maxCount || this.renderedItems < this.maxCount) &&
(!this.maxRows || this.renderedRows < this.config.maxRows)) { (!this.maxRows || this.renderedRows < this.config.maxRows) &&
lodash.isEmpty(this.searchValue)) {
this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2); this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2);
this.renderMovieElems(); this.renderMovieElems();
this.calculatePositions(); this.calculatePositions();
@ -22374,17 +22375,20 @@ class PlexMeetsHomeAssistant extends HTMLElement {
return searchContainer; return searchContainer;
}; };
this.renderMovieElems = () => { this.renderMovieElems = () => {
console.log('renderMovieElems');
const renderElements = (render, hasEpisodesResult, searchValues, itemsPerRow) => { const renderElements = (render, hasEpisodesResult, searchValues, itemsPerRow) => {
console.log('renderElements');
const origRenderedRows = this.renderedRows;
const origRenderedItems = this.renderedItems;
const origColumnsCount = this.columnsCount;
const loadAdditionalRowsCount = 2; // todo: make this configurable const loadAdditionalRowsCount = 2; // todo: make this configurable
let lastRowTop = 0; let lastRowTop = 0;
this.renderedRows = 0;
this.renderedItems = 0;
this.columnsCount = 0;
this.contentContainer.style.width = ''; this.contentContainer.style.width = '';
let containerWidth = 0; let containerWidth = 0;
let renderMore = (!this.maxCount || this.renderedItems < this.maxCount) && let renderMore = (!this.maxCount || this.renderedItems < this.maxCount) &&
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) && (!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
(!this.maxRows || this.renderedRows <= this.maxRows); (!this.maxRows || this.renderedRows <= this.maxRows);
let count = 0;
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) &&
@ -22416,22 +22420,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
shouldRender = true; shouldRender = true;
} }
if (shouldRender) { if (shouldRender) {
if (render) { count += 1; // keeps track of already rendered items for progressive scroll
this.contentContainer.appendChild(movieElem); if (count > this.renderedItems) {
} if (render) {
if (this.useHorizontalScroll) { this.contentContainer.appendChild(movieElem);
if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
this.renderedRows += 1;
movieElem.style.clear = 'both';
} }
const marginRight = 10; if (this.useHorizontalScroll) {
if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) { if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
containerWidth += parseFloat(movieElem.style.width) + marginRight; this.renderedRows += 1;
movieElem.style.clear = 'both';
}
const marginRight = 10;
if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) {
containerWidth += parseFloat(movieElem.style.width) + marginRight;
}
} }
this.renderedItems += 1;
} }
this.renderedItems += 1;
} }
if (shouldRender && lastRowTop !== movieElem.getBoundingClientRect().top && !this.useHorizontalScroll) { if (render &&
shouldRender &&
lastRowTop !== movieElem.getBoundingClientRect().top &&
!this.useHorizontalScroll) {
this.renderedRows += 1; this.renderedRows += 1;
if (lastRowTop !== 0 && this.columnsCount === 0) { if (lastRowTop !== 0 && this.columnsCount === 0) {
this.columnsCount = this.renderedItems - 1; this.columnsCount = this.renderedItems - 1;
@ -22439,6 +22449,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
lastRowTop = movieElem.getBoundingClientRect().top; lastRowTop = movieElem.getBoundingClientRect().top;
if (!isScrolledIntoView(movieElem) && !this.maxRenderCount && this.renderedItems > 0) { if (!isScrolledIntoView(movieElem) && !this.maxRenderCount && this.renderedItems > 0) {
this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * loadAdditionalRowsCount; this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * loadAdditionalRowsCount;
console.log(`1: this.maxRenderCount = ${this.maxRenderCount}`);
} }
} }
if (this.maxRows && this.renderedRows > this.maxRows && !this.useHorizontalScroll) { if (this.maxRows && this.renderedRows > this.maxRows && !this.useHorizontalScroll) {
@ -22448,6 +22459,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
return false; return false;
}); });
if (!render) {
this.renderedRows = origRenderedRows;
this.renderedItems = origRenderedItems;
this.columnsCount = origColumnsCount;
}
if (render && containerWidth > 0) { if (render && containerWidth > 0) {
this.contentContainer.style.width = `${containerWidth}px`; this.contentContainer.style.width = `${containerWidth}px`;
} }

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

@ -192,7 +192,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.renderedItems > 0 && this.renderedItems > 0 &&
this.renderedItems < this.data[this.config.libraryName].length && this.renderedItems < this.data[this.config.libraryName].length &&
(!this.maxCount || this.renderedItems < this.maxCount) && (!this.maxCount || this.renderedItems < this.maxCount) &&
(!this.maxRows || this.renderedRows < this.config.maxRows) (!this.maxRows || this.renderedRows < this.config.maxRows) &&
_.isEmpty(this.searchValue)
) { ) {
this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2); this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2);
this.renderMovieElems(); this.renderMovieElems();
@ -600,23 +601,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
renderMovieElems = (): void => { renderMovieElems = (): void => {
console.log('renderMovieElems');
const renderElements = ( const renderElements = (
render: boolean, render: boolean,
hasEpisodesResult: any, hasEpisodesResult: any,
searchValues: Array<string>, searchValues: Array<string>,
itemsPerRow: number itemsPerRow: number
): Record<string, any> => { ): Record<string, any> => {
console.log('renderElements');
const origRenderedRows = this.renderedRows;
const origRenderedItems = this.renderedItems;
const origColumnsCount = this.columnsCount;
const loadAdditionalRowsCount = 2; // todo: make this configurable const loadAdditionalRowsCount = 2; // todo: make this configurable
let lastRowTop = 0; let lastRowTop = 0;
this.renderedRows = 0;
this.renderedItems = 0;
this.columnsCount = 0;
this.contentContainer.style.width = ''; this.contentContainer.style.width = '';
let containerWidth = 0; let containerWidth = 0;
let renderMore = let renderMore =
(!this.maxCount || this.renderedItems < this.maxCount) && (!this.maxCount || this.renderedItems < this.maxCount) &&
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) && (!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
(!this.maxRows || this.renderedRows <= this.maxRows); (!this.maxRows || this.renderedRows <= this.maxRows);
let count = 0;
_.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) &&
@ -650,24 +656,33 @@ class PlexMeetsHomeAssistant extends HTMLElement {
) { ) {
shouldRender = true; shouldRender = true;
} }
if (shouldRender) { if (shouldRender) {
if (render) { count += 1; // keeps track of already rendered items for progressive scroll
this.contentContainer.appendChild(movieElem); if (count > this.renderedItems) {
} if (render) {
if (this.useHorizontalScroll) { this.contentContainer.appendChild(movieElem);
if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
this.renderedRows += 1;
movieElem.style.clear = 'both';
} }
const marginRight = 10; if (this.useHorizontalScroll) {
if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) { if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
containerWidth += parseFloat(movieElem.style.width) + marginRight; this.renderedRows += 1;
movieElem.style.clear = 'both';
}
const marginRight = 10;
if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) {
containerWidth += parseFloat(movieElem.style.width) + marginRight;
}
} }
}
this.renderedItems += 1; this.renderedItems += 1;
}
} }
if (shouldRender && lastRowTop !== movieElem.getBoundingClientRect().top && !this.useHorizontalScroll) { if (
render &&
shouldRender &&
lastRowTop !== movieElem.getBoundingClientRect().top &&
!this.useHorizontalScroll
) {
this.renderedRows += 1; this.renderedRows += 1;
if (lastRowTop !== 0 && this.columnsCount === 0) { if (lastRowTop !== 0 && this.columnsCount === 0) {
this.columnsCount = this.renderedItems - 1; this.columnsCount = this.renderedItems - 1;
@ -675,15 +690,22 @@ class PlexMeetsHomeAssistant extends HTMLElement {
lastRowTop = movieElem.getBoundingClientRect().top; lastRowTop = movieElem.getBoundingClientRect().top;
if (!isScrolledIntoView(movieElem) && !this.maxRenderCount && this.renderedItems > 0) { if (!isScrolledIntoView(movieElem) && !this.maxRenderCount && this.renderedItems > 0) {
this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * loadAdditionalRowsCount; this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * loadAdditionalRowsCount;
console.log(`1: this.maxRenderCount = ${this.maxRenderCount}`);
} }
} }
if (this.maxRows && this.renderedRows > this.maxRows && !this.useHorizontalScroll) { if (this.maxRows && this.renderedRows > this.maxRows && !this.useHorizontalScroll) {
movieElem.remove(); movieElem.remove();
} }
return true; return true;
} }
return false; return false;
}); });
if (!render) {
this.renderedRows = origRenderedRows;
this.renderedItems = origRenderedItems;
this.columnsCount = origColumnsCount;
}
if (render && containerWidth > 0) { if (render && containerWidth > 0) {
this.contentContainer.style.width = `${containerWidth}px`; this.contentContainer.style.width = `${containerWidth}px`;
} }

Write Preview
Loading…
Cancel
Save