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

Fix: Jumpy season view with progressive loading

Browse Source
pull/16/head
Juraj Nyíri 4 years ago
parent 6285aec0d9
commit e14dcfd082
3 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File

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

@ -18998,6 +18998,10 @@ const escapeHtml = (unsafe) => {
}
return '';
};
const getHeight = (el) => {
const height = Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight, el.scrollHeight, el.offsetHeight);
return height;
};
const getOffset = (el) => {
let x = 0;
let y = 0;
@ -19629,7 +19633,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.loadInitialData = async () => {
window.addEventListener('scroll', () => {
const loadAdditionalRowsCount = 2; // todo: make this configurable
const height = Math.max(this.content.scrollHeight, this.content.offsetHeight, this.content.clientHeight, this.content.scrollHeight, this.content.offsetHeight);
const height = getHeight(this.content);
if (window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 && this.renderedItems > 0) {
this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * (loadAdditionalRowsCount * 2);
this.renderMovieElems();
@ -19687,7 +19691,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (renderNeeded) {
this.renderPage();
const contentbg = this.getElementsByClassName('contentbg');
this.contentBGHeight = contentbg[0].scrollHeight;
this.contentBGHeight = getHeight(contentbg[0]);
}
}
}, 100);
@ -19710,6 +19714,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
};
this.renderMovieElems = () => {
if (this.data[this.config.libraryName] && this.renderedItems < this.data[this.config.libraryName].length) {
console.log('renderMovieElems');
let count = 0;
// eslint-disable-next-line consistent-return
const searchValues = lodash.split(this.searchValue, ' ');
@ -19760,6 +19765,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
});
}
const contentbg = this.getElementsByClassName('contentbg')[0];
this.contentBGHeight = getHeight(contentbg);
};
this.renderPage = () => {
this.renderedItems = 0;
@ -20216,20 +20223,26 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
};
this.resizeBackground = () => {
console.log('resizeBackground');
if (this.seasonsElem && this.episodesElem && this.card) {
const contentbg = this.getElementsByClassName('contentbg')[0];
console.log(contentbg);
if (this.contentBGHeight === 0) {
this.contentBGHeight = contentbg.scrollHeight;
this.contentBGHeight = getHeight(contentbg);
}
const requiredSeasonBodyHeight = parseInt(this.seasonsElem.style.top.replace('px', ''), 10) + this.seasonsElem.scrollHeight;
const requiredEpisodeBodyHeight = parseInt(this.episodesElem.style.top.replace('px', ''), 10) + this.episodesElem.scrollHeight;
if (requiredSeasonBodyHeight > this.contentBGHeight && !this.seasonsElemHidden) {
console.log(`${requiredSeasonBodyHeight} > ${this.contentBGHeight}`);
console.log('1');
this.card.style.height = `${requiredSeasonBodyHeight + 16}px`;
}
else if (requiredEpisodeBodyHeight > this.contentBGHeight && !this.episodesElemHidden) {
console.log('2');
this.card.style.height = `${requiredEpisodeBodyHeight + 16}px`;
}
else {
console.log('3');
this.card.style.height = '100%';
}
}

7
src/modules/utils.ts
Unescape View File

@ -15,6 +15,11 @@ const escapeHtml = (unsafe: any): string => {
return '';
};
const getHeight = (el: HTMLElement): number => {
const height = Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight, el.scrollHeight, el.offsetHeight);
return height;
};
const getOffset = (el: Element): Record<string, any> => {
let x = 0;
let y = 0;
@ -48,4 +53,4 @@ const isScrolledIntoView = (elem: HTMLElement): boolean => {
};
// eslint-disable-next-line import/prefer-default-export
export { escapeHtml, getOffset, isScrolledIntoView };
export { escapeHtml, getOffset, isScrolledIntoView, getHeight };

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

@ -5,7 +5,7 @@ import _ from 'lodash';
import { supported, CSS_STYLE } from './const';
import Plex from './modules/Plex';
import PlayController from './modules/PlayController';
import { escapeHtml, getOffset, isScrolledIntoView } from './modules/utils';
import { escapeHtml, getOffset, isScrolledIntoView, getHeight } from './modules/utils';
import style from './modules/style';
class PlexMeetsHomeAssistant extends HTMLElement {
@ -104,13 +104,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
loadInitialData = async (): Promise<void> => {
window.addEventListener('scroll', () => {
const loadAdditionalRowsCount = 2; // todo: make this configurable
const height = Math.max(
this.content.scrollHeight,
this.content.offsetHeight,
this.content.clientHeight,
this.content.scrollHeight,
this.content.offsetHeight
);
const height = getHeight(this.content);
if (window.innerHeight + window.scrollY > height + getOffset(this.content).top - 300 && this.renderedItems > 0) {
this.maxRenderCount = this.renderedItems - 1 + this.columnsCount * (loadAdditionalRowsCount * 2);
@ -173,7 +167,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (renderNeeded) {
this.renderPage();
const contentbg = this.getElementsByClassName('contentbg');
this.contentBGHeight = (contentbg[0] as HTMLElement).scrollHeight;
this.contentBGHeight = getHeight(contentbg[0] as HTMLElement);
}
}
}, 100);
@ -202,6 +196,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
renderMovieElems = (): void => {
if (this.data[this.config.libraryName] && this.renderedItems < this.data[this.config.libraryName].length) {
console.log('renderMovieElems');
let count = 0;
// eslint-disable-next-line consistent-return
const searchValues = _.split(this.searchValue, ' ');
@ -253,6 +248,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
});
}
const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement;
this.contentBGHeight = getHeight(contentbg);
};
renderPage = (): void => {
@ -767,10 +765,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
};
resizeBackground = (): void => {
console.log('resizeBackground');
if (this.seasonsElem && this.episodesElem && this.card) {
const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement;
console.log(contentbg);
if (this.contentBGHeight === 0) {
this.contentBGHeight = contentbg.scrollHeight;
this.contentBGHeight = getHeight(contentbg);
}
const requiredSeasonBodyHeight =
parseInt(this.seasonsElem.style.top.replace('px', ''), 10) + this.seasonsElem.scrollHeight;
@ -778,10 +778,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
parseInt(this.episodesElem.style.top.replace('px', ''), 10) + this.episodesElem.scrollHeight;
if (requiredSeasonBodyHeight > this.contentBGHeight && !this.seasonsElemHidden) {
console.log(`${requiredSeasonBodyHeight} > ${this.contentBGHeight}`);
console.log('1');
this.card.style.height = `${requiredSeasonBodyHeight + 16}px`;
} else if (requiredEpisodeBodyHeight > this.contentBGHeight && !this.episodesElemHidden) {
console.log('2');
this.card.style.height = `${requiredEpisodeBodyHeight + 16}px`;
} else {
console.log('3');
this.card.style.height = '100%';
}
}

Write Preview
Loading…
Cancel
Save