From 2e07aee427e958e40d7cd3ccda7cc62b0212628f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Thu, 6 May 2021 13:40:27 +0200 Subject: [PATCH] Fix: Card resizing when needed --- dist/plex-meets-homeassistant.js | 37 +++++++++++++++++------------- src/plex-meets-homeassistant.ts | 39 +++++++++++++++++++------------- 2 files changed, 44 insertions(+), 32 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 042dc50..3706438 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19374,10 +19374,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.renderPage = () => { 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; this.content = document.createElement('div'); - this.content.style.padding = '16px 16px 100px'; this.content.innerHTML = ''; if (this.error !== '') { this.content.innerHTML = `Error: ${this.error}`; @@ -19390,8 +19392,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.content.innerHTML = '
'; } - card.appendChild(this.content); - this.appendChild(card); + this.card.appendChild(this.content); + this.appendChild(this.card); let count = 0; const contentbg = document.createElement('div'); contentbg.className = 'contentbg'; @@ -19770,21 +19772,21 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }; this.resizeBackground = () => { - if (this.seasonsElem && this.episodesElem) { - const contentbg = this.getElementsByClassName('contentbg'); + if (this.seasonsElem && this.episodesElem && this.card) { + const contentbg = this.getElementsByClassName('contentbg')[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 requiredEpisodeBodyHeight = parseInt(this.episodesElem.style.top.replace('px', ''), 10) + this.episodesElem.scrollHeight; 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) { - contentbg[0].style.height = `${requiredEpisodeBodyHeight}px`; + this.card.style.height = `${requiredEpisodeBodyHeight + 16}px`; } else { - contentbg[0].style.height = '100%'; + this.card.style.height = '100%'; } } }; @@ -19829,13 +19831,16 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }; this.getTop = () => { - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); - const cardTop = getOffset(this.content).top; - if (top < cardTop) { - return 0; + if (this.card) { + const doc = document.documentElement; + const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const cardTop = getOffset(this.card).top; + if (top < cardTop - 64) { + return 0; + } + return top - cardTop + 64; } - return top - cardTop + 64; + return 0; }; 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}`; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 995b00b..93e5348 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -57,6 +57,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { contentBGHeight = 0; + card: HTMLElement | undefined; + set hass(hass: HomeAssistant) { this.hassObj = hass; if (this.plex) { @@ -141,10 +143,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { renderPage = (): void => { 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; this.content = document.createElement('div'); - this.content.style.padding = '16px 16px 100px'; this.content.innerHTML = ''; if (this.error !== '') { @@ -157,8 +161,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { '
'; } - card.appendChild(this.content); - this.appendChild(card); + this.card.appendChild(this.content); + this.appendChild(this.card); let count = 0; @@ -591,10 +595,10 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; resizeBackground = (): void => { - if (this.seasonsElem && this.episodesElem) { - const contentbg = this.getElementsByClassName('contentbg'); + if (this.seasonsElem && this.episodesElem && this.card) { + const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement; if (this.contentBGHeight === 0) { - this.contentBGHeight = (contentbg[0] as HTMLElement).scrollHeight; + this.contentBGHeight = contentbg.scrollHeight; } const requiredSeasonBodyHeight = 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; 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) { - (contentbg[0] as HTMLElement).style.height = `${requiredEpisodeBodyHeight}px`; + this.card.style.height = `${requiredEpisodeBodyHeight + 16}px`; } else { - (contentbg[0] as HTMLElement).style.height = '100%'; + this.card.style.height = '100%'; } } }; @@ -656,13 +660,16 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; getTop = (): number => { - const doc = document.documentElement; - const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); - const cardTop = getOffset(this.content).top; - if (top < cardTop) { - return 0; + if (this.card) { + const doc = document.documentElement; + const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); + const cardTop = getOffset(this.card).top; + if (top < cardTop - 64) { + return 0; + } + return top - cardTop + 64; } - return top - cardTop + 64; + return 0; }; getMovieElement = (data: any, serverID: string): HTMLDivElement => {