From f590b0284527e5e309054ba644b9f357cacdbd2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Sun, 6 Jun 2021 18:22:23 +0200 Subject: [PATCH] Add: Directed by, written by, studio and genre information --- dist/plex-meets-homeassistant.js | 108 ++++++++++++++++++++++++++++--- src/modules/style.ts | 11 +++- src/plex-meets-homeassistant.ts | 95 +++++++++++++++++++++++++-- 3 files changed, 194 insertions(+), 20 deletions(-) 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';