Skip to content

Commit b9e732e

Browse files
JurajNyiriJurajNyiri
authored
Merge pull request #72 from JurajNyiri/maxHorizontalRows
3.6
2 parents 2dd99a6 + 9e006ae commit b9e732e

File tree

2 files changed

+157
-48
lines changed

2 files changed

+157
-48
lines changed

‎dist/plex-meets-homeassistant.js‎

Lines changed: 70 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21984,7 +21984,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
2198421984
window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 &&
2198521985
this.renderedItems > 0 &&
2198621986
this.renderedItems < this.data[this.config.libraryName].length &&
21987-
(!this.maxRows || this.renderedRows < this.config.maxRows)) {
21987+
(!this.maxCount || this.renderedItems < this.maxCount) &&
21988+
(!this.maxRows || this.renderedRows < this.config.maxRows) &&
21989+
lodash.isEmpty(this.searchValue)) {
2198821990
this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2);
2198921991
this.renderMovieElems();
2199021992
this.calculatePositions();
@@ -22373,20 +22375,24 @@ class PlexMeetsHomeAssistant extends HTMLElement {
2237322375
return searchContainer;
2237422376
};
2237522377
this.renderMovieElems = () => {
22376-
if (this.data[this.config.libraryName] && this.renderedItems < this.data[this.config.libraryName].length) {
22377-
let count = 0;
22378-
// eslint-disable-next-line consistent-return
22379-
const searchValues = lodash.split(this.searchValue, ' ');
22380-
// eslint-disable-next-line consistent-return
22381-
let lastRowTop = 0;
22378+
const renderElements = (render, hasEpisodesResult, searchValues, itemsPerRow) => {
22379+
const origRenderedRows = this.renderedRows;
22380+
const origRenderedItems = this.renderedItems;
22381+
const origColumnsCount = this.columnsCount;
2238222382
const loadAdditionalRowsCount = 2; // todo: make this configurable
22383-
this.renderedRows = 0;
22384-
this.columnsCount = 0;
22385-
const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]);
22383+
let lastRowTop = 0;
22384+
this.contentContainer.style.width = '';
22385+
let containerWidth = 0;
22386+
let renderMore = (!this.maxCount || this.renderedItems < this.maxCount) &&
22387+
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
22388+
(!this.maxRows || this.renderedRows <= this.maxRows);
22389+
let count = 0;
2238622390
lodash.forEach(this.data[this.config.libraryName], (movieData) => {
22387-
if ((!this.maxCount || this.renderedItems < this.maxCount) &&
22388-
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
22389-
(!this.maxRows || this.renderedRows <= this.maxRows)) {
22391+
renderMore =
22392+
(!this.maxCount || this.renderedItems < this.maxCount) &&
22393+
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
22394+
(!this.maxRows || this.renderedRows <= this.maxRows);
22395+
if (renderMore) {
2239022396
const movieElem = this.getMovieElement(movieData, hasEpisodesResult);
2239122397
let shouldRender = false;
2239222398
if (this.looseSearch) {
@@ -22412,24 +22418,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
2241222418
shouldRender = true;
2241322419
}
2241422420
if (shouldRender) {
22415-
count += 1;
22421+
count += 1; // keeps track of already rendered items for progressive scroll
2241622422
if (count > this.renderedItems) {
22417-
this.contentContainer.appendChild(movieElem);
22423+
if (render) {
22424+
this.contentContainer.appendChild(movieElem);
22425+
}
2241822426
if (this.useHorizontalScroll) {
22419-
const marginRight = 10;
22420-
if (lodash.isEmpty(this.contentContainer.style.width)) {
22421-
this.contentContainer.style.width = `${parseFloat(movieElem.style.width) + marginRight}px`;
22427+
if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
22428+
this.renderedRows += 1;
22429+
movieElem.style.clear = 'both';
2242222430
}
22423-
else {
22424-
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
22425-
parseFloat(movieElem.style.width) +
22426-
marginRight}px`;
22431+
const marginRight = 10;
22432+
if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) {
22433+
containerWidth += parseFloat(movieElem.style.width) + marginRight;
2242722434
}
2242822435
}
2242922436
this.renderedItems += 1;
2243022437
}
2243122438
}
22432-
if (shouldRender && lastRowTop !== movieElem.getBoundingClientRect().top && !this.useHorizontalScroll) {
22439+
if (render &&
22440+
shouldRender &&
22441+
lastRowTop !== movieElem.getBoundingClientRect().top &&
22442+
!this.useHorizontalScroll) {
2243322443
this.renderedRows += 1;
2243422444
if (lastRowTop !== 0 && this.columnsCount === 0) {
2243522445
this.columnsCount = this.renderedItems - 1;
@@ -22446,6 +22456,42 @@ class PlexMeetsHomeAssistant extends HTMLElement {
2244622456
}
2244722457
return false;
2244822458
});
22459+
const returnObj = {
22460+
renderedItems: this.renderedItems
22461+
};
22462+
if (!render) {
22463+
this.renderedRows = origRenderedRows;
22464+
this.renderedItems = origRenderedItems;
22465+
this.columnsCount = origColumnsCount;
22466+
}
22467+
if (render && containerWidth > 0) {
22468+
this.contentContainer.style.width = `${containerWidth}px`;
22469+
}
22470+
return returnObj;
22471+
};
22472+
const renderMore = (!this.maxCount || this.renderedItems < this.maxCount) &&
22473+
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
22474+
(!this.maxRows || this.renderedRows <= this.maxRows);
22475+
if (this.data[this.config.libraryName] &&
22476+
this.renderedItems < this.data[this.config.libraryName].length &&
22477+
renderMore) {
22478+
let maxRenderedItems = this.data[this.config.libraryName].length;
22479+
let itemsPerRow = this.data[this.config.libraryName].length;
22480+
if (this.maxCount) {
22481+
maxRenderedItems = this.maxCount;
22482+
}
22483+
itemsPerRow = maxRenderedItems;
22484+
if (this.maxRows) {
22485+
itemsPerRow = Math.ceil(maxRenderedItems / this.maxRows);
22486+
}
22487+
const searchValues = lodash.split(this.searchValue, ' ');
22488+
const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]);
22489+
const { renderedItems } = renderElements(false, hasEpisodesResult, searchValues, itemsPerRow);
22490+
itemsPerRow = renderedItems;
22491+
if (this.maxRows) {
22492+
itemsPerRow = Math.ceil(renderedItems / this.maxRows);
22493+
}
22494+
renderElements(true, hasEpisodesResult, searchValues, itemsPerRow);
2244922495
}
2245022496
const contentbg = this.getElementsByClassName('contentbg')[0];
2245122497
this.contentBGHeight = getHeight(contentbg);
@@ -22478,6 +22524,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
2247822524
}
2247922525
}
2248022526
this.renderedItems = 0;
22527+
this.renderedRows = 0;
2248122528
// this.columnsCount = 0;
2248222529
const spinner = document.createElement('div');
2248322530
spinner.style.display = 'flex';
@@ -22727,7 +22774,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
2272722774
break;
2272822775
}
2272922776
else {
22730-
this.resizeHandler();
2273122777
clearInterval(setLeftOffsetsInterval);
2273222778
}
2273322779
}

‎src/plex-meets-homeassistant.ts‎

Lines changed: 87 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
191191
window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 &&
192192
this.renderedItems > 0 &&
193193
this.renderedItems < this.data[this.config.libraryName].length &&
194-
(!this.maxRows || this.renderedRows < this.config.maxRows)
194+
(!this.maxCount || this.renderedItems < this.maxCount) &&
195+
(!this.maxRows || this.renderedRows < this.config.maxRows) &&
196+
_.isEmpty(this.searchValue)
195197
) {
196198
this.maxRenderCount = this.renderedItems + this.columnsCount * (loadAdditionalRowsCount * 2);
197199
this.renderMovieElems();
@@ -272,7 +274,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
272274
}
273275
}
274276
}
275-
276277
this.renderNewElementsIfNeeded();
277278
});
278279
window.addEventListener('resize', () => {
@@ -600,23 +601,32 @@ class PlexMeetsHomeAssistant extends HTMLElement {
600601
};
601602

602603
renderMovieElems = (): void => {
603-
if (this.data[this.config.libraryName] && this.renderedItems < this.data[this.config.libraryName].length) {
604-
let count = 0;
605-
// eslint-disable-next-line consistent-return
606-
const searchValues = _.split(this.searchValue, ' ');
607-
// eslint-disable-next-line consistent-return
608-
let lastRowTop = 0;
604+
const renderElements = (
605+
render: boolean,
606+
hasEpisodesResult: any,
607+
searchValues: Array<string>,
608+
itemsPerRow: number
609+
): Record<string, any> => {
610+
const origRenderedRows = this.renderedRows;
611+
const origRenderedItems = this.renderedItems;
612+
const origColumnsCount = this.columnsCount;
609613

610614
const loadAdditionalRowsCount = 2; // todo: make this configurable
611-
this.renderedRows = 0;
612-
this.columnsCount = 0;
613-
const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]);
615+
let lastRowTop = 0;
616+
this.contentContainer.style.width = '';
617+
let containerWidth = 0;
618+
let renderMore =
619+
(!this.maxCount || this.renderedItems < this.maxCount) &&
620+
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
621+
(!this.maxRows || this.renderedRows <= this.maxRows);
622+
623+
let count = 0;
614624
_.forEach(this.data[this.config.libraryName], (movieData: Record<string, any>) => {
615-
if (
625+
renderMore =
616626
(!this.maxCount || this.renderedItems < this.maxCount) &&
617627
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
618-
(!this.maxRows || this.renderedRows <= this.maxRows)
619-
) {
628+
(!this.maxRows || this.renderedRows <= this.maxRows);
629+
if (renderMore) {
620630
const movieElem = this.getMovieElement(movieData, hasEpisodesResult);
621631
let shouldRender = false;
622632
if (this.looseSearch) {
@@ -644,25 +654,33 @@ class PlexMeetsHomeAssistant extends HTMLElement {
644654
) {
645655
shouldRender = true;
646656
}
657+
647658
if (shouldRender) {
648-
count += 1;
659+
count += 1; // keeps track of already rendered items for progressive scroll
649660
if (count > this.renderedItems) {
650-
this.contentContainer.appendChild(movieElem);
661+
if (render) {
662+
this.contentContainer.appendChild(movieElem);
663+
}
651664
if (this.useHorizontalScroll) {
665+
if (this.renderedItems > 0 && this.renderedItems % itemsPerRow === 0) {
666+
this.renderedRows += 1;
667+
movieElem.style.clear = 'both';
668+
}
652669
const marginRight = 10;
653-
if (_.isEmpty(this.contentContainer.style.width)) {
654-
this.contentContainer.style.width = `${parseFloat(movieElem.style.width) + marginRight}px`;
655-
} else {
656-
this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) +
657-
parseFloat(movieElem.style.width) +
658-
marginRight}px`;
670+
if (this.renderedRows < 2 || !this.maxRows || this.maxRows < 2) {
671+
containerWidth += parseFloat(movieElem.style.width) + marginRight;
659672
}
660673
}
661674

662675
this.renderedItems += 1;
663676
}
664677
}
665-
if (shouldRender && lastRowTop !== movieElem.getBoundingClientRect().top && !this.useHorizontalScroll) {
678+
if (
679+
render &&
680+
shouldRender &&
681+
lastRowTop !== movieElem.getBoundingClientRect().top &&
682+
!this.useHorizontalScroll
683+
) {
666684
this.renderedRows += 1;
667685
if (lastRowTop !== 0 && this.columnsCount === 0) {
668686
this.columnsCount = this.renderedItems - 1;
@@ -675,10 +693,54 @@ class PlexMeetsHomeAssistant extends HTMLElement {
675693
if (this.maxRows && this.renderedRows > this.maxRows && !this.useHorizontalScroll) {
676694
movieElem.remove();
677695
}
696+
678697
return true;
679698
}
680699
return false;
681700
});
701+
const returnObj = {
702+
renderedItems: this.renderedItems
703+
};
704+
if (!render) {
705+
this.renderedRows = origRenderedRows;
706+
this.renderedItems = origRenderedItems;
707+
this.columnsCount = origColumnsCount;
708+
}
709+
if (render && containerWidth > 0) {
710+
this.contentContainer.style.width = `${containerWidth}px`;
711+
}
712+
return returnObj;
713+
};
714+
715+
const renderMore =
716+
(!this.maxCount || this.renderedItems < this.maxCount) &&
717+
(!this.maxRenderCount || this.renderedItems < this.maxRenderCount) &&
718+
(!this.maxRows || this.renderedRows <= this.maxRows);
719+
if (
720+
this.data[this.config.libraryName] &&
721+
this.renderedItems < this.data[this.config.libraryName].length &&
722+
renderMore
723+
) {
724+
let maxRenderedItems = this.data[this.config.libraryName].length;
725+
let itemsPerRow = this.data[this.config.libraryName].length;
726+
if (this.maxCount) {
727+
maxRenderedItems = this.maxCount;
728+
}
729+
itemsPerRow = maxRenderedItems;
730+
if (this.maxRows) {
731+
itemsPerRow = Math.ceil(maxRenderedItems / this.maxRows);
732+
}
733+
const searchValues = _.split(this.searchValue, ' ');
734+
735+
const hasEpisodesResult = hasEpisodes(this.data[this.config.libraryName]);
736+
737+
const { renderedItems } = renderElements(false, hasEpisodesResult, searchValues, itemsPerRow);
738+
itemsPerRow = renderedItems;
739+
if (this.maxRows) {
740+
itemsPerRow = Math.ceil(renderedItems / this.maxRows);
741+
}
742+
743+
renderElements(true, hasEpisodesResult, searchValues, itemsPerRow);
682744
}
683745

684746
const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement;
@@ -715,6 +777,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
715777
}
716778

717779
this.renderedItems = 0;
780+
this.renderedRows = 0;
718781
// this.columnsCount = 0;
719782

720783
const spinner = document.createElement('div');
@@ -989,11 +1052,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
9891052
// todo: figure out why interval is needed here and do it properly
9901053
const setLeftOffsetsInterval = setInterval(() => {
9911054
this.movieElems = this.getElementsByClassName('movieElem');
1055+
9921056
for (let i = 0; i < this.movieElems.length; i += 1) {
9931057
if (this.movieElems[i].offsetLeft === 0) {
9941058
break;
9951059
} else {
996-
this.resizeHandler();
9971060
clearInterval(setLeftOffsetsInterval);
9981061
}
9991062
}

0 commit comments

Comments
 (0)