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

Add: Simulated full screen for ipad

Browse Source
pull/16/head
Juraj Nyíri 3 years ago
parent d8bb718a3f
commit c87c7145b8
4 changed files with 94 additions and 28 deletions
Show Stats Download Patch File Download Diff File

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

@ -19053,6 +19053,12 @@ const getOffset = (el) => {
} }
return { top: y, left: x }; return { top: y, left: x };
}; };
const isVideoFullScreen = (_this) => {
const videoPlayer = _this.getElementsByClassName('videoPlayer')[0];
const video = videoPlayer.children[0];
return (video.offsetWidth > _this.getElementsByClassName('searchContainer')[0].offsetWidth ||
(_this.videoElem && _this.videoElem.classList.contains('simulatedFullScreen')));
};
const findTrailerURL = (movieData) => { const findTrailerURL = (movieData) => {
let foundURL = ''; let foundURL = '';
if (movieData.Extras && movieData.Extras.Metadata && movieData.Extras.Metadata.length > 0) { if (movieData.Extras && movieData.Extras.Metadata && movieData.Extras.Metadata.length > 0) {
@ -19628,6 +19634,10 @@ style.textContent = css `
margin-bottom: 15px; margin-bottom: 15px;
transition: 0.5s; transition: 0.5s;
} }
.simulatedFullScreen {
background: black;
height: 100%;
}
.episodeElem { .episodeElem {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@ -19834,9 +19844,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; const videoPlayer = this.getElementsByClassName('videoPlayer')[0];
let isFullScreen = false; let isFullScreen = false;
if (videoPlayer.children.length > 0) { if (videoPlayer.children.length > 0) {
const video = videoPlayer.children[0]; isFullScreen = isVideoFullScreen(this);
isFullScreen =
video.offsetWidth > this.getElementsByClassName('searchContainer')[0].offsetWidth;
} }
if (this.movieElems.length > 0 && !isFullScreen) { if (this.movieElems.length > 0 && !isFullScreen) {
let renderNeeded = false; let renderNeeded = false;
@ -19989,6 +19997,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
else if (video.msRequestFullscreen) { else if (video.msRequestFullscreen) {
video.msRequestFullscreen(); video.msRequestFullscreen();
} }
else {
const videobg1 = this.getElementsByClassName('videobg1')[0];
const videobg2 = this.getElementsByClassName('videobg2')[0];
videobg1.classList.add('transparent');
videobg2.classList.add('transparent');
this.videoElem.classList.add('maxZIndex');
this.videoElem.classList.add('simulatedFullScreen');
video.controls = true;
}
} }
}); });
this.seasonsElem = document.createElement('div'); this.seasonsElem = document.createElement('div');
@ -20007,9 +20024,25 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.content.appendChild(this.episodesElem); this.content.appendChild(this.episodesElem);
this.videoElem = document.createElement('div'); this.videoElem = document.createElement('div');
this.videoElem.className = 'video'; this.videoElem.className = 'video';
this.videoElem.addEventListener('click', () => { this.videoElem.addEventListener('click', event => {
this.hideBackground(); const videoPlayer = this.getElementsByClassName('videoPlayer')[0];
this.minimizeAll(); const video = videoPlayer.children[0];
if (isVideoFullScreen(this)) {
event.stopPropagation();
if (this.videoElem) {
this.videoElem.classList.remove('maxZIndex');
this.videoElem.classList.remove('simulatedFullScreen');
}
const videobg1 = this.getElementsByClassName('videobg1')[0];
const videobg2 = this.getElementsByClassName('videobg2')[0];
videobg1.classList.remove('transparent');
videobg2.classList.remove('transparent');
video.controls = false;
}
else {
this.hideBackground();
this.minimizeAll();
}
}); });
const videoBG1 = document.createElement('div'); const videoBG1 = document.createElement('div');
videoBG1.className = 'videobg1'; videoBG1.className = 'videobg1';
@ -20097,6 +20130,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; const videoPlayer = this.getElementsByClassName('videoPlayer')[0];
videoPlayer.innerHTML = ''; videoPlayer.innerHTML = '';
this.videoElem.classList.remove('maxZIndex'); this.videoElem.classList.remove('maxZIndex');
this.videoElem.classList.remove('simulatedFullScreen');
const videobg1 = this.getElementsByClassName('videobg1')[0]; const videobg1 = this.getElementsByClassName('videobg1')[0];
const videobg2 = this.getElementsByClassName('videobg2')[0]; const videobg2 = this.getElementsByClassName('videobg2')[0];
videobg1.classList.remove('transparent'); videobg1.classList.remove('transparent');
@ -20418,18 +20452,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
video.load(); video.load();
video.play(); video.play();
let playingFired = false; let playingFired = false;
const videobg1 = this.getElementsByClassName('videobg1')[0];
const videobg2 = this.getElementsByClassName('videobg2')[0];
video.addEventListener('click', event => { video.addEventListener('click', event => {
const isFullScreen = video.offsetWidth > this.getElementsByClassName('searchContainer')[0].offsetWidth; if (isVideoFullScreen(this)) {
if (isFullScreen) {
event.stopPropagation(); event.stopPropagation();
} }
}); });
video.addEventListener('fullscreenchange', () => { video.addEventListener('fullscreenchange', () => {
const isFullScreen = video.offsetWidth > this.getElementsByClassName('searchContainer')[0].offsetWidth;
if (this.videoElem) { if (this.videoElem) {
const videobg1 = this.getElementsByClassName('videobg1')[0]; if (isVideoFullScreen(this)) {
const videobg2 = this.getElementsByClassName('videobg2')[0];
if (isFullScreen) {
videobg1.classList.add('transparent'); videobg1.classList.add('transparent');
videobg2.classList.add('transparent'); videobg2.classList.add('transparent');
this.videoElem.classList.add('maxZIndex'); this.videoElem.classList.add('maxZIndex');

4
src/modules/style.ts
Unescape View File

@ -252,6 +252,10 @@ style.textContent = css`
margin-bottom: 15px; margin-bottom: 15px;
transition: 0.5s; transition: 0.5s;
} }
.simulatedFullScreen {
background: black;
height: 100%;
}
.episodeElem { .episodeElem {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;

11
src/modules/utils.ts
Unescape View File

@ -43,6 +43,15 @@ const getOffset = (el: Element): Record<string, any> => {
return { top: y, left: x }; return { top: y, left: x };
}; };
const isVideoFullScreen = (_this: any): boolean => {
const videoPlayer = _this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
const video = videoPlayer.children[0] as any;
return (
video.offsetWidth > (_this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth ||
(_this.videoElem && _this.videoElem.classList.contains('simulatedFullScreen'))
);
};
const findTrailerURL = (movieData: Record<string, any>): string => { const findTrailerURL = (movieData: Record<string, any>): string => {
let foundURL = ''; let foundURL = '';
if (movieData.Extras && movieData.Extras.Metadata && movieData.Extras.Metadata.length > 0) { if (movieData.Extras && movieData.Extras.Metadata && movieData.Extras.Metadata.length > 0) {
@ -150,4 +159,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, findTrailerURL }; export { escapeHtml, getOffset, isScrolledIntoView, getHeight, createEpisodesView, findTrailerURL, isVideoFullScreen };

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

@ -11,7 +11,8 @@ import {
isScrolledIntoView, isScrolledIntoView,
getHeight, getHeight,
createEpisodesView, createEpisodesView,
findTrailerURL findTrailerURL,
isVideoFullScreen
} from './modules/utils'; } from './modules/utils';
import style from './modules/style'; import style from './modules/style';
@ -169,9 +170,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
let isFullScreen = false; let isFullScreen = false;
if (videoPlayer.children.length > 0) { if (videoPlayer.children.length > 0) {
const video = videoPlayer.children[0] as any; isFullScreen = isVideoFullScreen(this);
isFullScreen =
video.offsetWidth > (this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth;
} }
if (this.movieElems.length > 0 && !isFullScreen) { if (this.movieElems.length > 0 && !isFullScreen) {
@ -339,6 +338,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
video.webkitRequestFullscreen(); video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) { } else if (video.msRequestFullscreen) {
video.msRequestFullscreen(); video.msRequestFullscreen();
} else {
const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement;
const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement;
videobg1.classList.add('transparent');
videobg2.classList.add('transparent');
this.videoElem.classList.add('maxZIndex');
this.videoElem.classList.add('simulatedFullScreen');
video.controls = true;
} }
} }
}); });
@ -361,9 +369,25 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.videoElem = document.createElement('div'); this.videoElem = document.createElement('div');
this.videoElem.className = 'video'; this.videoElem.className = 'video';
this.videoElem.addEventListener('click', () => { this.videoElem.addEventListener('click', event => {
this.hideBackground(); const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
this.minimizeAll(); const video = videoPlayer.children[0] as any;
if (isVideoFullScreen(this)) {
event.stopPropagation();
if (this.videoElem) {
this.videoElem.classList.remove('maxZIndex');
this.videoElem.classList.remove('simulatedFullScreen');
}
const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement;
const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement;
videobg1.classList.remove('transparent');
videobg2.classList.remove('transparent');
video.controls = false;
} else {
this.hideBackground();
this.minimizeAll();
}
}); });
const videoBG1 = document.createElement('div'); const videoBG1 = document.createElement('div');
@ -462,6 +486,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
videoPlayer.innerHTML = ''; videoPlayer.innerHTML = '';
this.videoElem.classList.remove('maxZIndex'); this.videoElem.classList.remove('maxZIndex');
this.videoElem.classList.remove('simulatedFullScreen');
const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement; const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement;
const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement; const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement;
@ -830,20 +855,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
video.play(); video.play();
let playingFired = false; let playingFired = false;
const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement;
const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement;
video.addEventListener('click', event => { video.addEventListener('click', event => {
const isFullScreen = if (isVideoFullScreen(this)) {
video.offsetWidth > (this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth;
if (isFullScreen) {
event.stopPropagation(); event.stopPropagation();
} }
}); });
video.addEventListener('fullscreenchange', () => { video.addEventListener('fullscreenchange', () => {
const isFullScreen =
video.offsetWidth > (this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth;
if (this.videoElem) { if (this.videoElem) {
const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement; if (isVideoFullScreen(this)) {
const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement;
if (isFullScreen) {
videobg1.classList.add('transparent'); videobg1.classList.add('transparent');
videobg2.classList.add('transparent'); videobg2.classList.add('transparent');

Write Preview
Loading…
Cancel
Save