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

Merge pull request #72 from JurajNyiri/maxHorizontalRows

Browse Source 
3.6
main 3.6
Juraj Nyíri 3 years ago committed by GitHub
parent 2dd99a6ba9 9e006ae6fa
commit b9e732ec7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 157 additions and 48 deletions
Show Stats Download Patch File Download Diff File

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

@ -21984,7 +21984,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 && window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 &&
this.renderedItems > 0 && this.renderedItems > 0 &&
this.renderedItems < this.data[this.config.libraryName].length && this.renderedItems < this.data[this.config.libraryName].length &&
(!this.maxRows || this.renderedRows < this.config.maxRows)) { (!this.maxCount || this.renderedItems < this.maxCount) &&
(!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();
@ -22373,20 +22375,24 @@ class PlexMeetsHomeAssistant extends HTMLElement {
return searchContainer; return searchContainer;
}; };
this.renderMovieElems = () => { this.renderMovieElems = () => {
if (this.data[this.config.libraryName] && this.renderedItems < this.data[this.config.libraryName].length) { const renderElements = (render, hasEpisodesResult, searchValues, itemsPerRow) => {
let count = 0; const origRenderedRows = this.renderedRows;
// eslint-disable-next-line consistent-return const origRenderedItems = this.renderedItems;
const searchValues = lodash.split(this.searchValue, ' '); const origColumnsCount = this.columnsCount;
// eslint-disable-next-line consistent-return
let lastRowTop = 0;
const loadAdditionalRowsCount = 2; // todo: make this configurable const loadAdditionalRowsCount = 2; // todo: make this configurable
this.renderedRows = 0; let lastRowTop = 0;
this.columnsCount = 0; this.contentContainer.style.width = '';
const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]); 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) => { lodash.forEach(this.data[this.config.libraryName], (movieData) => {
if ((!this.maxCount || this.renderedItems < this.maxCount) && renderMore =
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) && (!this.maxCount || this.renderedItems < this.maxCount) &&
(!this.maxRows || this.renderedRows <= this.maxRows)) { (!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
(!this.maxRows || this.renderedRows <= this.maxRows);
if (renderMore) {
const movieElem = this.getMovieElement(movieData, hasEpisodesResult); const movieElem = this.getMovieElement(movieData, hasEpisodesResult);
let shouldRender = false; let shouldRender = false;
if (this.looseSearch) { if (this.looseSearch) {
@ -22412,24 +22418,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
shouldRender = true; shouldRender = true;
} }
if (shouldRender) { if (shouldRender) {
count += 1; count += 1; // keeps track of already rendered items for progressive scroll
if (count > this.renderedItems) { if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem); if (render) {
this.contentContainer.appendChild(movieElem);
}
if (this.useHorizontalScroll) { if (this.useHorizontalScroll) {
const marginRight = 10; if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
if (lodash.isEmpty(this.contentContainer.style.width)) { this.renderedRows += 1;
this.contentContainer.style.width = `${parseFloat(movieElem.style.width) + marginRight}px`; movieElem.style.clear = 'both';
} }
else { const marginRight = 10;
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) + if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) {
parseFloat(movieElem.style.width) + containerWidth += parseFloat(movieElem.style.width) + marginRight;
marginRight}px`;
} }
} }
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;
@ -22446,6 +22456,42 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
return false; return false;
}); });
const returnObj = {
renderedItems: this.renderedItems
};
if (!render) {
this.renderedRows = origRenderedRows;
this.renderedItems = origRenderedItems;
this.columnsCount = origColumnsCount;
}
if (render && containerWidth > 0) {
this.contentContainer.style.width = `${containerWidth}px`;
}
return returnObj;
};
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);
@ -22478,6 +22524,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
} }
this.renderedItems = 0; this.renderedItems = 0;
this.renderedRows = 0;
// this.columnsCount = 0; // this.columnsCount = 0;
const spinner = document.createElement('div'); const spinner = document.createElement('div');
spinner.style.display = 'flex'; spinner.style.display = 'flex';
@ -22727,7 +22774,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
break; break;
} }
else { else {
this.resizeHandler();
clearInterval(setLeftOffsetsInterval); clearInterval(setLeftOffsetsInterval);
} }
} }

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

@ -191,7 +191,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 && window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 &&
this.renderedItems > 0 && this.renderedItems > 0 &&
this.renderedItems < this.data[this.config.libraryName].length && this.renderedItems < this.data[this.config.libraryName].length &&
(!this.maxRows || this.renderedRows < this.config.maxRows) (!this.maxCount || this.renderedItems < this.maxCount) &&
(!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();
@ -272,7 +274,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
} }
} }
this.renderNewElementsIfNeeded(); this.renderNewElementsIfNeeded();
}); });
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
@ -600,23 +601,32 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
renderMovieElems = (): void => { renderMovieElems = (): void => {
if (this.data[this.config.libraryName] && this.renderedItems < this.data[this.config.libraryName].length) { const renderElements = (
let count = 0; render: boolean,
// eslint-disable-next-line consistent-return hasEpisodesResult: any,
const searchValues = _.split(this.searchValue, ' '); searchValues: Array<string>,
// eslint-disable-next-line consistent-return itemsPerRow: number
let lastRowTop = 0; ): Record<string, any> => {
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
this.renderedRows = 0; let lastRowTop = 0;
this.columnsCount = 0; this.contentContainer.style.width = '';
const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]); 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>) => { _.forEach(this.data[this.config.libraryName], (movieData: Record<string, any>) => {
if ( 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);
) { if (renderMore) {
const movieElem = this.getMovieElement(movieData, hasEpisodesResult); const movieElem = this.getMovieElement(movieData, hasEpisodesResult);
let shouldRender = false; let shouldRender = false;
if (this.looseSearch) { if (this.looseSearch) {
@ -644,25 +654,33 @@ class PlexMeetsHomeAssistant extends HTMLElement {
) { ) {
shouldRender = true; shouldRender = true;
} }
if (shouldRender) { if (shouldRender) {
count += 1; count += 1; // keeps track of already rendered items for progressive scroll
if (count > this.renderedItems) { if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem); if (render) {
this.contentContainer.appendChild(movieElem);
}
if (this.useHorizontalScroll) { if (this.useHorizontalScroll) {
if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
this.renderedRows += 1;
movieElem.style.clear = 'both';
}
const marginRight = 10; const marginRight = 10;
if (_.isEmpty(this.contentContainer.style.width)) { if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) {
this.contentContainer.style.width = `${parseFloat(movieElem.style.width) + marginRight}px`; containerWidth += parseFloat(movieElem.style.width) + marginRight;
} else {
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
parseFloat(movieElem.style.width) +
marginRight}px`;
} }
} }
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,10 +693,54 @@ class PlexMeetsHomeAssistant extends HTMLElement {
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;
}); });
const returnObj = {
renderedItems: this.renderedItems
};
if (!render) {
this.renderedRows = origRenderedRows;
this.renderedItems = origRenderedItems;
this.columnsCount = origColumnsCount;
}
if (render && containerWidth > 0) {
this.contentContainer.style.width = `${containerWidth}px`;
}
return returnObj;
};
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;
@ -715,6 +777,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
this.renderedItems = 0; this.renderedItems = 0;
this.renderedRows = 0;
// this.columnsCount = 0; // this.columnsCount = 0;
const spinner = document.createElement('div'); const spinner = document.createElement('div');
@ -989,11 +1052,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
// todo: figure out why interval is needed here and do it properly // todo: figure out why interval is needed here and do it properly
const setLeftOffsetsInterval = setInterval(() => { const setLeftOffsetsInterval = setInterval(() => {
this.movieElems = this.getElementsByClassName('movieElem'); this.movieElems = this.getElementsByClassName('movieElem');
for (let i = 0; i < this.movieElems.length; i += 1) { for (let i = 0; i < this.movieElems.length; i += 1) {
if (this.movieElems[i].offsetLeft === 0) { if (this.movieElems[i].offsetLeft === 0) {
break; break;
} else { } else {
this.resizeHandler();
clearInterval(setLeftOffsetsInterval); clearInterval(setLeftOffsetsInterval);
} }
} }

Write Preview
Loading…
Cancel
Save