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 2 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 &&
this.renderedItems > 0 &&
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.renderMovieElems();
this.calculatePositions();
@ -22373,20 +22375,24 @@ class PlexMeetsHomeAssistant extends HTMLElement {
return searchContainer;
};
this.renderMovieElems = () => {
if (this.data[this.config.libraryName] && this.renderedItems < this.data[this.config.libraryName].length) {
let count = 0;
// eslint-disable-next-line consistent-return
const searchValues = lodash.split(this.searchValue, ' ');
// eslint-disable-next-line consistent-return
let lastRowTop = 0;
const renderElements = (render, hasEpisodesResult, searchValues, itemsPerRow) => {
const origRenderedRows = this.renderedRows;
const origRenderedItems = this.renderedItems;
const origColumnsCount = this.columnsCount;
const loadAdditionalRowsCount = 2; // todo: make this configurable
this.renderedRows = 0;
this.columnsCount = 0;
const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]);
let lastRowTop = 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) => {
if ((!this.maxCount || this.renderedItems < this.maxCount) &&
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
(!this.maxRows || this.renderedRows <= this.maxRows)) {
renderMore =
(!this.maxCount || this.renderedItems < this.maxCount) &&
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
(!this.maxRows || this.renderedRows <= this.maxRows);
if (renderMore) {
const movieElem = this.getMovieElement(movieData, hasEpisodesResult);
let shouldRender = false;
if (this.looseSearch) {
@ -22412,24 +22418,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
shouldRender = true;
}
if (shouldRender) {
count += 1;
count += 1; // keeps track of already rendered items for progressive scroll
if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem);
if (render) {
this.contentContainer.appendChild(movieElem);
}
if (this.useHorizontalScroll) {
const marginRight = 10;
if (lodash.isEmpty(this.contentContainer.style.width)) {
this.contentContainer.style.width = `${parseFloat(movieElem.style.width) + marginRight}px`;
if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
this.renderedRows += 1;
movieElem.style.clear = 'both';
}
else {
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
parseFloat(movieElem.style.width) +
marginRight}px`;
const marginRight = 10;
if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) {
containerWidth += parseFloat(movieElem.style.width) + marginRight;
}
}
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;
@ -22446,6 +22456,42 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
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];
this.contentBGHeight = getHeight(contentbg);
@ -22478,6 +22524,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
}
this.renderedItems = 0;
this.renderedRows = 0;
// this.columnsCount = 0;
const spinner = document.createElement('div');
spinner.style.display = 'flex';
@ -22727,7 +22774,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
break;
}
else {
this.resizeHandler();
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 &&
this.renderedItems > 0 &&
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.renderMovieElems();
@ -272,7 +274,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
}
}
this.renderNewElementsIfNeeded();
});
window.addEventListener('resize', () => {
@ -600,23 +601,32 @@ class PlexMeetsHomeAssistant extends HTMLElement {
};
renderMovieElems = (): void => {
if (this.data[this.config.libraryName] && this.renderedItems < this.data[this.config.libraryName].length) {
let count = 0;
// eslint-disable-next-line consistent-return
const searchValues = _.split(this.searchValue, ' ');
// eslint-disable-next-line consistent-return
let lastRowTop = 0;
const renderElements = (
render: boolean,
hasEpisodesResult: any,
searchValues: Array<string>,
itemsPerRow: number
): Record<string, any> => {
const origRenderedRows = this.renderedRows;
const origRenderedItems = this.renderedItems;
const origColumnsCount = this.columnsCount;
const loadAdditionalRowsCount = 2; // todo: make this configurable
this.renderedRows = 0;
this.columnsCount = 0;
const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]);
let lastRowTop = 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>) => {
if (
renderMore =
(!this.maxCount || this.renderedItems < this.maxCount) &&
(!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);
let shouldRender = false;
if (this.looseSearch) {
@ -644,25 +654,33 @@ class PlexMeetsHomeAssistant extends HTMLElement {
) {
shouldRender = true;
}
if (shouldRender) {
count += 1;
count += 1; // keeps track of already rendered items for progressive scroll
if (count > this.renderedItems) {
this.contentContainer.appendChild(movieElem);
if (render) {
this.contentContainer.appendChild(movieElem);
}
if (this.useHorizontalScroll) {
if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
this.renderedRows += 1;
movieElem.style.clear = 'both';
}
const marginRight = 10;
if (_.isEmpty(this.contentContainer.style.width)) {
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`;
if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) {
containerWidth += parseFloat(movieElem.style.width) + marginRight;
}
}
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,10 +693,54 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.maxRows && this.renderedRows > this.maxRows && !this.useHorizontalScroll) {
movieElem.remove();
}
return true;
}
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;
@ -715,6 +777,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
this.renderedItems = 0;
this.renderedRows = 0;
// this.columnsCount = 0;
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
const setLeftOffsetsInterval = setInterval(() => {
this.movieElems = this.getElementsByClassName('movieElem');
for (let i = 0; i < this.movieElems.length; i += 1) {
if (this.movieElems[i].offsetLeft === 0) {
break;
} else {
this.resizeHandler();
clearInterval(setLeftOffsetsInterval);
}
}

Write Preview
Loading…
Cancel
Save