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

230
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) {
this.movieElems[i].style.width = `${CSS_STYLE.width}px`; if (lodash.isEqual(this.movieElems[i].style.width, this.movieElems[i].style.height)) {
this.movieElems[i].style.height = `${CSS_STYLE.height}px`; 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.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';
} }
} }
this.getElementsByClassName('detailsTitle')[0].innerHTML = escapeHtml(mainData.title); if (!lodash.isNil(mainData.channelCallSign)) {
this.getElementsByClassName('detailsTitle')[0].innerHTML = escapeHtml(mainData.channelCallSign);
}
else {
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,97 +21907,100 @@ 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 (this.videoElem) { if (!lodash.isNil(data.key)) {
const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); dataDetails = await this.plex.getDetails(data.key.split('/')[3]);
const trailerURL = findTrailerURL(dataDetails); if (this.videoElem) {
if (trailerURL !== '' && !lodash.isEqual(this.playTrailer, false)) { const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art);
const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; const trailerURL = findTrailerURL(dataDetails);
const video = document.createElement('video'); if (trailerURL !== '' && !lodash.isEqual(this.playTrailer, false)) {
video.style.height = '100%'; const videoPlayer = this.getElementsByClassName('videoPlayer')[0];
video.style.width = '100%'; const video = document.createElement('video');
video.controls = false; video.style.height = '100%';
if (lodash.isEqual(this.playTrailer, 'muted')) { video.style.width = '100%';
video.muted = true; video.controls = false;
} if (lodash.isEqual(this.playTrailer, 'muted')) {
const source = document.createElement('source'); video.muted = true;
source.type = 'video/mp4';
source.src = this.plex.authorizeURL(`${this.plex.getBasicURL()}${dataDetails.Extras.Metadata[0].Media[0].Part[0].key}`);
video.appendChild(source);
videoPlayer.appendChild(video);
video.load();
video.play();
let playingFired = false;
const videobgs1 = this.getElementsByClassName('videobg1');
const videobgs2 = this.getElementsByClassName('videobg2');
video.addEventListener('click', event => {
if (isVideoFullScreen(this)) {
event.stopPropagation();
} }
}); const source = document.createElement('source');
const fullScreenChangeAction = () => { source.type = 'video/mp4';
if (this.videoElem) { source.src = this.plex.authorizeURL(`${this.plex.getBasicURL()}${dataDetails.Extras.Metadata[0].Media[0].Part[0].key}`);
video.appendChild(source);
videoPlayer.appendChild(video);
video.load();
video.play();
let playingFired = false;
const videobgs1 = this.getElementsByClassName('videobg1');
const videobgs2 = this.getElementsByClassName('videobg2');
video.addEventListener('click', event => {
if (isVideoFullScreen(this)) { if (isVideoFullScreen(this)) {
// eslint-disable-next-line no-restricted-syntax event.stopPropagation();
for (const videobg1 of videobgs1) {
videobg1.classList.add('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.add('transparent');
}
this.videoElem.classList.add('maxZIndex');
video.controls = true;
video.muted = false;
} }
else { });
// eslint-disable-next-line no-restricted-syntax const fullScreenChangeAction = () => {
for (const videobg1 of videobgs1) { if (this.videoElem) {
videobg1.classList.remove('transparent'); if (isVideoFullScreen(this)) {
} // eslint-disable-next-line no-restricted-syntax
// eslint-disable-next-line no-restricted-syntax for (const videobg1 of videobgs1) {
for (const videobg2 of videobgs2) { videobg1.classList.add('transparent');
videobg2.classList.remove('transparent'); }
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.add('transparent');
}
this.videoElem.classList.add('maxZIndex');
video.controls = true;
video.muted = false;
} }
this.videoElem.classList.remove('maxZIndex'); else {
video.controls = false; // eslint-disable-next-line no-restricted-syntax
window.scroll({ for (const videobg1 of videobgs1) {
top: getOffset(this.activeMovieElem).top - 70, videobg1.classList.remove('transparent');
behavior: 'smooth' }
}); // eslint-disable-next-line no-restricted-syntax
if (lodash.isEqual(this.playTrailer, 'muted')) { for (const videobg2 of videobgs2) {
video.muted = true; videobg2.classList.remove('transparent');
}
this.videoElem.classList.remove('maxZIndex');
video.controls = false;
window.scroll({
top: getOffset(this.activeMovieElem).top - 70,
behavior: 'smooth'
});
if (lodash.isEqual(this.playTrailer, 'muted')) {
video.muted = true;
}
} }
} }
} };
}; video.addEventListener('fullscreenchange', fullScreenChangeAction);
video.addEventListener('fullscreenchange', fullScreenChangeAction); video.addEventListener('mozfullscreenchange', fullScreenChangeAction);
video.addEventListener('mozfullscreenchange', fullScreenChangeAction); video.addEventListener('webkitfullscreenchange', fullScreenChangeAction);
video.addEventListener('webkitfullscreenchange', fullScreenChangeAction); video.addEventListener('msfullscreenchange', fullScreenChangeAction);
video.addEventListener('msfullscreenchange', fullScreenChangeAction); video.addEventListener('playing', () => {
video.addEventListener('playing', () => { if (this.videoElem && !playingFired) {
if (this.videoElem && !playingFired) { const contentbg = this.getElementsByClassName('contentbg')[0];
const contentbg = this.getElementsByClassName('contentbg')[0]; const fullscreenTrailer = this.getElementsByClassName('detailPlayAction')[0];
const fullscreenTrailer = this.getElementsByClassName('detailPlayAction')[0]; fullscreenTrailer.style.visibility = 'visible';
fullscreenTrailer.style.visibility = 'visible'; contentbg.classList.add('no-transparency');
contentbg.classList.add('no-transparency'); playingFired = true;
playingFired = true; this.videoElem.style.width = `${this.getElementsByClassName('searchContainer')[0].offsetWidth}px`;
this.videoElem.style.width = `${this.getElementsByClassName('searchContainer')[0].offsetWidth}px`; this.videoElem.style.visibility = 'visible';
this.videoElem.style.visibility = 'visible'; this.videoElem.style.top = `${top}px`;
this.videoElem.style.top = `${top}px`; }
} });
}); }
} else if (!lodash.isEmpty(art)) {
else if (!lodash.isEmpty(art)) { const contentArt = this.getElementsByClassName('contentArt')[0];
const contentArt = this.getElementsByClassName('contentArt')[0]; const contentbg = this.getElementsByClassName('contentbg')[0];
const contentbg = this.getElementsByClassName('contentbg')[0]; contentArt.style.width = `${window.innerWidth}px`;
contentArt.style.width = `${window.innerWidth}px`; contentArt.style.height = `${window.innerHeight}px`;
contentArt.style.height = `${window.innerHeight}px`; contentArt.style.backgroundImage = `url('${art}')`;
contentArt.style.backgroundImage = `url('${art}')`; contentArt.style.top = `${top - 8}px`;
contentArt.style.top = `${top - 8}px`; contentArt.style.transition = '0.5s';
contentArt.style.transition = '0.5s'; contentArt.style.display = 'block';
contentArt.style.display = 'block'; contentbg.classList.add('no-transparency');
contentbg.classList.add('no-transparency'); }
} }
} }
if (!lodash.isEmpty(seasonsData)) { if (!lodash.isEmpty(seasonsData)) {
@ -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();
movieElemLocal.style.width = `${CSS_STYLE.width}px`; if (lodash.isEqual(movieElem.style.width, movieElem.style.height)) {
movieElemLocal.style.height = `${CSS_STYLE.height}px`; movieElemLocal.style.width = `${CSS_STYLE.width}px`;
movieElemLocal.style.height = `${CSS_STYLE.width}px`;
}
else {
movieElemLocal.style.width = `${CSS_STYLE.width}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();
movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`; if (lodash.isEqual(movieElem.style.width, movieElem.style.height)) {
movieElemLocal.style.height = `${CSS_STYLE.expandedHeight}px`; movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`;
movieElemLocal.style.height = `${CSS_STYLE.expandedWidth}px`;
}
else {
movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}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';
titleElem.style.marginTop = `${CSS_STYLE.height}px`; if (!lodash.isNil(data.channelCallSign)) {
titleElem.style.marginTop = `${CSS_STYLE.width}px`;
}
else {
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);

246
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) {
this.movieElems[i].style.width = `${CSS_STYLE.width}px`; if (_.isEqual(this.movieElems[i].style.width, this.movieElems[i].style.height)) {
this.movieElems[i].style.height = `${CSS_STYLE.height}px`; 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.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';
} }
} }
(this.getElementsByClassName('detailsTitle')[0] as HTMLElement).innerHTML = escapeHtml(mainData.title); 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('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,105 +1143,108 @@ 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 (this.videoElem) { if (!_.isNil(data.key)) {
const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); dataDetails = await this.plex.getDetails(data.key.split('/')[3]);
const trailerURL = findTrailerURL(dataDetails); if (this.videoElem) {
if (trailerURL !== '' && !_.isEqual(this.playTrailer, false)) { const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art);
const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; const trailerURL = findTrailerURL(dataDetails);
const video = document.createElement('video'); if (trailerURL !== '' && !_.isEqual(this.playTrailer, false)) {
video.style.height = '100%'; const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
video.style.width = '100%'; const video = document.createElement('video');
video.controls = false; video.style.height = '100%';
if (_.isEqual(this.playTrailer, 'muted')) { video.style.width = '100%';
video.muted = true; video.controls = false;
} if (_.isEqual(this.playTrailer, 'muted')) {
const source = document.createElement('source'); video.muted = true;
source.type = 'video/mp4';
source.src = this.plex.authorizeURL(
`${this.plex.getBasicURL()}${dataDetails.Extras.Metadata[0].Media[0].Part[0].key}`
);
video.appendChild(source);
videoPlayer.appendChild(video);
video.load();
video.play();
let playingFired = false;
const videobgs1 = this.getElementsByClassName('videobg1');
const videobgs2 = this.getElementsByClassName('videobg2');
video.addEventListener('click', event => {
if (isVideoFullScreen(this)) {
event.stopPropagation();
} }
}); const source = document.createElement('source');
const fullScreenChangeAction = (): void => { source.type = 'video/mp4';
if (this.videoElem) { source.src = this.plex.authorizeURL(
`${this.plex.getBasicURL()}${dataDetails.Extras.Metadata[0].Media[0].Part[0].key}`
);
video.appendChild(source);
videoPlayer.appendChild(video);
video.load();
video.play();
let playingFired = false;
const videobgs1 = this.getElementsByClassName('videobg1');
const videobgs2 = this.getElementsByClassName('videobg2');
video.addEventListener('click', event => {
if (isVideoFullScreen(this)) { if (isVideoFullScreen(this)) {
// eslint-disable-next-line no-restricted-syntax event.stopPropagation();
for (const videobg1 of videobgs1) { }
videobg1.classList.add('transparent'); });
} const fullScreenChangeAction = (): void => {
// eslint-disable-next-line no-restricted-syntax if (this.videoElem) {
for (const videobg2 of videobgs2) { if (isVideoFullScreen(this)) {
videobg2.classList.add('transparent'); // eslint-disable-next-line no-restricted-syntax
} for (const videobg1 of videobgs1) {
videobg1.classList.add('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.add('transparent');
}
this.videoElem.classList.add('maxZIndex'); this.videoElem.classList.add('maxZIndex');
video.controls = true; video.controls = true;
video.muted = false; video.muted = false;
} else { } else {
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) { for (const videobg1 of videobgs1) {
videobg1.classList.remove('transparent'); videobg1.classList.remove('transparent');
} }
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) { for (const videobg2 of videobgs2) {
videobg2.classList.remove('transparent'); videobg2.classList.remove('transparent');
} }
this.videoElem.classList.remove('maxZIndex'); this.videoElem.classList.remove('maxZIndex');
video.controls = false; video.controls = false;
window.scroll({ window.scroll({
top: getOffset(this.activeMovieElem as Element).top - 70, top: getOffset(this.activeMovieElem as Element).top - 70,
behavior: 'smooth' behavior: 'smooth'
}); });
if (_.isEqual(this.playTrailer, 'muted')) { if (_.isEqual(this.playTrailer, 'muted')) {
video.muted = true; video.muted = true;
}
} }
} }
} };
}; video.addEventListener('fullscreenchange', fullScreenChangeAction);
video.addEventListener('fullscreenchange', fullScreenChangeAction); video.addEventListener('mozfullscreenchange', fullScreenChangeAction);
video.addEventListener('mozfullscreenchange', fullScreenChangeAction); video.addEventListener('webkitfullscreenchange', fullScreenChangeAction);
video.addEventListener('webkitfullscreenchange', fullScreenChangeAction); video.addEventListener('msfullscreenchange', fullScreenChangeAction);
video.addEventListener('msfullscreenchange', fullScreenChangeAction);
video.addEventListener('playing', () => {
video.addEventListener('playing', () => { if (this.videoElem && !playingFired) {
if (this.videoElem && !playingFired) { const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement;
const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement; const fullscreenTrailer = this.getElementsByClassName('detailPlayAction')[0] as HTMLElement;
const fullscreenTrailer = this.getElementsByClassName('detailPlayAction')[0] as HTMLElement; fullscreenTrailer.style.visibility = 'visible';
fullscreenTrailer.style.visibility = 'visible'; contentbg.classList.add('no-transparency');
contentbg.classList.add('no-transparency'); playingFired = true;
playingFired = true; this.videoElem.style.width = `${
this.videoElem.style.width = `${ (this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth
(this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth }px`;
}px`; this.videoElem.style.visibility = 'visible';
this.videoElem.style.visibility = 'visible'; this.videoElem.style.top = `${top}px`;
this.videoElem.style.top = `${top}px`; }
} });
}); } else if (!_.isEmpty(art)) {
} else if (!_.isEmpty(art)) { const contentArt = this.getElementsByClassName('contentArt')[0] as HTMLElement;
const contentArt = this.getElementsByClassName('contentArt')[0] as HTMLElement; const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement;
const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement; contentArt.style.width = `${window.innerWidth}px`;
contentArt.style.width = `${window.innerWidth}px`; contentArt.style.height = `${window.innerHeight}px`;
contentArt.style.height = `${window.innerHeight}px`; contentArt.style.backgroundImage = `url('${art}')`;
contentArt.style.backgroundImage = `url('${art}')`; contentArt.style.top = `${top - 8}px`;
contentArt.style.top = `${top - 8}px`; contentArt.style.transition = '0.5s';
contentArt.style.transition = '0.5s';
contentArt.style.display = 'block';
contentArt.style.display = 'block'; contentbg.classList.add('no-transparency');
contentbg.classList.add('no-transparency'); }
} }
} }
if (!_.isEmpty(seasonsData)) { if (!_.isEmpty(seasonsData)) {
@ -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();
movieElemLocal.style.width = `${CSS_STYLE.width}px`; if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
movieElemLocal.style.height = `${CSS_STYLE.height}px`; movieElemLocal.style.width = `${CSS_STYLE.width}px`;
movieElemLocal.style.height = `${CSS_STYLE.width}px`;
} else {
movieElemLocal.style.width = `${CSS_STYLE.width}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();
movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`; if (_.isEqual(movieElem.style.width, movieElem.style.height)) {
movieElemLocal.style.height = `${CSS_STYLE.expandedHeight}px`; movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`;
movieElemLocal.style.height = `${CSS_STYLE.expandedWidth}px`;
} else {
movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}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';
titleElem.style.marginTop = `${CSS_STYLE.height}px`; if (!_.isNil(data.channelCallSign)) {
titleElem.style.marginTop = `${CSS_STYLE.width}px`;
} else {
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