From dc0000cc1dcd6a9874827f4141ec6f0dc304cb81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Sun, 4 Jul 2021 15:17:03 +0200 Subject: [PATCH] Update: Make posters span the whole width always --- dist/plex-meets-homeassistant.js | 68 +++++++++++++---------------- src/const.ts | 6 +-- src/modules/style.ts | 1 + src/plex-meets-homeassistant.ts | 74 ++++++++++++++------------------ 4 files changed, 66 insertions(+), 83 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 16412e7..7f2dd89 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -17196,8 +17196,8 @@ var lodash = createCommonjsModule(function (module, exports) { /* eslint-disable @typescript-eslint/no-explicit-any */ const CSS_STYLE = { - width: 138, - height: 203, + ratio: 1.471, + minimumWidth: 138, expandedWidth: 220, expandedHeight: 324, episodeWidth: 300, @@ -19625,6 +19625,7 @@ style.textContent = css ` .searchContainer { position: relative; z-index: 2; + padding-right: 8px; } .searchContainer input { @@ -20001,6 +20002,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.runBefore = ''; this.playTrailer = true; this.showExtras = true; + this.previousPageWidth = 0; this.runAfter = ''; this.columnsCount = 0; this.renderedItems = 0; @@ -20019,7 +20021,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.loading = false; this.maxCount = false; this.error = ''; - this.previousPositions = []; this.contentBGHeight = 0; this.renderNewElementsIfNeeded = () => { const loadAdditionalRowsCount = 2; // todo: make this configurable @@ -20075,8 +20076,26 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.renderNewElementsIfNeeded(); }); window.addEventListener('resize', () => { + if (!this.detailsShown) { + const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; + let isFullScreen = false; + if (videoPlayer.children.length > 0) { + isFullScreen = isVideoFullScreen(this); + } + if (this.card && this.movieElems.length > 0 && !isFullScreen) { + if (this.previousPageWidth !== this.card.offsetWidth) { + this.previousPageWidth = this.card.offsetWidth; + this.renderPage(); + const contentbg = this.getElementsByClassName('contentbg'); + this.contentBGHeight = getHeight(contentbg[0]); + } + } + } this.renderNewElementsIfNeeded(); }); + if (this.card) { + this.previousPageWidth = this.card.offsetWidth; + } this.loading = true; this.renderPage(); try { @@ -20166,41 +20185,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.resizeBackground(); }; this.render = () => { - this.previousPositions = []; - // todo: find a better way to detect resize... - setInterval(() => { - if (!this.detailsShown) { - const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; - let isFullScreen = false; - if (videoPlayer.children.length > 0) { - isFullScreen = isVideoFullScreen(this); - } - if (this.movieElems.length > 0 && !isFullScreen) { - let renderNeeded = false; - if (this.previousPositions.length === 0) { - for (let i = 0; i < this.movieElems.length; i += 1) { - this.previousPositions[i] = {}; - this.previousPositions[i].top = this.movieElems[i].parentElement.offsetTop; - this.previousPositions[i].left = this.movieElems[i].parentElement.offsetLeft; - } - } - for (let i = 0; i < this.movieElems.length; i += 1) { - if (this.previousPositions[i] && - this.movieElems[i].dataset.clicked !== 'true' && - (this.previousPositions[i].top !== this.movieElems[i].parentElement.offsetTop || - this.previousPositions[i].left !== this.movieElems[i].parentElement.offsetLeft)) { - renderNeeded = true; - this.previousPositions = []; - } - } - if (renderNeeded) { - this.renderPage(); - const contentbg = this.getElementsByClassName('contentbg'); - this.contentBGHeight = getHeight(contentbg[0]); - } - } - } - }, 250); this.renderPage(); }; this.searchInput = () => { @@ -20280,6 +20264,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.contentBGHeight = getHeight(contentbg); }; this.renderPage = () => { + if (this.card) { + const marginRight = 10; // needs to be equal to .container margin right + const areaSize = this.card.offsetWidth - parseInt(this.card.style.paddingRight, 10) - parseInt(this.card.style.paddingLeft, 10); + const postersInRow = Math.floor(areaSize / CSS_STYLE.minimumWidth); + CSS_STYLE.width = areaSize / postersInRow - marginRight; + CSS_STYLE.height = CSS_STYLE.width * CSS_STYLE.ratio; + } this.renderedItems = 0; this.columnsCount = 0; const spinner = document.createElement('div'); @@ -20295,6 +20286,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.card.style.transition = '0.5s'; this.card.style.overflow = 'hidden'; this.card.style.padding = '16px'; + this.card.style.paddingRight = '6px'; this.card.appendChild(this.searchInput()); this.appendChild(this.card); } diff --git a/src/const.ts b/src/const.ts index 0b389a5..be0a9f3 100644 --- a/src/const.ts +++ b/src/const.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -const CSS_STYLE = { - width: 138, - height: 203, +const CSS_STYLE: any = { + ratio: 1.471, + minimumWidth: 138, expandedWidth: 220, expandedHeight: 324, episodeWidth: 300, diff --git a/src/modules/style.ts b/src/modules/style.ts index 26f9b0d..bc0949a 100644 --- a/src/modules/style.ts +++ b/src/modules/style.ts @@ -110,6 +110,7 @@ style.textContent = css` .searchContainer { position: relative; z-index: 2; + padding-right: 8px; } .searchContainer input { diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index e758915..9a295ff 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -32,6 +32,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { showExtras = true; + previousPageWidth = 0; + runAfter = ''; renderNewElementsIfNeededTimeout: any; @@ -106,8 +108,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { content: any; - previousPositions: Array = []; - hassObj: HomeAssistant | undefined; contentBGHeight = 0; @@ -192,8 +192,28 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.renderNewElementsIfNeeded(); }); window.addEventListener('resize', () => { + if (!this.detailsShown) { + const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; + let isFullScreen = false; + if (videoPlayer.children.length > 0) { + isFullScreen = isVideoFullScreen(this); + } + + if (this.card && this.movieElems.length > 0 && !isFullScreen) { + if (this.previousPageWidth !== this.card.offsetWidth) { + this.previousPageWidth = this.card.offsetWidth; + this.renderPage(); + const contentbg = this.getElementsByClassName('contentbg'); + this.contentBGHeight = getHeight(contentbg[0] as HTMLElement); + } + } + } this.renderNewElementsIfNeeded(); }); + if (this.card) { + this.previousPageWidth = this.card.offsetWidth; + } + this.loading = true; this.renderPage(); try { @@ -282,46 +302,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; render = (): void => { - this.previousPositions = []; - - // todo: find a better way to detect resize... - setInterval(() => { - if (!this.detailsShown) { - const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; - let isFullScreen = false; - if (videoPlayer.children.length > 0) { - isFullScreen = isVideoFullScreen(this); - } - - if (this.movieElems.length > 0 && !isFullScreen) { - let renderNeeded = false; - if (this.previousPositions.length === 0) { - for (let i = 0; i < this.movieElems.length; i += 1) { - this.previousPositions[i] = {}; - this.previousPositions[i].top = this.movieElems[i].parentElement.offsetTop; - this.previousPositions[i].left = this.movieElems[i].parentElement.offsetLeft; - } - } - for (let i = 0; i < this.movieElems.length; i += 1) { - if ( - this.previousPositions[i] && - this.movieElems[i].dataset.clicked !== 'true' && - (this.previousPositions[i].top !== this.movieElems[i].parentElement.offsetTop || - this.previousPositions[i].left !== this.movieElems[i].parentElement.offsetLeft) - ) { - renderNeeded = true; - this.previousPositions = []; - } - } - if (renderNeeded) { - this.renderPage(); - const contentbg = this.getElementsByClassName('contentbg'); - this.contentBGHeight = getHeight(contentbg[0] as HTMLElement); - } - } - } - }, 250); - this.renderPage(); }; @@ -413,6 +393,15 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; renderPage = (): void => { + if (this.card) { + const marginRight = 10; // needs to be equal to .container margin right + const areaSize = + this.card.offsetWidth - parseInt(this.card.style.paddingRight, 10) - parseInt(this.card.style.paddingLeft, 10); + const postersInRow = Math.floor(areaSize / CSS_STYLE.minimumWidth); + CSS_STYLE.width = areaSize / postersInRow - marginRight; + CSS_STYLE.height = CSS_STYLE.width * CSS_STYLE.ratio; + } + this.renderedItems = 0; this.columnsCount = 0; const spinner = document.createElement('div'); @@ -429,6 +418,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.card.style.transition = '0.5s'; this.card.style.overflow = 'hidden'; this.card.style.padding = '16px'; + this.card.style.paddingRight = '6px'; this.card.appendChild(this.searchInput()); this.appendChild(this.card); }