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

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

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

4
src/modules/style.ts
Unescape View File

@ -252,6 +252,10 @@ style.textContent = css`
margin-bottom: 15px;
transition: 0.5s;
}
.simulatedFullScreen {
background: black;
height: 100%;
}
.episodeElem {
background-repeat: no-repeat;
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 };
};
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 => {
let foundURL = '';
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
export { escapeHtml, getOffset, isScrolledIntoView, getHeight, createEpisodesView, findTrailerURL };
export { escapeHtml, getOffset, isScrolledIntoView, getHeight, createEpisodesView, findTrailerURL, isVideoFullScreen };

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

@ -11,7 +11,8 @@ import {
isScrolledIntoView,
getHeight,
createEpisodesView,
findTrailerURL
findTrailerURL,
isVideoFullScreen
} from './modules/utils';
import style from './modules/style';
@ -169,9 +170,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
let isFullScreen = false;
if (videoPlayer.children.length > 0) {
const video = videoPlayer.children[0] as any;
isFullScreen =
video.offsetWidth > (this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth;
isFullScreen = isVideoFullScreen(this);
}
if (this.movieElems.length > 0 && !isFullScreen) {
@ -339,6 +338,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
video.webkitRequestFullscreen();
} else if (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.className = 'video';
this.videoElem.addEventListener('click', () => {
this.videoElem.addEventListener('click', event => {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
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');
@ -462,6 +486,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
videoPlayer.innerHTML = '';
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;
@ -830,20 +855,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
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 => {
const isFullScreen =
video.offsetWidth > (this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth;
if (isFullScreen) {
if (isVideoFullScreen(this)) {
event.stopPropagation();
}
});
video.addEventListener('fullscreenchange', () => {
const isFullScreen =
video.offsetWidth > (this.getElementsByClassName('searchContainer')[0] as HTMLElement).offsetWidth;
if (this.videoElem) {
const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement;
const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement;
if (isFullScreen) {
if (isVideoFullScreen(this)) {
videobg1.classList.add('transparent');
videobg2.classList.add('transparent');

Write Preview
Loading…
Cancel
Save