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

7
src/modules/utils.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save