From b9ed39b62962044329f0000626b825d95bdae17c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Wed, 1 Sep 2021 01:31:52 +0200 Subject: [PATCH] Add: WIP Nicer design for live TV view --- dist/plex-meets-homeassistant.js | 230 +++++++++++++++++------------ src/plex-meets-homeassistant.ts | 246 ++++++++++++++++++------------- 2 files changed, 280 insertions(+), 196 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 27006e5..1a167b3 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -21714,8 +21714,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.activeMovieElem = undefined; for (let i = 0; i < this.movieElems.length; i += 1) { if (parseInt(this.movieElems[i].style.width, 10) > CSS_STYLE.width) { - this.movieElems[i].style.width = `${CSS_STYLE.width}px`; - this.movieElems[i].style.height = `${CSS_STYLE.height}px`; + 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.height = `${CSS_STYLE.height}px`; + } this.movieElems[i].style['z-index'] = 1; this.movieElems[i].style.position = 'absolute'; this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`; @@ -21801,6 +21807,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) { @@ -21862,7 +21869,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { 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('metaInfo')[0].innerHTML = `${(mainData.duration !== undefined ? `${Math.round(parseInt(escapeHtml(mainData.duration), 10) / 60 / 1000)} min` @@ -21895,97 +21907,100 @@ class PlexMeetsHomeAssistant extends HTMLElement { else if (data.childCount > 0) { seasonsData = await this.plex.getLibraryData(data.key.split('/')[3]); } - const dataDetails = await this.plex.getDetails(data.key.split('/')[3]); - if (this.videoElem) { - const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); - const trailerURL = findTrailerURL(dataDetails); - if (trailerURL !== '' && !lodash.isEqual(this.playTrailer, false)) { - const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; - const video = document.createElement('video'); - video.style.height = '100%'; - video.style.width = '100%'; - video.controls = false; - if (lodash.isEqual(this.playTrailer, 'muted')) { - video.muted = true; - } - const source = document.createElement('source'); - 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(); + let dataDetails = {}; + if (!lodash.isNil(data.key)) { + dataDetails = await this.plex.getDetails(data.key.split('/')[3]); + if (this.videoElem) { + const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); + const trailerURL = findTrailerURL(dataDetails); + if (trailerURL !== '' && !lodash.isEqual(this.playTrailer, false)) { + const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; + const video = document.createElement('video'); + video.style.height = '100%'; + video.style.width = '100%'; + video.controls = false; + if (lodash.isEqual(this.playTrailer, 'muted')) { + video.muted = true; } - }); - const fullScreenChangeAction = () => { - if (this.videoElem) { + const source = document.createElement('source'); + 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)) { - // 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'); - video.controls = true; - video.muted = false; + event.stopPropagation(); } - else { - // eslint-disable-next-line no-restricted-syntax - for (const videobg1 of videobgs1) { - videobg1.classList.remove('transparent'); - } - // eslint-disable-next-line no-restricted-syntax - for (const videobg2 of videobgs2) { - videobg2.classList.remove('transparent'); + }); + const fullScreenChangeAction = () => { + if (this.videoElem) { + if (isVideoFullScreen(this)) { + // 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'); + video.controls = true; + video.muted = false; } - 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; + else { + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.remove('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + 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('mozfullscreenchange', fullScreenChangeAction); - video.addEventListener('webkitfullscreenchange', fullScreenChangeAction); - video.addEventListener('msfullscreenchange', fullScreenChangeAction); - video.addEventListener('playing', () => { - if (this.videoElem && !playingFired) { - const contentbg = this.getElementsByClassName('contentbg')[0]; - const fullscreenTrailer = this.getElementsByClassName('detailPlayAction')[0]; - fullscreenTrailer.style.visibility = 'visible'; - contentbg.classList.add('no-transparency'); - playingFired = true; - this.videoElem.style.width = `${this.getElementsByClassName('searchContainer')[0].offsetWidth}px`; - this.videoElem.style.visibility = 'visible'; - this.videoElem.style.top = `${top}px`; - } - }); - } - else if (!lodash.isEmpty(art)) { - const contentArt = this.getElementsByClassName('contentArt')[0]; - const contentbg = this.getElementsByClassName('contentbg')[0]; - contentArt.style.width = `${window.innerWidth}px`; - contentArt.style.height = `${window.innerHeight}px`; - contentArt.style.backgroundImage = `url('${art}')`; - contentArt.style.top = `${top - 8}px`; - contentArt.style.transition = '0.5s'; - contentArt.style.display = 'block'; - contentbg.classList.add('no-transparency'); + }; + video.addEventListener('fullscreenchange', fullScreenChangeAction); + video.addEventListener('mozfullscreenchange', fullScreenChangeAction); + video.addEventListener('webkitfullscreenchange', fullScreenChangeAction); + video.addEventListener('msfullscreenchange', fullScreenChangeAction); + video.addEventListener('playing', () => { + if (this.videoElem && !playingFired) { + const contentbg = this.getElementsByClassName('contentbg')[0]; + const fullscreenTrailer = this.getElementsByClassName('detailPlayAction')[0]; + fullscreenTrailer.style.visibility = 'visible'; + contentbg.classList.add('no-transparency'); + playingFired = true; + this.videoElem.style.width = `${this.getElementsByClassName('searchContainer')[0].offsetWidth}px`; + this.videoElem.style.visibility = 'visible'; + this.videoElem.style.top = `${top}px`; + } + }); + } + else if (!lodash.isEmpty(art)) { + const contentArt = this.getElementsByClassName('contentArt')[0]; + const contentbg = this.getElementsByClassName('contentbg')[0]; + contentArt.style.width = `${window.innerWidth}px`; + contentArt.style.height = `${window.innerHeight}px`; + contentArt.style.backgroundImage = `url('${art}')`; + contentArt.style.top = `${top - 8}px`; + contentArt.style.transition = '0.5s'; + contentArt.style.display = 'block'; + contentbg.classList.add('no-transparency'); + } } } 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; lodash.forEach(extras, extrasData => { if (this.episodesElem && this.playController && this.plex) { @@ -22227,8 +22242,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.minimizeAll(); this.activeMovieElem = undefined; this.hideDetails(); - movieElemLocal.style.width = `${CSS_STYLE.width}px`; - movieElemLocal.style.height = `${CSS_STYLE.height}px`; + 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.height = `${CSS_STYLE.height}px`; + } movieElemLocal.style.zIndex = '1'; movieElemLocal.style.top = `${movieElem.dataset.top}px`; movieElemLocal.style.left = `${movieElem.dataset.left}px`; @@ -22241,8 +22262,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { const top = this.getTop(); this.showDetails(this.activeMovieElemData); this.showBackground(); - movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`; - movieElemLocal.style.height = `${CSS_STYLE.expandedHeight}px`; + 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.height = `${CSS_STYLE.expandedHeight}px`; + } movieElemLocal.style.zIndex = '3'; movieElemLocal.style.left = '16px'; movieElemLocal.style.top = `${top + 16}px`; @@ -22285,6 +22312,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { movieElem.className = 'movieElem'; movieElem.style.width = `${CSS_STYLE.width}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}')`; if (this.playController && !this.playController.isPlaySupported(data)) { movieElem.style.cursor = 'pointer'; @@ -22330,11 +22364,19 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (lodash.isEqual(data.type, 'episode')) { titleElem.innerHTML = escapeHtml(data.grandparentTitle); } + else if (!lodash.isNil(data.channelCallSign)) { + titleElem.innerHTML = escapeHtml(data.channelCallSign); + } else { titleElem.innerHTML = escapeHtml(data.title); } 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'); if (lodash.isEqual(data.type, 'episode')) { yearElem.innerHTML = escapeHtml(data.title); diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 6262e2e..100b974 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -940,8 +940,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.activeMovieElem = undefined; for (let i = 0; i < this.movieElems.length; i += 1) { if (parseInt(this.movieElems[i].style.width, 10) > CSS_STYLE.width) { - this.movieElems[i].style.width = `${CSS_STYLE.width}px`; - this.movieElems[i].style.height = `${CSS_STYLE.height}px`; + 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.height = `${CSS_STYLE.height}px`; + } + this.movieElems[i].style['z-index'] = 1; this.movieElems[i].style.position = 'absolute'; this.movieElems[i].style.left = `${this.movieElems[i].dataset.left}px`; @@ -1032,6 +1038,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { }; showDetails = async (data: any): Promise => { + console.log(data); this.detailsShown = true; const top = this.getTop(); if (this.detailElem) { @@ -1091,7 +1098,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { 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('metaInfo')[0] as HTMLElement).innerHTML = `${(mainData.duration !== undefined ? `${Math.round( @@ -1129,105 +1143,108 @@ class PlexMeetsHomeAssistant extends HTMLElement { } else if (data.childCount > 0) { seasonsData = await this.plex.getLibraryData(data.key.split('/')[3]); } - const dataDetails = await this.plex.getDetails(data.key.split('/')[3]); - if (this.videoElem) { - const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); - const trailerURL = findTrailerURL(dataDetails); - if (trailerURL !== '' && !_.isEqual(this.playTrailer, false)) { - const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; - const video = document.createElement('video'); - video.style.height = '100%'; - video.style.width = '100%'; - video.controls = false; - if (_.isEqual(this.playTrailer, 'muted')) { - video.muted = true; - } - const source = document.createElement('source'); - 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(); + let dataDetails: Record = {}; + if (!_.isNil(data.key)) { + dataDetails = await this.plex.getDetails(data.key.split('/')[3]); + if (this.videoElem) { + const art = this.plex.authorizeURL(this.plex.getBasicURL() + data.art); + const trailerURL = findTrailerURL(dataDetails); + if (trailerURL !== '' && !_.isEqual(this.playTrailer, false)) { + const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; + const video = document.createElement('video'); + video.style.height = '100%'; + video.style.width = '100%'; + video.controls = false; + if (_.isEqual(this.playTrailer, 'muted')) { + video.muted = true; } - }); - const fullScreenChangeAction = (): void => { - if (this.videoElem) { + const source = document.createElement('source'); + 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)) { - // 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'); - } + event.stopPropagation(); + } + }); + const fullScreenChangeAction = (): void => { + if (this.videoElem) { + if (isVideoFullScreen(this)) { + // 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'); - video.controls = true; - video.muted = false; - } else { - // eslint-disable-next-line no-restricted-syntax - for (const videobg1 of videobgs1) { - videobg1.classList.remove('transparent'); - } - // eslint-disable-next-line no-restricted-syntax - for (const videobg2 of videobgs2) { - videobg2.classList.remove('transparent'); - } + this.videoElem.classList.add('maxZIndex'); + video.controls = true; + video.muted = false; + } else { + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.remove('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.remove('transparent'); + } - this.videoElem.classList.remove('maxZIndex'); - video.controls = false; - window.scroll({ - top: getOffset(this.activeMovieElem as Element).top - 70, - behavior: 'smooth' - }); - if (_.isEqual(this.playTrailer, 'muted')) { - video.muted = true; + this.videoElem.classList.remove('maxZIndex'); + video.controls = false; + window.scroll({ + top: getOffset(this.activeMovieElem as Element).top - 70, + behavior: 'smooth' + }); + if (_.isEqual(this.playTrailer, 'muted')) { + video.muted = true; + } } } - } - }; - video.addEventListener('fullscreenchange', fullScreenChangeAction); - video.addEventListener('mozfullscreenchange', fullScreenChangeAction); - video.addEventListener('webkitfullscreenchange', fullScreenChangeAction); - video.addEventListener('msfullscreenchange', fullScreenChangeAction); - - video.addEventListener('playing', () => { - if (this.videoElem && !playingFired) { - const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement; - const fullscreenTrailer = this.getElementsByClassName('detailPlayAction')[0] as HTMLElement; - fullscreenTrailer.style.visibility = 'visible'; - contentbg.classList.add('no-transparency'); - playingFired = true; - this.videoElem.style.width = `${ - (this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth - }px`; - this.videoElem.style.visibility = 'visible'; - this.videoElem.style.top = `${top}px`; - } - }); - } else if (!_.isEmpty(art)) { - const contentArt = this.getElementsByClassName('contentArt')[0] as HTMLElement; - const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement; - contentArt.style.width = `${window.innerWidth}px`; - contentArt.style.height = `${window.innerHeight}px`; - contentArt.style.backgroundImage = `url('${art}')`; - contentArt.style.top = `${top - 8}px`; - contentArt.style.transition = '0.5s'; - - contentArt.style.display = 'block'; - contentbg.classList.add('no-transparency'); + }; + video.addEventListener('fullscreenchange', fullScreenChangeAction); + video.addEventListener('mozfullscreenchange', fullScreenChangeAction); + video.addEventListener('webkitfullscreenchange', fullScreenChangeAction); + video.addEventListener('msfullscreenchange', fullScreenChangeAction); + + video.addEventListener('playing', () => { + if (this.videoElem && !playingFired) { + const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement; + const fullscreenTrailer = this.getElementsByClassName('detailPlayAction')[0] as HTMLElement; + fullscreenTrailer.style.visibility = 'visible'; + contentbg.classList.add('no-transparency'); + playingFired = true; + this.videoElem.style.width = `${ + (this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth + }px`; + this.videoElem.style.visibility = 'visible'; + this.videoElem.style.top = `${top}px`; + } + }); + } else if (!_.isEmpty(art)) { + const contentArt = this.getElementsByClassName('contentArt')[0] as HTMLElement; + const contentbg = this.getElementsByClassName('contentbg')[0] as HTMLElement; + contentArt.style.width = `${window.innerWidth}px`; + contentArt.style.height = `${window.innerHeight}px`; + contentArt.style.backgroundImage = `url('${art}')`; + contentArt.style.top = `${top - 8}px`; + contentArt.style.transition = '0.5s'; + + contentArt.style.display = 'block'; + contentbg.classList.add('no-transparency'); + } } } if (!_.isEmpty(seasonsData)) { @@ -1430,7 +1447,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { 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; _.forEach(extras, extrasData => { if (this.episodesElem && this.playController && this.plex) { @@ -1496,8 +1513,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.minimizeAll(); this.activeMovieElem = undefined; this.hideDetails(); - movieElemLocal.style.width = `${CSS_STYLE.width}px`; - movieElemLocal.style.height = `${CSS_STYLE.height}px`; + 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.height = `${CSS_STYLE.height}px`; + } movieElemLocal.style.zIndex = '1'; movieElemLocal.style.top = `${movieElem.dataset.top}px`; movieElemLocal.style.left = `${movieElem.dataset.left}px`; @@ -1511,8 +1533,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { const top = this.getTop(); this.showDetails(this.activeMovieElemData); this.showBackground(); - movieElemLocal.style.width = `${CSS_STYLE.expandedWidth}px`; - movieElemLocal.style.height = `${CSS_STYLE.expandedHeight}px`; + 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.height = `${CSS_STYLE.expandedHeight}px`; + } movieElemLocal.style.zIndex = '3'; movieElemLocal.style.left = '16px'; movieElemLocal.style.top = `${top + 16}px`; @@ -1562,6 +1589,15 @@ class PlexMeetsHomeAssistant extends HTMLElement { movieElem.style.width = `${CSS_STYLE.width}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}')`; if (this.playController && !this.playController.isPlaySupported(data)) { movieElem.style.cursor = 'pointer'; @@ -1620,11 +1656,17 @@ class PlexMeetsHomeAssistant extends HTMLElement { const titleElem = document.createElement('div'); if (_.isEqual(data.type, 'episode')) { titleElem.innerHTML = escapeHtml(data.grandparentTitle); + } else if (!_.isNil(data.channelCallSign)) { + titleElem.innerHTML = escapeHtml(data.channelCallSign); } else { titleElem.innerHTML = escapeHtml(data.title); } 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'); if (_.isEqual(data.type, 'episode')) {