From ebe419d60f1ff3c2cc9d656a2dedb7d86e9c496f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Mon, 7 Jun 2021 14:51:28 +0200 Subject: [PATCH] Add: Theoretical support for tv show / episode trailers --- dist/plex-meets-homeassistant.js | 126 +++++++++++++-------------- src/plex-meets-homeassistant.ts | 143 +++++++++++++++---------------- 2 files changed, 134 insertions(+), 135 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index e62db63..3963b2b 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -20433,6 +20433,68 @@ 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 trailerURL = findTrailerURL(dataDetails); + if (trailerURL !== '') { + const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; + const video = document.createElement('video'); + video.style.height = '100%'; + video.style.width = '100%'; + video.controls = false; + 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 videobg1 = this.getElementsByClassName('videobg1')[0]; + const videobg2 = this.getElementsByClassName('videobg2')[0]; + video.addEventListener('click', event => { + if (isVideoFullScreen(this)) { + event.stopPropagation(); + } + }); + const fullScreenChangeAction = () => { + if (this.videoElem) { + if (isVideoFullScreen(this)) { + videobg1.classList.add('transparent'); + videobg2.classList.add('transparent'); + this.videoElem.classList.add('maxZIndex'); + video.controls = true; + } + else { + videobg1.classList.remove('transparent'); + videobg2.classList.remove('transparent'); + this.videoElem.classList.remove('maxZIndex'); + video.controls = false; + window.scroll({ + top: getOffset(this.activeMovieElem).top - 70, + behavior: 'smooth' + }); + } + } + }; + 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`; + } + }); + } + } if (!lodash.isEmpty(seasonsData)) { this.seasonElemFreshlyLoaded = true; if (this.seasonsElem) { @@ -20597,69 +20659,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { }, 200); } else { - const movieDetails = await this.plex.getDetails(data.key.split('/')[3]); - if (this.videoElem) { - const trailerURL = findTrailerURL(movieDetails); - if (trailerURL !== '') { - const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; - const video = document.createElement('video'); - video.style.height = '100%'; - video.style.width = '100%'; - video.controls = false; - const source = document.createElement('source'); - source.type = 'video/mp4'; - source.src = this.plex.authorizeURL(`${this.plex.getBasicURL()}${movieDetails.Extras.Metadata[0].Media[0].Part[0].key}`); - video.appendChild(source); - videoPlayer.appendChild(video); - video.load(); - video.play(); - let playingFired = false; - const videobg1 = this.getElementsByClassName('videobg1')[0]; - const videobg2 = this.getElementsByClassName('videobg2')[0]; - video.addEventListener('click', event => { - if (isVideoFullScreen(this)) { - event.stopPropagation(); - } - }); - const fullScreenChangeAction = () => { - if (this.videoElem) { - if (isVideoFullScreen(this)) { - videobg1.classList.add('transparent'); - videobg2.classList.add('transparent'); - this.videoElem.classList.add('maxZIndex'); - video.controls = true; - } - else { - videobg1.classList.remove('transparent'); - videobg2.classList.remove('transparent'); - this.videoElem.classList.remove('maxZIndex'); - video.controls = false; - window.scroll({ - top: getOffset(this.activeMovieElem).top - 70, - behavior: 'smooth' - }); - } - } - }; - 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`; - } - }); - } - } - const extras = movieDetails.Extras.Metadata; + const extras = dataDetails.Extras.Metadata; this.episodesElemFreshlyLoaded = true; if (this.episodesElem) { this.episodesElemHidden = false; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index cdc1120..1c5d620 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -751,6 +751,76 @@ 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 trailerURL = findTrailerURL(dataDetails); + if (trailerURL !== '') { + const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; + const video = document.createElement('video'); + video.style.height = '100%'; + video.style.width = '100%'; + video.controls = false; + 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 videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement; + const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement; + video.addEventListener('click', event => { + if (isVideoFullScreen(this)) { + event.stopPropagation(); + } + }); + const fullScreenChangeAction = (): void => { + if (this.videoElem) { + if (isVideoFullScreen(this)) { + videobg1.classList.add('transparent'); + videobg2.classList.add('transparent'); + + this.videoElem.classList.add('maxZIndex'); + video.controls = true; + } else { + videobg1.classList.remove('transparent'); + videobg2.classList.remove('transparent'); + + this.videoElem.classList.remove('maxZIndex'); + video.controls = false; + window.scroll({ + top: getOffset(this.activeMovieElem as Element).top - 70, + behavior: 'smooth' + }); + } + } + }; + 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`; + } + }); + } + } if (!_.isEmpty(seasonsData)) { this.seasonElemFreshlyLoaded = true; if (this.seasonsElem) { @@ -944,78 +1014,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }, 200); } else { - const movieDetails = await this.plex.getDetails(data.key.split('/')[3]); - if (this.videoElem) { - const trailerURL = findTrailerURL(movieDetails); - if (trailerURL !== '') { - const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; - const video = document.createElement('video'); - video.style.height = '100%'; - video.style.width = '100%'; - video.controls = false; - const source = document.createElement('source'); - source.type = 'video/mp4'; - source.src = this.plex.authorizeURL( - `${this.plex.getBasicURL()}${movieDetails.Extras.Metadata[0].Media[0].Part[0].key}` - ); - video.appendChild(source); - videoPlayer.appendChild(video); - - video.load(); - video.play(); - let playingFired = false; - - const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement; - const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement; - video.addEventListener('click', event => { - if (isVideoFullScreen(this)) { - event.stopPropagation(); - } - }); - const fullScreenChangeAction = () => { - if (this.videoElem) { - if (isVideoFullScreen(this)) { - videobg1.classList.add('transparent'); - videobg2.classList.add('transparent'); - - this.videoElem.classList.add('maxZIndex'); - video.controls = true; - } else { - videobg1.classList.remove('transparent'); - videobg2.classList.remove('transparent'); - - this.videoElem.classList.remove('maxZIndex'); - video.controls = false; - window.scroll({ - top: getOffset(this.activeMovieElem as Element).top - 70, - behavior: 'smooth' - }); - } - } - }; - 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`; - } - }); - } - } - - const extras = movieDetails.Extras.Metadata; + const extras = dataDetails.Extras.Metadata; this.episodesElemFreshlyLoaded = true; if (this.episodesElem) {