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

Update: Video now in background, plays correct trailer and closes on minimalization

Browse Source
pull/16/head
Juraj Nyíri 3 years ago
parent cd66a9eb68
commit 3fee97092a
4 changed files with 108 additions and 40 deletions
Show Stats Download Patch File Download Diff File

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

@ -19053,6 +19053,20 @@ const getOffset = (el) => {
} }
return { top: y, left: x }; 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 createEpisodesView = (playController, plexProtocol, ip, port, token, data) => {
const episodeContainer = document.createElement('div'); const episodeContainer = document.createElement('div');
episodeContainer.className = 'episodeContainer'; episodeContainer.className = 'episodeContainer';
@ -19387,7 +19401,7 @@ style.textContent = css `
display: none; display: none;
} }
.episodes { .episodes {
z-index: 4; z-index: 5;
position: absolute; position: absolute;
top: ${CSS_STYLE.expandedHeight + 16}px; top: ${CSS_STYLE.expandedHeight + 16}px;
width: calc(100% - 32px); width: calc(100% - 32px);
@ -19513,7 +19527,7 @@ style.textContent = css `
position: absolute; position: absolute;
left: 247px; left: 247px;
width: calc(100% - 267px); width: calc(100% - 267px);
z-index: 4; z-index: 5;
transition: 0.5s; transition: 0.5s;
color: rgba(255, 255, 255, 0); color: rgba(255, 255, 255, 0);
} }
@ -19637,10 +19651,11 @@ style.textContent = css `
} }
.video { .video {
position: absolute; position: absolute;
z-index: 5; z-index: 3;
visibility: hidden;
} }
.movieExtras { .movieExtras {
z-index: 4; z-index: 5;
position: absolute; position: absolute;
top: 340px; top: 340px;
width: calc(100% - 32px); width: calc(100% - 32px);
@ -19945,14 +19960,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); 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); this.content.appendChild(this.videoElem);
// todo: figure out why timeout is needed here and do it properly // todo: figure out why timeout is needed here and do it properly
setTimeout(() => { setTimeout(() => {
@ -20025,6 +20032,11 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}); });
} }
}; };
this.hideVideo = () => {
if (this.videoElem) {
this.videoElem.innerHTML = '';
}
};
this.minimizeAll = () => { this.minimizeAll = () => {
this.detailsShown = false; this.detailsShown = false;
if (this.activeMovieElem) { if (this.activeMovieElem) {
@ -20045,6 +20057,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideSeasons(); this.hideSeasons();
this.hideEpisodes(); this.hideEpisodes();
this.hideDetails(); this.hideDetails();
this.hideVideo();
clearInterval(this.showDetailsTimeout); clearInterval(this.showDetailsTimeout);
clearInterval(this.showSeasonElemTimeout); clearInterval(this.showSeasonElemTimeout);
clearInterval(this.seasonTitleColorTimeout); clearInterval(this.seasonTitleColorTimeout);
@ -20322,11 +20335,28 @@ class PlexMeetsHomeAssistant extends HTMLElement {
else { else {
const movieDetails = await this.plex.getDetails(data.key.split('/')[3]); const movieDetails = await this.plex.getDetails(data.key.split('/')[3]);
if (this.videoElem) { if (this.videoElem) {
const videoElem = this.videoElem.children[0]; const trailerURL = findTrailerURL(movieDetails);
const sourceElem = videoElem.children[0]; if (trailerURL !== '') {
sourceElem.src = this.plex.authorizeURL(`${this.plex.getBasicURL()}${movieDetails.Extras.Metadata[0].Media[0].Part[0].key}`); const video = document.createElement('video');
videoElem.load(); video.style.height = '100%';
videoElem.play(); 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(); console.log();
const extras = movieDetails.Extras.Metadata; const extras = movieDetails.Extras.Metadata;

9
src/modules/style.ts
Unescape View File

@ -24,7 +24,7 @@ style.textContent = css`
display: none; display: none;
} }
.episodes { .episodes {
z-index: 4; z-index: 5;
position: absolute; position: absolute;
top: ${CSS_STYLE.expandedHeight + 16}px; top: ${CSS_STYLE.expandedHeight + 16}px;
width: calc(100% - 32px); width: calc(100% - 32px);
@ -150,7 +150,7 @@ style.textContent = css`
position: absolute; position: absolute;
left: 247px; left: 247px;
width: calc(100% - 267px); width: calc(100% - 267px);
z-index: 4; z-index: 5;
transition: 0.5s; transition: 0.5s;
color: rgba(255, 255, 255, 0); color: rgba(255, 255, 255, 0);
} }
@ -274,10 +274,11 @@ style.textContent = css`
} }
.video { .video {
position: absolute; position: absolute;
z-index: 5; z-index: 3;
visibility: hidden;
} }
.movieExtras { .movieExtras {
z-index: 4; z-index: 5;
position: absolute; position: absolute;
top: 340px; top: 340px;
width: calc(100% - 32px); width: calc(100% - 32px);

17
src/modules/utils.ts
Unescape View File

@ -43,6 +43,21 @@ const getOffset = (el: Element): Record<string, any> => {
return { top: y, left: x }; return { top: y, left: x };
}; };
const findTrailerURL = (movieData: Record<string, any>): 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 = ( const createEpisodesView = (
playController: PlayController, playController: PlayController,
plexProtocol: string, plexProtocol: string,
@ -136,4 +151,4 @@ const isScrolledIntoView = (elem: HTMLElement): boolean => {
}; };
// eslint-disable-next-line import/prefer-default-export // eslint-disable-next-line import/prefer-default-export
export { escapeHtml, getOffset, isScrolledIntoView, getHeight, createEpisodesView }; export { escapeHtml, getOffset, isScrolledIntoView, getHeight, createEpisodesView, findTrailerURL };

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

@ -5,7 +5,14 @@ import _ from 'lodash';
import { supported, CSS_STYLE } from './const'; import { supported, CSS_STYLE } from './const';
import Plex from './modules/Plex'; import Plex from './modules/Plex';
import PlayController from './modules/PlayController'; 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'; import style from './modules/style';
class PlexMeetsHomeAssistant extends HTMLElement { class PlexMeetsHomeAssistant extends HTMLElement {
@ -334,14 +341,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideBackground(); this.hideBackground();
this.minimizeAll(); 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); this.content.appendChild(this.videoElem);
// todo: figure out why timeout is needed here and do it properly // 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 => { minimizeAll = (): void => {
this.detailsShown = false; this.detailsShown = false;
if (this.activeMovieElem) { if (this.activeMovieElem) {
@ -442,6 +447,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.hideSeasons(); this.hideSeasons();
this.hideEpisodes(); this.hideEpisodes();
this.hideDetails(); this.hideDetails();
this.hideVideo();
clearInterval(this.showDetailsTimeout); clearInterval(this.showDetailsTimeout);
clearInterval(this.showSeasonElemTimeout); clearInterval(this.showSeasonElemTimeout);
clearInterval(this.seasonTitleColorTimeout); clearInterval(this.seasonTitleColorTimeout);
@ -759,15 +765,31 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} else { } else {
const movieDetails = await this.plex.getDetails(data.key.split('/')[3]); const movieDetails = await this.plex.getDetails(data.key.split('/')[3]);
if (this.videoElem) { if (this.videoElem) {
const videoElem = this.videoElem.children[0] as HTMLVideoElement; const trailerURL = findTrailerURL(movieDetails);
const sourceElem = videoElem.children[0] as HTMLSourceElement; if (trailerURL !== '') {
const video = document.createElement('video');
sourceElem.src = this.plex.authorizeURL( video.style.height = '100%';
`${this.plex.getBasicURL()}${movieDetails.Extras.Metadata[0].Media[0].Part[0].key}` video.style.width = '100%';
); video.controls = false;
const source = document.createElement('source');
videoElem.load(); source.type = 'video/mp4';
videoElem.play(); 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(); console.log();

Write Preview
Loading…
Cancel
Save