HomeAssistant
/
PlexMeetsHomeAssistant
mirror of https://github.com/JurajNyiri/PlexMeetsHomeAssistant.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add: Directed by, written by, studio and genre information

Browse Source
pull/16/head
Juraj Nyíri 4 years ago
parent 04773125fc
commit f590b02845
3 changed files with 194 additions and 20 deletions
Show Stats Download Patch File Download Diff File

108
dist/plex-meets-homeassistant.js vendored
Unescape View File

@ -19394,18 +19394,16 @@ style.textContent = css `
visibility: hidden !important; visibility: hidden !important;
} }
.detailPlayAction { .detailPlayAction {
margin-top: 10px;
color: rgb(15 17 19); color: rgb(15 17 19);
font-weight: bold; font-weight: bold;
float: left; float: left;
padding: 5px 10px; padding: 7px 10px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
background: orange; background: orange;
border: none; border: none;
visibility: hidden; visibility: hidden;
transition: 2s;
} }
.seasons { .seasons {
z-index: 5; z-index: 5;
@ -19432,6 +19430,7 @@ style.textContent = css `
white-space: nowrap; white-space: nowrap;
margin-bottom: 10px; margin-bottom: 10px;
float: left; float: left;
margin-right: 10px;
} }
.contentRatingDetail { .contentRatingDetail {
background: #ffffff24; background: #ffffff24;
@ -19456,6 +19455,7 @@ style.textContent = css `
} }
.detail .metaInfo { .detail .metaInfo {
display: block; display: block;
float: left;
} }
.detail h2 { .detail h2 {
text-overflow: ellipsis; text-overflow: ellipsis;
@ -19635,6 +19635,11 @@ style.textContent = css `
margin-bottom: 15px; margin-bottom: 15px;
transition: 0.5s; transition: 0.5s;
} }
.metaInfoDetails {
color: hsla(0, 0%, 98%, 0.45);
text-transform: uppercase;
margin-top: 10px;
}
.simulatedFullScreen { .simulatedFullScreen {
background: black; background: black;
height: 100%; height: 100%;
@ -19985,8 +19990,47 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.content.appendChild(contentbg); this.content.appendChild(contentbg);
this.detailElem = document.createElement('div'); this.detailElem = document.createElement('div');
this.detailElem.className = 'detail'; this.detailElem.className = 'detail';
this.detailElem.innerHTML = this.detailElem.innerHTML = `<h1 class='detailsTitle'></h1>
"<h1></h1><h2></h2><span class='metaInfo'></span><span class='detailDesc'></span><div class='clear'></div><button class='detailPlayAction'>Fullscreen Trailer</button><div class='clear'></div>"; <h2 class='detailsYear'></h2>
<span class='metaInfo'></span>
<button class='detailPlayAction'>Fullscreen Trailer</button>
<div class='clear'></div>
<span class='detailDesc'></span>
<div class='clear'></div>
<table>
<tr>
<td class='metaInfoDetails'>
Directed by
</td>
<td class='metaInfoDetailsData'>
...
</td>
</tr>
<tr>
<td class='metaInfoDetails'>
Written by
</td>
<td class='metaInfoDetailsData'>
...
</td>
</tr>
<tr>
<td class='metaInfoDetails'>
Studio
</td>
<td class='metaInfoDetailsData'>
...
</td>
</tr>
<tr>
<td class='metaInfoDetails'>
Genre
</td>
<td class='metaInfoDetailsData'>
...
</td>
</tr>
</table>`;
this.detailElem.addEventListener('click', () => { this.detailElem.addEventListener('click', () => {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); this.minimizeAll();
@ -20242,6 +20286,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
fullscreenTrailer.style.visibility = 'hidden'; fullscreenTrailer.style.visibility = 'hidden';
}; };
this.showDetails = async (data) => { this.showDetails = async (data) => {
console.log(data);
this.detailsShown = true; this.detailsShown = true;
const top = this.getTop(); const top = this.getTop();
if (this.detailElem) { if (this.detailElem) {
@ -20253,10 +20298,53 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.detailElem.style.visibility = 'visible'; this.detailElem.style.visibility = 'visible';
this.detailElem.style.transition = '0.7s'; this.detailElem.style.transition = '0.7s';
this.detailElem.style.top = `${top}px`; this.detailElem.style.top = `${top}px`;
this.detailElem.children[0].innerHTML = escapeHtml(data.title); const directorElem = this.getElementsByClassName('metaInfoDetailsData')[0];
this.detailElem.children[1].innerHTML = escapeHtml(data.year); if (directorElem.parentElement) {
this.detailElem.children[1].dataset.year = escapeHtml(data.year); if (data.Director && data.Director.length > 0) {
this.detailElem.children[2].innerHTML = `${(data.duration !== undefined 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
? `<span class='minutesDetail'>${Math.round(parseInt(escapeHtml(data.duration), 10) / 60 / 1000)} min</span>` ? `<span class='minutesDetail'>${Math.round(parseInt(escapeHtml(data.duration), 10) / 60 / 1000)} min</span>`
: '') + : '') +
(data.contentRating !== undefined (data.contentRating !== undefined
@ -20265,7 +20353,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
(data.rating !== undefined (data.rating !== undefined
? `<span class='ratingDetail'>${data.rating < 5 ? '&#128465;' : '&#11088;'}&nbsp;${Math.round(parseFloat(escapeHtml(data.rating)) * 10) / 10}</span>` ? `<span class='ratingDetail'>${data.rating < 5 ? '&#128465;' : '&#11088;'}&nbsp;${Math.round(parseFloat(escapeHtml(data.rating)) * 10) / 10}</span>`
: '')}<div class='clear'></div>`; : '')}<div class='clear'></div>`;
this.detailElem.children[3].innerHTML = escapeHtml(data.summary); this.getElementsByClassName('detailDesc')[0].innerHTML = escapeHtml(data.summary);
/* todo temp disabled /* todo temp disabled
if (data.type === 'movie') { if (data.type === 'movie') {
(this.detailElem.children[5] as HTMLElement).style.visibility = 'visible'; (this.detailElem.children[5] as HTMLElement).style.visibility = 'visible';

11
src/modules/style.ts
Unescape View File

@ -11,18 +11,16 @@ style.textContent = css`
visibility: hidden !important; visibility: hidden !important;
} }
.detailPlayAction { .detailPlayAction {
margin-top: 10px;
color: rgb(15 17 19); color: rgb(15 17 19);
font-weight: bold; font-weight: bold;
float: left; float: left;
padding: 5px 10px; padding: 7px 10px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
background: orange; background: orange;
border: none; border: none;
visibility: hidden; visibility: hidden;
transition: 2s;
} }
.seasons { .seasons {
z-index: 5; z-index: 5;
@ -49,6 +47,7 @@ style.textContent = css`
white-space: nowrap; white-space: nowrap;
margin-bottom: 10px; margin-bottom: 10px;
float: left; float: left;
margin-right: 10px;
} }
.contentRatingDetail { .contentRatingDetail {
background: #ffffff24; background: #ffffff24;
@ -73,6 +72,7 @@ style.textContent = css`
} }
.detail .metaInfo { .detail .metaInfo {
display: block; display: block;
float: left;
} }
.detail h2 { .detail h2 {
text-overflow: ellipsis; text-overflow: ellipsis;
@ -252,6 +252,11 @@ style.textContent = css`
margin-bottom: 15px; margin-bottom: 15px;
transition: 0.5s; transition: 0.5s;
} }
.metaInfoDetails {
color: hsla(0, 0%, 98%, 0.45);
text-transform: uppercase;
margin-top: 10px;
}
.simulatedFullScreen { .simulatedFullScreen {
background: black; background: black;
height: 100%; height: 100%;

95
src/plex-meets-homeassistant.ts
Unescape View File

@ -326,8 +326,47 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.detailElem = document.createElement('div'); this.detailElem = document.createElement('div');
this.detailElem.className = 'detail'; this.detailElem.className = 'detail';
this.detailElem.innerHTML = this.detailElem.innerHTML = `<h1 class='detailsTitle'></h1>
"<h1></h1><h2></h2><span class='metaInfo'></span><span class='detailDesc'></span><div class='clear'></div><button class='detailPlayAction'>Fullscreen Trailer</button><div class='clear'></div>"; <h2 class='detailsYear'></h2>
<span class='metaInfo'></span>
<button class='detailPlayAction'>Fullscreen Trailer</button>
<div class='clear'></div>
<span class='detailDesc'></span>
<div class='clear'></div>
<table>
<tr>
<td class='metaInfoDetails'>
Directed by
</td>
<td class='metaInfoDetailsData'>
...
</td>
</tr>
<tr>
<td class='metaInfoDetails'>
Written by
</td>
<td class='metaInfoDetailsData'>
...
</td>
</tr>
<tr>
<td class='metaInfoDetails'>
Studio
</td>
<td class='metaInfoDetailsData'>
...
</td>
</tr>
<tr>
<td class='metaInfoDetails'>
Genre
</td>
<td class='metaInfoDetailsData'>
...
</td>
</tr>
</table>`;
this.detailElem.addEventListener('click', () => { this.detailElem.addEventListener('click', () => {
this.hideBackground(); this.hideBackground();
@ -606,6 +645,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}; };
showDetails = async (data: any): Promise<void> => { showDetails = async (data: any): Promise<void> => {
console.log(data);
this.detailsShown = true; this.detailsShown = true;
const top = this.getTop(); const top = this.getTop();
if (this.detailElem) { if (this.detailElem) {
@ -618,10 +658,50 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.detailElem.style.transition = '0.7s'; this.detailElem.style.transition = '0.7s';
this.detailElem.style.top = `${top}px`; this.detailElem.style.top = `${top}px`;
this.detailElem.children[0].innerHTML = escapeHtml(data.title); const directorElem = this.getElementsByClassName('metaInfoDetailsData')[0] as HTMLElement;
this.detailElem.children[1].innerHTML = escapeHtml(data.year); if (directorElem.parentElement) {
(this.detailElem.children[1] as HTMLElement).dataset.year = escapeHtml(data.year); if (data.Director && data.Director.length > 0) {
this.detailElem.children[2].innerHTML = `${(data.duration !== undefined 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
? `<span class='minutesDetail'>${Math.round( ? `<span class='minutesDetail'>${Math.round(
parseInt(escapeHtml(data.duration), 10) / 60 / 1000 parseInt(escapeHtml(data.duration), 10) / 60 / 1000
)} min</span>` )} min</span>`
@ -634,7 +714,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
parseFloat(escapeHtml(data.rating)) * 10 parseFloat(escapeHtml(data.rating)) * 10
) / 10}</span>` ) / 10}</span>`
: '')}<div class='clear'></div>`; : '')}<div class='clear'></div>`;
this.detailElem.children[3].innerHTML = escapeHtml(data.summary); (this.getElementsByClassName('detailDesc')[0] as HTMLElement).innerHTML = escapeHtml(data.summary);
/* todo temp disabled /* todo temp disabled
if (data.type === 'movie') { if (data.type === 'movie') {
(this.detailElem.children[5] as HTMLElement).style.visibility = 'visible'; (this.detailElem.children[5] as HTMLElement).style.visibility = 'visible';

Write Preview
Loading…
Cancel
Save