diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js
index 66a5a0f..90e4e0b 100644
--- a/dist/plex-meets-homeassistant.js
+++ b/dist/plex-meets-homeassistant.js
@@ -19394,18 +19394,16 @@ style.textContent = css `
visibility: hidden !important;
}
.detailPlayAction {
- margin-top: 10px;
color: rgb(15 17 19);
font-weight: bold;
float: left;
- padding: 5px 10px;
+ padding: 7px 10px;
border-radius: 5px;
cursor: pointer;
position: relative;
background: orange;
border: none;
visibility: hidden;
- transition: 2s;
}
.seasons {
z-index: 5;
@@ -19432,6 +19430,7 @@ style.textContent = css `
white-space: nowrap;
margin-bottom: 10px;
float: left;
+ margin-right: 10px;
}
.contentRatingDetail {
background: #ffffff24;
@@ -19456,6 +19455,7 @@ style.textContent = css `
}
.detail .metaInfo {
display: block;
+ float: left;
}
.detail h2 {
text-overflow: ellipsis;
@@ -19635,6 +19635,11 @@ style.textContent = css `
margin-bottom: 15px;
transition: 0.5s;
}
+ .metaInfoDetails {
+ color: hsla(0, 0%, 98%, 0.45);
+ text-transform: uppercase;
+ margin-top: 10px;
+ }
.simulatedFullScreen {
background: black;
height: 100%;
@@ -19985,8 +19990,47 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.content.appendChild(contentbg);
this.detailElem = document.createElement('div');
this.detailElem.className = 'detail';
- this.detailElem.innerHTML =
- "";
+ this.detailElem.innerHTML = `
+
+
+
+
+
+
+
+
+ |
+ Directed by
+ |
+
+ ...
+ |
+
+
+ |
+ Written by
+ |
+
+ ...
+ |
+
+
+ |
+ Studio
+ |
+
+ ...
+ |
+
+
+ |
+ Genre
+ |
+
+ ...
+ |
+
+
`;
this.detailElem.addEventListener('click', () => {
this.hideBackground();
this.minimizeAll();
@@ -20242,6 +20286,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
fullscreenTrailer.style.visibility = 'hidden';
};
this.showDetails = async (data) => {
+ console.log(data);
this.detailsShown = true;
const top = this.getTop();
if (this.detailElem) {
@@ -20253,10 +20298,53 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.detailElem.style.visibility = 'visible';
this.detailElem.style.transition = '0.7s';
this.detailElem.style.top = `${top}px`;
- this.detailElem.children[0].innerHTML = escapeHtml(data.title);
- this.detailElem.children[1].innerHTML = escapeHtml(data.year);
- this.detailElem.children[1].dataset.year = escapeHtml(data.year);
- this.detailElem.children[2].innerHTML = `${(data.duration !== undefined
+ const directorElem = this.getElementsByClassName('metaInfoDetailsData')[0];
+ if (directorElem.parentElement) {
+ if (data.Director && data.Director.length > 0) {
+ directorElem.innerHTML = escapeHtml(data.Director[0].tag);
+ directorElem.parentElement.style.display = 'table-row';
+ }
+ else {
+ directorElem.parentElement.style.display = 'none';
+ }
+ }
+ const writerElem = this.getElementsByClassName('metaInfoDetailsData')[1];
+ if (writerElem.parentElement) {
+ if (data.Writer && data.Writer.length > 0) {
+ writerElem.innerHTML = escapeHtml(data.Writer[0].tag);
+ writerElem.parentElement.style.display = 'table-row';
+ }
+ else {
+ writerElem.parentElement.style.display = 'none';
+ }
+ }
+ const studioElem = this.getElementsByClassName('metaInfoDetailsData')[2];
+ if (studioElem.parentElement) {
+ if (data.studio) {
+ studioElem.innerHTML = escapeHtml(data.studio);
+ studioElem.parentElement.style.display = 'table-row';
+ }
+ else {
+ studioElem.parentElement.style.display = 'none';
+ }
+ }
+ const genreElem = this.getElementsByClassName('metaInfoDetailsData')[3];
+ if (genreElem.parentElement) {
+ if (data.Genre && data.Genre.length > 0) {
+ let genre = '';
+ lodash.forEach(data.Genre, tag => {
+ genre += `${tag.tag}, `;
+ });
+ genreElem.innerHTML = escapeHtml(genre.slice(0, -2));
+ genreElem.parentElement.style.display = 'table-row';
+ }
+ else {
+ genreElem.parentElement.style.display = 'none';
+ }
+ }
+ this.getElementsByClassName('detailsTitle')[0].innerHTML = escapeHtml(data.title);
+ this.getElementsByClassName('detailsYear')[0].innerHTML = escapeHtml(data.year);
+ this.getElementsByClassName('metaInfo')[0].innerHTML = `${(data.duration !== undefined
? `${Math.round(parseInt(escapeHtml(data.duration), 10) / 60 / 1000)} min`
: '') +
(data.contentRating !== undefined
@@ -20265,7 +20353,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
(data.rating !== undefined
? `${data.rating < 5 ? '🗑' : '⭐'} ${Math.round(parseFloat(escapeHtml(data.rating)) * 10) / 10}`
: '')}`;
- this.detailElem.children[3].innerHTML = escapeHtml(data.summary);
+ this.getElementsByClassName('detailDesc')[0].innerHTML = escapeHtml(data.summary);
/* todo temp disabled
if (data.type === 'movie') {
(this.detailElem.children[5] as HTMLElement).style.visibility = 'visible';
diff --git a/src/modules/style.ts b/src/modules/style.ts
index b06c657..55a7d20 100644
--- a/src/modules/style.ts
+++ b/src/modules/style.ts
@@ -11,18 +11,16 @@ style.textContent = css`
visibility: hidden !important;
}
.detailPlayAction {
- margin-top: 10px;
color: rgb(15 17 19);
font-weight: bold;
float: left;
- padding: 5px 10px;
+ padding: 7px 10px;
border-radius: 5px;
cursor: pointer;
position: relative;
background: orange;
border: none;
visibility: hidden;
- transition: 2s;
}
.seasons {
z-index: 5;
@@ -49,6 +47,7 @@ style.textContent = css`
white-space: nowrap;
margin-bottom: 10px;
float: left;
+ margin-right: 10px;
}
.contentRatingDetail {
background: #ffffff24;
@@ -73,6 +72,7 @@ style.textContent = css`
}
.detail .metaInfo {
display: block;
+ float: left;
}
.detail h2 {
text-overflow: ellipsis;
@@ -252,6 +252,11 @@ style.textContent = css`
margin-bottom: 15px;
transition: 0.5s;
}
+ .metaInfoDetails {
+ color: hsla(0, 0%, 98%, 0.45);
+ text-transform: uppercase;
+ margin-top: 10px;
+ }
.simulatedFullScreen {
background: black;
height: 100%;
diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts
index 7750d4f..e84f52e 100644
--- a/src/plex-meets-homeassistant.ts
+++ b/src/plex-meets-homeassistant.ts
@@ -326,8 +326,47 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.detailElem = document.createElement('div');
this.detailElem.className = 'detail';
- this.detailElem.innerHTML =
- "";
+ this.detailElem.innerHTML = `
+
+
+
+
+
+
+
+
+ |
+ Directed by
+ |
+
+ ...
+ |
+
+
+ |
+ Written by
+ |
+
+ ...
+ |
+
+
+ |
+ Studio
+ |
+
+ ...
+ |
+
+
+ |
+ Genre
+ |
+
+ ...
+ |
+
+
`;
this.detailElem.addEventListener('click', () => {
this.hideBackground();
@@ -606,6 +645,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
};
showDetails = async (data: any): Promise => {
+ console.log(data);
this.detailsShown = true;
const top = this.getTop();
if (this.detailElem) {
@@ -618,10 +658,50 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.detailElem.style.transition = '0.7s';
this.detailElem.style.top = `${top}px`;
- this.detailElem.children[0].innerHTML = escapeHtml(data.title);
- this.detailElem.children[1].innerHTML = escapeHtml(data.year);
- (this.detailElem.children[1] as HTMLElement).dataset.year = escapeHtml(data.year);
- this.detailElem.children[2].innerHTML = `${(data.duration !== undefined
+ const directorElem = this.getElementsByClassName('metaInfoDetailsData')[0] as HTMLElement;
+ if (directorElem.parentElement) {
+ if (data.Director && data.Director.length > 0) {
+ directorElem.innerHTML = escapeHtml(data.Director[0].tag);
+ directorElem.parentElement.style.display = 'table-row';
+ } else {
+ directorElem.parentElement.style.display = 'none';
+ }
+ }
+
+ const writerElem = this.getElementsByClassName('metaInfoDetailsData')[1] as HTMLElement;
+ if (writerElem.parentElement) {
+ if (data.Writer && data.Writer.length > 0) {
+ writerElem.innerHTML = escapeHtml(data.Writer[0].tag);
+ writerElem.parentElement.style.display = 'table-row';
+ } else {
+ writerElem.parentElement.style.display = 'none';
+ }
+ }
+ const studioElem = this.getElementsByClassName('metaInfoDetailsData')[2] as HTMLElement;
+ if (studioElem.parentElement) {
+ if (data.studio) {
+ studioElem.innerHTML = escapeHtml(data.studio);
+ studioElem.parentElement.style.display = 'table-row';
+ } else {
+ studioElem.parentElement.style.display = 'none';
+ }
+ }
+ const genreElem = this.getElementsByClassName('metaInfoDetailsData')[3] as HTMLElement;
+ if (genreElem.parentElement) {
+ if (data.Genre && data.Genre.length > 0) {
+ let genre = '';
+ _.forEach(data.Genre, tag => {
+ genre += `${tag.tag}, `;
+ });
+ genreElem.innerHTML = escapeHtml(genre.slice(0, -2));
+ genreElem.parentElement.style.display = 'table-row';
+ } else {
+ genreElem.parentElement.style.display = 'none';
+ }
+ }
+ (this.getElementsByClassName('detailsTitle')[0] as HTMLElement).innerHTML = escapeHtml(data.title);
+ (this.getElementsByClassName('detailsYear')[0] as HTMLElement).innerHTML = escapeHtml(data.year);
+ (this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(data.duration !== undefined
? `${Math.round(
parseInt(escapeHtml(data.duration), 10) / 60 / 1000
)} min`
@@ -634,7 +714,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
parseFloat(escapeHtml(data.rating)) * 10
) / 10}`
: '')}`;
- this.detailElem.children[3].innerHTML = escapeHtml(data.summary);
+ (this.getElementsByClassName('detailDesc')[0] as HTMLElement).innerHTML = escapeHtml(data.summary);
+
/* todo temp disabled
if (data.type === 'movie') {
(this.detailElem.children[5] as HTMLElement).style.visibility = 'visible';