Add: WIP poster as background

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 = `<h1 class='detailsTitle'></h1>
@@ -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;

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);

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<string, any> => {
 	let x = 0;
@@ -185,5 +189,6 @@ export {
 	findTrailerURL,
 	isVideoFullScreen,
 	hasEpisodes,
-	getOldPlexServerErrorMessage
+	getOldPlexServerErrorMessage,
+	getWidth
 };

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 = `<h1 class='detailsTitle'></h1>
@@ -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 => {