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

Fix: Card resizing when needed

Browse Source
pull/16/head
Juraj Nyíri 4 years ago
parent 0e8e8dbc82
commit 2e07aee427
2 changed files with 44 additions and 32 deletions
Show Stats Download Patch File Download Diff File

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

@ -19374,10 +19374,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.renderPage = () => { this.renderPage = () => {
if (this) if (this)
this.innerHTML = ''; this.innerHTML = '';
const card = document.createElement('ha-card'); this.card = document.createElement('ha-card');
this.card.style.transition = '0.5s';
this.card.style.overflow = 'hidden';
this.card.style.padding = '16px';
// card.header = this.config.libraryName; // card.header = this.config.libraryName;
this.content = document.createElement('div'); this.content = document.createElement('div');
this.content.style.padding = '16px 16px 100px';
this.content.innerHTML = ''; this.content.innerHTML = '';
if (this.error !== '') { if (this.error !== '') {
this.content.innerHTML = `Error: ${this.error}`; this.content.innerHTML = `Error: ${this.error}`;
@ -19390,8 +19392,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.content.innerHTML = this.content.innerHTML =
'<div style="display: flex; align-items: center; justify-content: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>'; '<div style="display: flex; align-items: center; justify-content: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>';
} }
card.appendChild(this.content); this.card.appendChild(this.content);
this.appendChild(card); this.appendChild(this.card);
let count = 0; let count = 0;
const contentbg = document.createElement('div'); const contentbg = document.createElement('div');
contentbg.className = 'contentbg'; contentbg.className = 'contentbg';
@ -19770,21 +19772,21 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}; };
this.resizeBackground = () => { this.resizeBackground = () => {
if (this.seasonsElem && this.episodesElem) { if (this.seasonsElem && this.episodesElem && this.card) {
const contentbg = this.getElementsByClassName('contentbg'); const contentbg = this.getElementsByClassName('contentbg')[0];
if (this.contentBGHeight === 0) { if (this.contentBGHeight === 0) {
this.contentBGHeight = contentbg[0].scrollHeight; this.contentBGHeight = contentbg.scrollHeight;
} }
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) {
contentbg[0].style.height = `${requiredSeasonBodyHeight}px`; this.card.style.height = `${requiredSeasonBodyHeight + 16}px`;
} }
else if (requiredEpisodeBodyHeight > this.contentBGHeight && !this.episodesElemHidden) { else if (requiredEpisodeBodyHeight > this.contentBGHeight && !this.episodesElemHidden) {
contentbg[0].style.height = `${requiredEpisodeBodyHeight}px`; this.card.style.height = `${requiredEpisodeBodyHeight + 16}px`;
} }
else { else {
contentbg[0].style.height = '100%'; this.card.style.height = '100%';
} }
} }
}; };
@ -19829,13 +19831,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}; };
this.getTop = () => { this.getTop = () => {
const doc = document.documentElement; if (this.card) {
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); const doc = document.documentElement;
const cardTop = getOffset(this.content).top; const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (top < cardTop) { const cardTop = getOffset(this.card).top;
return 0; if (top < cardTop - 64) {
return 0;
}
return top - cardTop + 64;
} }
return top - cardTop + 64; return 0;
}; };
this.getMovieElement = (data, serverID) => { this.getMovieElement = (data, serverID) => {
const thumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.expandedWidth}&height=${CSS_STYLE.expandedHeight}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`; const thumbURL = `${this.plexProtocol}://${this.config.ip}:${this.config.port}/photo/:/transcode?width=${CSS_STYLE.expandedWidth}&height=${CSS_STYLE.expandedHeight}&minSize=1&upscale=1&url=${data.thumb}&X-Plex-Token=${this.config.token}`;

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

@ -57,6 +57,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
contentBGHeight = 0; contentBGHeight = 0;
card: HTMLElement | undefined;
set hass(hass: HomeAssistant) { set hass(hass: HomeAssistant) {
this.hassObj = hass; this.hassObj = hass;
if (this.plex) { if (this.plex) {
@ -141,10 +143,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
renderPage = (): void => { renderPage = (): void => {
if (this) this.innerHTML = ''; if (this) this.innerHTML = '';
const card = document.createElement('ha-card'); this.card = document.createElement('ha-card');
this.card.style.transition = '0.5s';
this.card.style.overflow = 'hidden';
this.card.style.padding = '16px';
// card.header = this.config.libraryName; // card.header = this.config.libraryName;
this.content = document.createElement('div'); this.content = document.createElement('div');
this.content.style.padding = '16px 16px 100px';
this.content.innerHTML = ''; this.content.innerHTML = '';
if (this.error !== '') { if (this.error !== '') {
@ -157,8 +161,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
'<div style="display: flex; align-items: center; justify-content: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>'; '<div style="display: flex; align-items: center; justify-content: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>';
} }
card.appendChild(this.content); this.card.appendChild(this.content);
this.appendChild(card); this.appendChild(this.card);
let count = 0; let count = 0;
@ -591,10 +595,10 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
resizeBackground = (): void => { resizeBackground = (): void => {
if (this.seasonsElem && this.episodesElem) { if (this.seasonsElem && this.episodesElem && this.card) {
const contentbg = this.getElementsByClassName('contentbg'); const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement;
if (this.contentBGHeight === 0) { if (this.contentBGHeight === 0) {
this.contentBGHeight = (contentbg[0] as HTMLElement).scrollHeight; this.contentBGHeight = contentbg.scrollHeight;
} }
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;
@ -602,11 +606,11 @@ 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) {
(contentbg[0] as HTMLElement).style.height = `${requiredSeasonBodyHeight}px`; this.card.style.height = `${requiredSeasonBodyHeight + 16}px`;
} else if (requiredEpisodeBodyHeight > this.contentBGHeight && !this.episodesElemHidden) { } else if (requiredEpisodeBodyHeight > this.contentBGHeight && !this.episodesElemHidden) {
(contentbg[0] as HTMLElement).style.height = `${requiredEpisodeBodyHeight}px`; this.card.style.height = `${requiredEpisodeBodyHeight + 16}px`;
} else { } else {
(contentbg[0] as HTMLElement).style.height = '100%'; this.card.style.height = '100%';
} }
} }
}; };
@ -656,13 +660,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
getTop = (): number => { getTop = (): number => {
const doc = document.documentElement; if (this.card) {
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); const doc = document.documentElement;
const cardTop = getOffset(this.content).top; const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (top < cardTop) { const cardTop = getOffset(this.card).top;
return 0; if (top < cardTop - 64) {
return 0;
}
return top - cardTop + 64;
} }
return top - cardTop + 64; return 0;
}; };
getMovieElement = (data: any, serverID: string): HTMLDivElement => { getMovieElement = (data: any, serverID: string): HTMLDivElement => {

Write Preview
Loading…
Cancel
Save