diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index e58e3e1..eef56ad 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19681,6 +19681,16 @@ style.textContent = css ` transition: 0.5s; left: 0; top: 0; + background-size: cover; + } + .contentArt { + position: absolute; + background-color: rgba(0, 0, 0, 0); + z-index: 2; + left: 0; + top: 0; + background-size: cover; + display: none; } .yearElem { color: hsla(0, 0%, 100%, 0.45); @@ -20194,6 +20204,9 @@ class PlexMeetsHomeAssistant extends HTMLElement { const contentbg = document.createElement('div'); contentbg.className = 'contentbg'; this.content.appendChild(contentbg); + const contentArt = document.createElement('div'); + contentArt.className = 'contentArt'; + this.content.appendChild(contentArt); this.detailElem = document.createElement('div'); this.detailElem.className = 'detail'; this.detailElem.innerHTML = `
@@ -20320,6 +20333,10 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideBackground(); this.minimizeAll(); }); + contentArt.addEventListener('click', () => { + this.hideBackground(); + this.minimizeAll(); + }); }, 1); const endElem = document.createElement('div'); endElem.className = 'clear'; @@ -20582,6 +20599,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { } const dataDetails = await this.plex.getDetails(data.key.split('/')[3]); if (this.videoElem) { + const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); const trailerURL = findTrailerURL(dataDetails); if (trailerURL !== '' && !lodash.isEqual(this.playTrailer, false)) { const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; @@ -20648,6 +20666,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }); } + else { + const contentArt = this.getElementsByClassName('contentArt')[0]; + contentArt.style.width = `${window.innerWidth}px`; + contentArt.style.height = `${window.innerHeight}px`; + contentArt.style.display = 'block'; + contentArt.style.backgroundImage = `url('${art}')`; + contentArt.style.top = `${top - 8}px`; + } } if (!lodash.isEmpty(seasonsData)) { this.seasonElemFreshlyLoaded = true; @@ -20871,6 +20897,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { contentbg.classList.remove('no-transparency'); contentbg.style.zIndex = '1'; contentbg.style.backgroundColor = 'rgba(0,0,0,0)'; + const contentArt = this.getElementsByClassName('contentArt')[0]; + contentArt.style.display = 'none'; }; this.activateMovieElem = (movieElem) => { const movieElemLocal = movieElem; diff --git a/src/modules/style.ts b/src/modules/style.ts index f1bad08..6c60bdc 100644 --- a/src/modules/style.ts +++ b/src/modules/style.ts @@ -180,6 +180,16 @@ style.textContent = css` transition: 0.5s; left: 0; top: 0; + background-size: cover; + } + .contentArt { + position: absolute; + background-color: rgba(0, 0, 0, 0); + z-index: 2; + left: 0; + top: 0; + background-size: cover; + display: none; } .yearElem { color: hsla(0, 0%, 100%, 0.45); diff --git a/src/modules/utils.ts b/src/modules/utils.ts index d11bc2d..5aa9632 100644 --- a/src/modules/utils.ts +++ b/src/modules/utils.ts @@ -22,6 +22,10 @@ const getHeight = (el: HTMLElement): number => { const height = Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight, el.scrollHeight, el.offsetHeight); return height; }; +const getWidth = (el: HTMLElement): number => { + const width = Math.max(el.scrollWidth, el.offsetWidth, el.clientWidth, el.scrollWidth, el.offsetWidth); + return width; +}; const getOffset = (el: Element): Record