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

Write Preview
Loading…
Cancel
Save