From 3c9878bcfc879871a998d96d8950b9a594bd7ca7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Fri, 1 Oct 2021 13:07:27 +0200 Subject: [PATCH] Add: Font size2 now applies to additionalTitle, margins and proper height calculation --- dist/plex-meets-homeassistant.js | 36 +++++++++++++++----------------- src/plex-meets-homeassistant.ts | 20 +++++++++++++++--- 2 files changed, 34 insertions(+), 22 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 0d0bbb9..85b8c05 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -22099,22 +22099,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.loadCustomStyles(); }; this.calculatePositions = () => { - // todo: figure out why interval is needed here and do it properly - const setLeftOffsetsInterval = setInterval(() => { - this.movieElems = this.getElementsByClassName('movieElem'); - for (let i = 0; i < this.movieElems.length; i += 1) { - if (this.movieElems[i].offsetLeft === 0) { - break; - } - else { - clearInterval(setLeftOffsetsInterval); - } - this.movieElems[i].style.left = `${this.movieElems[i].offsetLeft}px`; - this.movieElems[i].dataset.left = this.movieElems[i].offsetLeft; - this.movieElems[i].style.top = `${this.movieElems[i].offsetTop}px`; - this.movieElems[i].dataset.top = this.movieElems[i].offsetTop; - } - }, 100); + return; // temp }; this.minimizeSeasons = () => { this.seasonsElemHidden = false; @@ -22811,10 +22796,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { container.className = 'plexMeetsContainer'; container.style.width = `${CSS_STYLE.width}px`; if (hasAdditionalData) { - container.style.height = `${CSS_STYLE.height + 50}px`; + container.style.height = `${CSS_STYLE.height + + this.fontSize1 + + 2 * (this.fontSize1 / 4) + + this.fontSize2 + + 2 * (this.fontSize2 / 4)}px`; } else { - container.style.height = `${CSS_STYLE.height + 30}px`; + container.style.height = `${CSS_STYLE.height + this.fontSize1 + this.fontSize2}px`; } if (!lodash.isNil(data.channelCallSign)) { container.style.marginBottom = '50px'; @@ -22884,14 +22873,17 @@ class PlexMeetsHomeAssistant extends HTMLElement { else { titleElem.innerHTML = escapeHtml(data.title); } + const margin1 = this.fontSize1 / 4; + const margin2 = this.fontSize2 / 4; titleElem.className = 'titleElem'; if (!lodash.isNil(data.channelCallSign)) { titleElem.style.marginTop = `${CSS_STYLE.width}px`; } else { - titleElem.style.marginTop = `${CSS_STYLE.height}px`; + titleElem.style.marginTop = `${CSS_STYLE.height + margin1}px`; } titleElem.style.fontSize = `${this.fontSize1}px`; + titleElem.style.marginBottom = `${margin1}px`; titleElem.style.lineHeight = `${this.fontSize1}px`; const yearElem = document.createElement('div'); if (lodash.isEqual(data.type, 'episode')) { @@ -22906,10 +22898,16 @@ class PlexMeetsHomeAssistant extends HTMLElement { yearElem.className = 'yearElem'; yearElem.style.fontSize = `${this.fontSize2}px`; yearElem.style.lineHeight = `${this.fontSize2}px`; + yearElem.style.marginTop = `${margin2}px`; + yearElem.style.marginBottom = `${margin2}px`; const additionalElem = document.createElement('div'); if (lodash.isEqual(data.type, 'episode')) { additionalElem.innerHTML = escapeHtml(`S${data.parentIndex} E${data.index}`); additionalElem.className = 'additionalElem'; + additionalElem.style.fontSize = `${this.fontSize2}px`; + additionalElem.style.lineHeight = `${this.fontSize2}px`; + additionalElem.style.marginTop = `${margin2}px`; + additionalElem.style.marginBottom = `${margin2}px`; } container.appendChild(movieElem); container.appendChild(titleElem); diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index e44d3d6..b7133a3 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -890,6 +890,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; calculatePositions = (): void => { + return; // temp // todo: figure out why interval is needed here and do it properly const setLeftOffsetsInterval = setInterval(() => { this.movieElems = this.getElementsByClassName('movieElem'); @@ -1658,9 +1659,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { container.className = 'plexMeetsContainer'; container.style.width = `${CSS_STYLE.width}px`; if (hasAdditionalData) { - container.style.height = `${CSS_STYLE.height + 50}px`; + container.style.height = `${CSS_STYLE.height + + this.fontSize1 + + 2 * (this.fontSize1 / 4) + + this.fontSize2 + + 2 * (this.fontSize2 / 4)}px`; } else { - container.style.height = `${CSS_STYLE.height + 30}px`; + container.style.height = `${CSS_STYLE.height + this.fontSize1 + this.fontSize2}px`; } if (!_.isNil(data.channelCallSign)) { container.style.marginBottom = '50px'; @@ -1747,13 +1752,16 @@ class PlexMeetsHomeAssistant extends HTMLElement { } else { titleElem.innerHTML = escapeHtml(data.title); } + const margin1 = this.fontSize1 / 4; + const margin2 = this.fontSize2 / 4; titleElem.className = 'titleElem'; if (!_.isNil(data.channelCallSign)) { titleElem.style.marginTop = `${CSS_STYLE.width}px`; } else { - titleElem.style.marginTop = `${CSS_STYLE.height}px`; + titleElem.style.marginTop = `${CSS_STYLE.height + margin1}px`; } titleElem.style.fontSize = `${this.fontSize1}px`; + titleElem.style.marginBottom = `${margin1}px`; titleElem.style.lineHeight = `${this.fontSize1}px`; const yearElem = document.createElement('div'); @@ -1767,11 +1775,17 @@ class PlexMeetsHomeAssistant extends HTMLElement { yearElem.className = 'yearElem'; yearElem.style.fontSize = `${this.fontSize2}px`; yearElem.style.lineHeight = `${this.fontSize2}px`; + yearElem.style.marginTop = `${margin2}px`; + yearElem.style.marginBottom = `${margin2}px`; const additionalElem = document.createElement('div'); if (_.isEqual(data.type, 'episode')) { additionalElem.innerHTML = escapeHtml(`S${data.parentIndex} E${data.index}`); additionalElem.className = 'additionalElem'; + additionalElem.style.fontSize = `${this.fontSize2}px`; + additionalElem.style.lineHeight = `${this.fontSize2}px`; + additionalElem.style.marginTop = `${margin2}px`; + additionalElem.style.marginBottom = `${margin2}px`; } container.appendChild(movieElem);