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

Add: WIP Nicer design for live TV view

Browse Source
live_tv
Juraj Nyíri 3 years ago
parent f8b8ddb6d2
commit b9ed39b629
2 changed files with 280 additions and 196 deletions
Show Stats Download Patch File Download Diff File

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

@ -21714,8 +21714,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.activeMovieElem = undefined; this.activeMovieElem = undefined;
for (let i = 0; i < this.movieElems.length; i += 1) { for (let i = 0; i < this.movieElems.length; i += 1) {
if (parseInt(this.movieElems[i].style.width, 10) > CSS_STYLE.width) { if (parseInt(this.movieElems[i].style.width, 10) > CSS_STYLE.width) {
if (lodash.isEqual(this.movieElems[i].style.width, this.movieElems[i].style.height)) {
this.movieElems[i].style.width = `${CSS_STYLE.width}px`;
this.movieElems[i].style.height = `${CSS_STYLE.width}px`;
}
else {
this.movieElems[i].style.width = `${CSS_STYLE.width}px`; this.movieElems[i].style.width = `${CSS_STYLE.width}px`;
this.movieElems[i].style.height = `${CSS_STYLE.height}px`; this.movieElems[i].style.height = `${CSS_STYLE.height}px`;
}
this.movieElems[i].style['z-index'] = 1; this.movieElems[i].style['z-index'] = 1;
this.movieElems[i].style.position = 'absolute'; this.movieElems[i].style.position = 'absolute';
this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`; this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`;
@ -21801,6 +21807,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) {
@ -21862,7 +21869,12 @@ class PlexMeetsHomeAssistant extends HTMLElement {
genreElem.parentElement.style.display = 'none'; genreElem.parentElement.style.display = 'none';
} }
} }
if (!lodash.isNil(mainData.channelCallSign)) {
this.getElementsByClassName('detailsTitle')[0].innerHTML = escapeHtml(mainData.channelCallSign);
}
else {
this.getElementsByClassName('detailsTitle')[0].innerHTML = escapeHtml(mainData.title); this.getElementsByClassName('detailsTitle')[0].innerHTML = escapeHtml(mainData.title);
}
this.getElementsByClassName('detailsYear')[0].innerHTML = escapeHtml(mainData.year); this.getElementsByClassName('detailsYear')[0].innerHTML = escapeHtml(mainData.year);
this.getElementsByClassName('metaInfo')[0].innerHTML = `${(mainData.duration !== undefined this.getElementsByClassName('metaInfo')[0].innerHTML = `${(mainData.duration !== undefined
? `<span class='minutesDetail'>${Math.round(parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000)} min</span>` ? `<span class='minutesDetail'>${Math.round(parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000)} min</span>`
@ -21895,7 +21907,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
else if (data.childCount > 0) { else if (data.childCount > 0) {
seasonsData = await this.plex.getLibraryData(data.key.split('/')[3]); seasonsData = await this.plex.getLibraryData(data.key.split('/')[3]);
} }
const dataDetails = await this.plex.getDetails(data.key.split('/')[3]); let dataDetails = {};
if (!lodash.isNil(data.key)) {
dataDetails = await this.plex.getDetails(data.key.split('/')[3]);
if (this.videoElem) { if (this.videoElem) {
const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art);
const trailerURL = findTrailerURL(dataDetails); const trailerURL = findTrailerURL(dataDetails);
@ -21988,6 +22002,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
contentbg.classList.add('no-transparency'); contentbg.classList.add('no-transparency');
} }
} }
}
if (!lodash.isEmpty(seasonsData)) { if (!lodash.isEmpty(seasonsData)) {
this.seasonElemFreshlyLoaded = true; this.seasonElemFreshlyLoaded = true;
if (this.seasonsElem) { if (this.seasonsElem) {
@ -22167,7 +22182,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
}); });
} }
else if (this.showExtras) { else if (this.showExtras && !lodash.isNil(dataDetails.Extras)) {
const extras = dataDetails.Extras.Metadata; const extras = dataDetails.Extras.Metadata;
lodash.forEach(extras, extrasData => { lodash.forEach(extras, extrasData => {
if (this.episodesElem && this.playController && this.plex) { if (this.episodesElem && this.playController && this.plex) {
@ -22227,8 +22242,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.minimizeAll(); this.minimizeAll();
this.activeMovieElem = undefined; this.activeMovieElem = undefined;
this.hideDetails(); this.hideDetails();
if (lodash.isEqual(movieElem.style.width, movieElem.style.height)) {
movieElemLocal.style.width = `${CSS_STYLE.width}px`;
movieElemLocal.style.height = `${CSS_STYLE.width}px`;
}
else {
movieElemLocal.style.width = `${CSS_STYLE.width}px`; movieElemLocal.style.width = `${CSS_STYLE.width}px`;
movieElemLocal.style.height = `${CSS_STYLE.height}px`; movieElemLocal.style.height = `${CSS_STYLE.height}px`;
}
movieElemLocal.style.zIndex = '1'; movieElemLocal.style.zIndex = '1';
movieElemLocal.style.top = `${movieElem.dataset.top}px`; movieElemLocal.style.top = `${movieElem.dataset.top}px`;
movieElemLocal.style.left = `${movieElem.dataset.left}px`; movieElemLocal.style.left = `${movieElem.dataset.left}px`;
@ -22241,8 +22262,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const top = this.getTop(); const top = this.getTop();
this.showDetails(this.activeMovieElemData); this.showDetails(this.activeMovieElemData);
this.showBackground(); this.showBackground();
if (lodash.isEqual(movieElem.style.width, movieElem.style.height)) {
movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`;
movieElemLocal.style.height = `${CSS_STYLE.expandedWidth}px`;
}
else {
movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`; movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`;
movieElemLocal.style.height = `${CSS_STYLE.expandedHeight}px`; movieElemLocal.style.height = `${CSS_STYLE.expandedHeight}px`;
}
movieElemLocal.style.zIndex = '3'; movieElemLocal.style.zIndex = '3';
movieElemLocal.style.left = '16px'; movieElemLocal.style.left = '16px';
movieElemLocal.style.top = `${top + 16}px`; movieElemLocal.style.top = `${top + 16}px`;
@ -22285,6 +22312,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
movieElem.className = 'movieElem'; movieElem.className = 'movieElem';
movieElem.style.width = `${CSS_STYLE.width}px`; movieElem.style.width = `${CSS_STYLE.width}px`;
movieElem.style.height = `${CSS_STYLE.height}px`; movieElem.style.height = `${CSS_STYLE.height}px`;
if (!lodash.isNil(data.channelCallSign)) {
movieElem.style.backgroundSize = '80%';
movieElem.style.backgroundColor = 'rgba(0,0,0,0.2)';
movieElem.style.backgroundPosition = 'center';
container.style.height = container.style.width;
movieElem.style.height = `${CSS_STYLE.width}px`;
}
movieElem.style.backgroundImage = `url('${thumbURL}')`; movieElem.style.backgroundImage = `url('${thumbURL}')`;
if (this.playController && !this.playController.isPlaySupported(data)) { if (this.playController && !this.playController.isPlaySupported(data)) {
movieElem.style.cursor = 'pointer'; movieElem.style.cursor = 'pointer';
@ -22330,11 +22364,19 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (lodash.isEqual(data.type, 'episode')) { if (lodash.isEqual(data.type, 'episode')) {
titleElem.innerHTML = escapeHtml(data.grandparentTitle); titleElem.innerHTML = escapeHtml(data.grandparentTitle);
} }
else if (!lodash.isNil(data.channelCallSign)) {
titleElem.innerHTML = escapeHtml(data.channelCallSign);
}
else { else {
titleElem.innerHTML = escapeHtml(data.title); titleElem.innerHTML = escapeHtml(data.title);
} }
titleElem.className = 'titleElem'; titleElem.className = 'titleElem';
if (!lodash.isNil(data.channelCallSign)) {
titleElem.style.marginTop = `${CSS_STYLE.width}px`;
}
else {
titleElem.style.marginTop = `${CSS_STYLE.height}px`; titleElem.style.marginTop = `${CSS_STYLE.height}px`;
}
const yearElem = document.createElement('div'); const yearElem = document.createElement('div');
if (lodash.isEqual(data.type, 'episode')) { if (lodash.isEqual(data.type, 'episode')) {
yearElem.innerHTML = escapeHtml(data.title); yearElem.innerHTML = escapeHtml(data.title);

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

@ -940,8 +940,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.activeMovieElem = undefined; this.activeMovieElem = undefined;
for (let i = 0; i < this.movieElems.length; i += 1) { for (let i = 0; i < this.movieElems.length; i += 1) {
if (parseInt(this.movieElems[i].style.width, 10) > CSS_STYLE.width) { if (parseInt(this.movieElems[i].style.width, 10) > CSS_STYLE.width) {
if (_.isEqual(this.movieElems[i].style.width, this.movieElems[i].style.height)) {
this.movieElems[i].style.width = `${CSS_STYLE.width}px`;
this.movieElems[i].style.height = `${CSS_STYLE.width}px`;
} else {
this.movieElems[i].style.width = `${CSS_STYLE.width}px`; this.movieElems[i].style.width = `${CSS_STYLE.width}px`;
this.movieElems[i].style.height = `${CSS_STYLE.height}px`; this.movieElems[i].style.height = `${CSS_STYLE.height}px`;
}
this.movieElems[i].style['z-index'] = 1; this.movieElems[i].style['z-index'] = 1;
this.movieElems[i].style.position = 'absolute'; this.movieElems[i].style.position = 'absolute';
this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`; this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`;
@ -1032,6 +1038,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) {
@ -1091,7 +1098,14 @@ class PlexMeetsHomeAssistant extends HTMLElement {
genreElem.parentElement.style.display = 'none'; genreElem.parentElement.style.display = 'none';
} }
} }
if (!_.isNil(mainData.channelCallSign)) {
(this.getElementsByClassName('detailsTitle')[0] as HTMLElement).innerHTML = escapeHtml(
mainData.channelCallSign
);
} else {
(this.getElementsByClassName('detailsTitle')[0] as HTMLElement).innerHTML = escapeHtml(mainData.title); (this.getElementsByClassName('detailsTitle')[0] as HTMLElement).innerHTML = escapeHtml(mainData.title);
}
(this.getElementsByClassName('detailsYear')[0] as HTMLElement).innerHTML = escapeHtml(mainData.year); (this.getElementsByClassName('detailsYear')[0] as HTMLElement).innerHTML = escapeHtml(mainData.year);
(this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined (this.getElementsByClassName('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined
? `<span class='minutesDetail'>${Math.round( ? `<span class='minutesDetail'>${Math.round(
@ -1129,7 +1143,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} else if (data.childCount > 0) { } else if (data.childCount > 0) {
seasonsData = await this.plex.getLibraryData(data.key.split('/')[3]); seasonsData = await this.plex.getLibraryData(data.key.split('/')[3]);
} }
const dataDetails = await this.plex.getDetails(data.key.split('/')[3]); let dataDetails: Record<string, any> = {};
if (!_.isNil(data.key)) {
dataDetails = await this.plex.getDetails(data.key.split('/')[3]);
if (this.videoElem) { if (this.videoElem) {
const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art);
const trailerURL = findTrailerURL(dataDetails); const trailerURL = findTrailerURL(dataDetails);
@ -1230,6 +1246,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
contentbg.classList.add('no-transparency'); contentbg.classList.add('no-transparency');
} }
} }
}
if (!_.isEmpty(seasonsData)) { if (!_.isEmpty(seasonsData)) {
this.seasonElemFreshlyLoaded = true; this.seasonElemFreshlyLoaded = true;
if (this.seasonsElem) { if (this.seasonsElem) {
@ -1430,7 +1447,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData)); this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData));
} }
}); });
} else if (this.showExtras) { } else if (this.showExtras && !_.isNil(dataDetails.Extras)) {
const extras = dataDetails.Extras.Metadata; const extras = dataDetails.Extras.Metadata;
_.forEach(extras, extrasData => { _.forEach(extras, extrasData => {
if (this.episodesElem && this.playController && this.plex) { if (this.episodesElem && this.playController && this.plex) {
@ -1496,8 +1513,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.minimizeAll(); this.minimizeAll();
this.activeMovieElem = undefined; this.activeMovieElem = undefined;
this.hideDetails(); this.hideDetails();
if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
movieElemLocal.style.width = `${CSS_STYLE.width}px`;
movieElemLocal.style.height = `${CSS_STYLE.width}px`;
} else {
movieElemLocal.style.width = `${CSS_STYLE.width}px`; movieElemLocal.style.width = `${CSS_STYLE.width}px`;
movieElemLocal.style.height = `${CSS_STYLE.height}px`; movieElemLocal.style.height = `${CSS_STYLE.height}px`;
}
movieElemLocal.style.zIndex = '1'; movieElemLocal.style.zIndex = '1';
movieElemLocal.style.top = `${movieElem.dataset.top}px`; movieElemLocal.style.top = `${movieElem.dataset.top}px`;
movieElemLocal.style.left = `${movieElem.dataset.left}px`; movieElemLocal.style.left = `${movieElem.dataset.left}px`;
@ -1511,8 +1533,13 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const top = this.getTop(); const top = this.getTop();
this.showDetails(this.activeMovieElemData); this.showDetails(this.activeMovieElemData);
this.showBackground(); this.showBackground();
if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`;
movieElemLocal.style.height = `${CSS_STYLE.expandedWidth}px`;
} else {
movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`; movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`;
movieElemLocal.style.height = `${CSS_STYLE.expandedHeight}px`; movieElemLocal.style.height = `${CSS_STYLE.expandedHeight}px`;
}
movieElemLocal.style.zIndex = '3'; movieElemLocal.style.zIndex = '3';
movieElemLocal.style.left = '16px'; movieElemLocal.style.left = '16px';
movieElemLocal.style.top = `${top + 16}px`; movieElemLocal.style.top = `${top + 16}px`;
@ -1562,6 +1589,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
movieElem.style.width = `${CSS_STYLE.width}px`; movieElem.style.width = `${CSS_STYLE.width}px`;
movieElem.style.height = `${CSS_STYLE.height}px`; movieElem.style.height = `${CSS_STYLE.height}px`;
if (!_.isNil(data.channelCallSign)) {
movieElem.style.backgroundSize = '80%';
movieElem.style.backgroundColor = 'rgba(0,0,0,0.2)';
movieElem.style.backgroundPosition = 'center';
container.style.height = container.style.width;
movieElem.style.height = `${CSS_STYLE.width}px`;
}
movieElem.style.backgroundImage = `url('${thumbURL}')`; movieElem.style.backgroundImage = `url('${thumbURL}')`;
if (this.playController && !this.playController.isPlaySupported(data)) { if (this.playController && !this.playController.isPlaySupported(data)) {
movieElem.style.cursor = 'pointer'; movieElem.style.cursor = 'pointer';
@ -1620,11 +1656,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const titleElem = document.createElement('div'); const titleElem = document.createElement('div');
if (_.isEqual(data.type, 'episode')) { if (_.isEqual(data.type, 'episode')) {
titleElem.innerHTML = escapeHtml(data.grandparentTitle); titleElem.innerHTML = escapeHtml(data.grandparentTitle);
} else if (!_.isNil(data.channelCallSign)) {
titleElem.innerHTML = escapeHtml(data.channelCallSign);
} else { } else {
titleElem.innerHTML = escapeHtml(data.title); titleElem.innerHTML = escapeHtml(data.title);
} }
titleElem.className = 'titleElem'; titleElem.className = 'titleElem';
if (!_.isNil(data.channelCallSign)) {
titleElem.style.marginTop = `${CSS_STYLE.width}px`;
} else {
titleElem.style.marginTop = `${CSS_STYLE.height}px`; titleElem.style.marginTop = `${CSS_STYLE.height}px`;
}
const yearElem = document.createElement('div'); const yearElem = document.createElement('div');
if (_.isEqual(data.type, 'episode')) { if (_.isEqual(data.type, 'episode')) {

Write Preview
Loading…
Cancel
Save