From 3fee97092a037c01117a7e549225a8bdd38f87bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Sun, 6 Jun 2021 00:18:31 +0200 Subject: [PATCH] Update: Video now in background, plays correct trailer and closes on minimalization --- dist/plex-meets-homeassistant.js | 64 +++++++++++++++++++++++--------- src/modules/style.ts | 9 +++-- src/modules/utils.ts | 17 ++++++++- src/plex-meets-homeassistant.ts | 58 ++++++++++++++++++++--------- 4 files changed, 108 insertions(+), 40 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 924bbf6..2f03f70 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19053,6 +19053,20 @@ const getOffset = (el) => { } return { top: y, left: x }; }; +const findTrailerURL = (movieData) => { + console.log(movieData.Extras); + console.log(movieData.Extras.Metadata); + let foundURL = ''; + if (movieData.Extras && movieData.Extras.Metadata && movieData.Extras.Metadata.length > 0) { + lodash.forEach(movieData.Extras.Metadata, extra => { + if (extra.subtype === 'trailer') { + foundURL = extra.Media[0].Part[0].key; + return false; + } + }); + } + return foundURL; +}; const createEpisodesView = (playController, plexProtocol, ip, port, token, data) => { const episodeContainer = document.createElement('div'); episodeContainer.className = 'episodeContainer'; @@ -19387,7 +19401,7 @@ style.textContent = css ` display: none; } .episodes { - z-index: 4; + z-index: 5; position: absolute; top: ${CSS_STYLE.expandedHeight + 16}px; width: calc(100% - 32px); @@ -19513,7 +19527,7 @@ style.textContent = css ` position: absolute; left: 247px; width: calc(100% - 267px); - z-index: 4; + z-index: 5; transition: 0.5s; color: rgba(255, 255, 255, 0); } @@ -19637,10 +19651,11 @@ style.textContent = css ` } .video { position: absolute; - z-index: 5; + z-index: 3; + visibility: hidden; } .movieExtras { - z-index: 4; + z-index: 5; position: absolute; top: 340px; width: calc(100% - 32px); @@ -19945,14 +19960,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideBackground(); this.minimizeAll(); }); - const player = document.createElement('video'); - player.style.height = '100%'; - player.style.width = '100%'; - player.controls = true; - const source = document.createElement('source'); - source.type = 'video/mp4'; - player.appendChild(source); - this.videoElem.appendChild(player); this.content.appendChild(this.videoElem); // todo: figure out why timeout is needed here and do it properly setTimeout(() => { @@ -20025,6 +20032,11 @@ class PlexMeetsHomeAssistant extends HTMLElement { }); } }; + this.hideVideo = () => { + if (this.videoElem) { + this.videoElem.innerHTML = ''; + } + }; this.minimizeAll = () => { this.detailsShown = false; if (this.activeMovieElem) { @@ -20045,6 +20057,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideSeasons(); this.hideEpisodes(); this.hideDetails(); + this.hideVideo(); clearInterval(this.showDetailsTimeout); clearInterval(this.showSeasonElemTimeout); clearInterval(this.seasonTitleColorTimeout); @@ -20322,11 +20335,28 @@ class PlexMeetsHomeAssistant extends HTMLElement { else { const movieDetails = await this.plex.getDetails(data.key.split('/')[3]); if (this.videoElem) { - const videoElem = this.videoElem.children[0]; - const sourceElem = videoElem.children[0]; - sourceElem.src = this.plex.authorizeURL(`${this.plex.getBasicURL()}${movieDetails.Extras.Metadata[0].Media[0].Part[0].key}`); - videoElem.load(); - videoElem.play(); + const trailerURL = findTrailerURL(movieDetails); + if (trailerURL !== '') { + 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); + this.videoElem.appendChild(video); + video.load(); + video.play(); + let playingFired = false; + video.addEventListener('playing', () => { + if (this.videoElem && !playingFired) { + playingFired = true; + this.videoElem.style.visibility = 'visible'; + this.videoElem.style.top = `${top}px`; + } + }); + } } console.log(); const extras = movieDetails.Extras.Metadata; diff --git a/src/modules/style.ts b/src/modules/style.ts index c371cad..003dff2 100644 --- a/src/modules/style.ts +++ b/src/modules/style.ts @@ -24,7 +24,7 @@ style.textContent = css` display: none; } .episodes { - z-index: 4; + z-index: 5; position: absolute; top: ${CSS_STYLE.expandedHeight + 16}px; width: calc(100% - 32px); @@ -150,7 +150,7 @@ style.textContent = css` position: absolute; left: 247px; width: calc(100% - 267px); - z-index: 4; + z-index: 5; transition: 0.5s; color: rgba(255, 255, 255, 0); } @@ -274,10 +274,11 @@ style.textContent = css` } .video { position: absolute; - z-index: 5; + z-index: 3; + visibility: hidden; } .movieExtras { - z-index: 4; + z-index: 5; position: absolute; top: 340px; width: calc(100% - 32px); diff --git a/src/modules/utils.ts b/src/modules/utils.ts index 3c7249b..05e29e6 100644 --- a/src/modules/utils.ts +++ b/src/modules/utils.ts @@ -43,6 +43,21 @@ const getOffset = (el: Element): Record => { return { top: y, left: x }; }; +const findTrailerURL = (movieData: Record): string => { + console.log(movieData.Extras); + console.log(movieData.Extras.Metadata); + let foundURL = ''; + if (movieData.Extras && movieData.Extras.Metadata && movieData.Extras.Metadata.length > 0) { + _.forEach(movieData.Extras.Metadata, extra => { + if (extra.subtype === 'trailer') { + foundURL = extra.Media[0].Part[0].key; + return false; + } + }); + } + return foundURL; +}; + const createEpisodesView = ( playController: PlayController, plexProtocol: string, @@ -136,4 +151,4 @@ const isScrolledIntoView = (elem: HTMLElement): boolean => { }; // eslint-disable-next-line import/prefer-default-export -export { escapeHtml, getOffset, isScrolledIntoView, getHeight, createEpisodesView }; +export { escapeHtml, getOffset, isScrolledIntoView, getHeight, createEpisodesView, findTrailerURL }; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 76f0b03..fc0fee1 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -5,7 +5,14 @@ import _ from 'lodash'; import { supported, CSS_STYLE } from './const'; import Plex from './modules/Plex'; import PlayController from './modules/PlayController'; -import { escapeHtml, getOffset, isScrolledIntoView, getHeight, createEpisodesView } from './modules/utils'; +import { + escapeHtml, + getOffset, + isScrolledIntoView, + getHeight, + createEpisodesView, + findTrailerURL +} from './modules/utils'; import style from './modules/style'; class PlexMeetsHomeAssistant extends HTMLElement { @@ -334,14 +341,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideBackground(); this.minimizeAll(); }); - const player = document.createElement('video'); - player.style.height = '100%'; - player.style.width = '100%'; - player.controls = true; - const source = document.createElement('source'); - source.type = 'video/mp4'; - player.appendChild(source); - this.videoElem.appendChild(player); this.content.appendChild(this.videoElem); // todo: figure out why timeout is needed here and do it properly @@ -421,6 +420,12 @@ class PlexMeetsHomeAssistant extends HTMLElement { } }; + hideVideo = (): void => { + if (this.videoElem) { + this.videoElem.innerHTML = ''; + } + }; + minimizeAll = (): void => { this.detailsShown = false; if (this.activeMovieElem) { @@ -442,6 +447,7 @@ class PlexMeetsHomeAssistant extends HTMLElement { this.hideSeasons(); this.hideEpisodes(); this.hideDetails(); + this.hideVideo(); clearInterval(this.showDetailsTimeout); clearInterval(this.showSeasonElemTimeout); clearInterval(this.seasonTitleColorTimeout); @@ -759,15 +765,31 @@ class PlexMeetsHomeAssistant extends HTMLElement { } else { const movieDetails = await this.plex.getDetails(data.key.split('/')[3]); if (this.videoElem) { - const videoElem = this.videoElem.children[0] as HTMLVideoElement; - const sourceElem = videoElem.children[0] as HTMLSourceElement; - - sourceElem.src = this.plex.authorizeURL( - `${this.plex.getBasicURL()}${movieDetails.Extras.Metadata[0].Media[0].Part[0].key}` - ); - - videoElem.load(); - videoElem.play(); + const trailerURL = findTrailerURL(movieDetails); + if (trailerURL !== '') { + 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); + this.videoElem.appendChild(video); + + video.load(); + video.play(); + let playingFired = false; + video.addEventListener('playing', () => { + if (this.videoElem && !playingFired) { + playingFired = true; + this.videoElem.style.visibility = 'visible'; + this.videoElem.style.top = `${top}px`; + } + }); + } } console.log();