From c87c7145b8abe95f2d71dba2332a724e5ad0d77e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Sun, 6 Jun 2021 15:14:59 +0200 Subject: [PATCH] Add: Simulated full screen for ipad --- dist/plex-meets-homeassistant.js | 56 +++++++++++++++++++++++++------- src/modules/style.ts | 4 +++ src/modules/utils.ts | 11 ++++++- src/plex-meets-homeassistant.ts | 51 ++++++++++++++++++++--------- 4 files changed, 94 insertions(+), 28 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 0630cdf..a80d22f 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -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.hideBackground(); - this.minimizeAll(); + 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'); diff --git a/src/modules/style.ts b/src/modules/style.ts index b97503b..b06c657 100644 --- a/src/modules/style.ts +++ b/src/modules/style.ts @@ -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; diff --git a/src/modules/utils.ts b/src/modules/utils.ts index 2e5355a..1af997c 100644 --- a/src/modules/utils.ts +++ b/src/modules/utils.ts @@ -43,6 +43,15 @@ const getOffset = (el: Element): Record => { 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 => { 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 }; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 4cd2df3..e7ada20 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -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.hideBackground(); - this.minimizeAll(); + 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');