diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 15c7522..02c0cd0 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19128,6 +19128,10 @@ const getHeight = (el) => { const height = Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight, el.scrollHeight, el.offsetHeight); return height; }; +const getWidth = (el) => { + const width = Math.max(el.scrollWidth, el.offsetWidth, el.clientWidth, el.scrollWidth, el.offsetWidth); + return width; +}; const getOffset = (el) => { let x = 0; let y = 0; @@ -21319,6 +21323,9 @@ style.textContent = css ` border-radius: 5px; transition: 0.5s; } + .contentContainer { + overflow: hidden; + } .movieElem { margin-bottom: 5px; background-repeat: no-repeat; @@ -21897,6 +21904,17 @@ class PlexMeetsHomeAssistant extends HTMLElement { count += 1; if (count > this.renderedItems) { this.contentContainer.appendChild(movieElem); + if (lodash.isEmpty(this.contentContainer.style.width)) { + console.log('1'); + this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`; + } + else { + console.log('2'); + this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) + + getWidth(movieElem) + + 10}px`; + } + console.log(getWidth(movieElem)); this.renderedItems += 1; } } @@ -22005,6 +22023,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.card.appendChild(this.content); this.contentContainer = document.createElement('div'); this.contentContainer.className = 'contentContainer'; + // this.contentContainer.style.height = `${CSS_STYLE.height}px`; this.content.appendChild(this.contentContainer); const contentbg = document.createElement('div'); contentbg.className = 'contentbg'; @@ -22184,7 +22203,24 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.loadCustomStyles(); }; this.calculatePositions = () => { - return; // temp + // return; // temp + // 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; + this.movieElems[i].style.position = 'absolute'; + } + }, 100); }; this.minimizeSeasons = () => { this.seasonsElemHidden = false; diff --git a/src/modules/style.ts b/src/modules/style.ts index 4960f75..ff7e8f5 100644 --- a/src/modules/style.ts +++ b/src/modules/style.ts @@ -377,6 +377,9 @@ style.textContent = css` border-radius: 5px; transition: 0.5s; } + .contentContainer { + overflow: hidden; + } .movieElem { margin-bottom: 5px; background-repeat: no-repeat; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index bc8ba9a..e304008 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -18,7 +18,8 @@ import { getOldPlexServerErrorMessage, getDetailsBottom, clickHandler, - fetchEntityRegistry + fetchEntityRegistry, + getWidth } from './modules/utils'; import style from './modules/style'; @@ -594,6 +595,17 @@ class PlexMeetsHomeAssistant extends HTMLElement { count += 1; if (count > this.renderedItems) { this.contentContainer.appendChild(movieElem); + if (_.isEmpty(this.contentContainer.style.width)) { + console.log('1'); + this.contentContainer.style.width = `${getWidth(movieElem) + 10}px`; + } else { + console.log('2'); + this.contentContainer.style.width = `${parseFloat(this.contentContainer.style.width) + + getWidth(movieElem) + + 10}px`; + } + + console.log(getWidth(movieElem)); this.renderedItems += 1; } } @@ -715,6 +727,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.contentContainer = document.createElement('div'); this.contentContainer.className = 'contentContainer'; + // this.contentContainer.style.height = `${CSS_STYLE.height}px`; this.content.appendChild(this.contentContainer); const contentbg = document.createElement('div'); @@ -915,7 +928,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; calculatePositions = (): void => { - return; // temp + // return; // temp // todo: figure out why interval is needed here and do it properly const setLeftOffsetsInterval = setInterval(() => { this.movieElems = this.getElementsByClassName('movieElem');