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 => { let x = 0; @@ -185,5 +189,6 @@ export { findTrailerURL, isVideoFullScreen, hasEpisodes, - getOldPlexServerErrorMessage + getOldPlexServerErrorMessage, + getWidth }; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 1b91bff..6d74550 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -14,7 +14,8 @@ import { findTrailerURL, isVideoFullScreen, hasEpisodes, - getOldPlexServerErrorMessage + getOldPlexServerErrorMessage, + getWidth } from './modules/utils'; import style from './modules/style'; @@ -410,6 +411,10 @@ class PlexMeetsHomeAssistant extends HTMLElement { 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 = `

@@ -545,6 +550,10 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideBackground(); this.minimizeAll(); }); + contentArt.addEventListener('click', () => { + this.hideBackground(); + this.minimizeAll(); + }); }, 1); const endElem = document.createElement('div'); @@ -824,6 +833,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 !== '' && !_.isEqual(this.playTrailer, false)) { const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; @@ -897,6 +907,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.videoElem.style.top = `${top}px`; } }); + } else { + const contentArt = this.getElementsByClassName('contentArt')[0] as HTMLElement; + 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 (!_.isEmpty(seasonsData)) { @@ -1166,6 +1183,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] as HTMLElement; + contentArt.style.display = 'none'; }; activateMovieElem = (movieElem: HTMLElement): void => {