From 6bc108b3a2806c9297297f6b1def25a503e9262f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Tue, 15 Jun 2021 22:24:42 +0200 Subject: [PATCH] Fix: Unable to control video player on iOS or Safari --- dist/plex-meets-homeassistant.js | 72 ++++++++++++++++++++++--------- src/plex-meets-homeassistant.ts | 73 +++++++++++++++++++++++--------- 2 files changed, 103 insertions(+), 42 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index ce0eca9..24b31c6 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -20375,20 +20375,26 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.videoElem) { const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; const video = videoPlayer.children[0]; - if (video.requestFullscreen) { + if (video.requestFullscreen && false) { video.requestFullscreen(); } - else if (video.webkitRequestFullscreen) { + else if (video.webkitRequestFullscreen && false) { video.webkitRequestFullscreen(); } - else if (video.msRequestFullscreen) { + else if (video.msRequestFullscreen && false) { video.msRequestFullscreen(); } else { - const videobg1 = this.getElementsByClassName('videobg1')[0]; - const videobg2 = this.getElementsByClassName('videobg2')[0]; - videobg1.classList.add('transparent'); - videobg2.classList.add('transparent'); + const videobgs1 = this.getElementsByClassName('videobg1'); + const videobgs2 = this.getElementsByClassName('videobg2'); + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.add('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.add('transparent'); + } this.videoElem.classList.add('maxZIndex'); this.videoElem.classList.add('simulatedFullScreen'); video.controls = true; @@ -20420,10 +20426,16 @@ class PlexMeetsHomeAssistant extends HTMLElement { 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'); + const videobgs1 = this.getElementsByClassName('videobg1'); + const videobgs2 = this.getElementsByClassName('videobg2'); + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.remove('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.remove('transparent'); + } video.controls = false; } else { @@ -20522,10 +20534,16 @@ class PlexMeetsHomeAssistant extends HTMLElement { 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'); - videobg2.classList.remove('transparent'); + const videobgs1 = this.getElementsByClassName('videobg1'); + const videobgs2 = this.getElementsByClassName('videobg2'); + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.remove('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.remove('transparent'); + } } }; this.minimizeAll = () => { @@ -20732,8 +20750,8 @@ class PlexMeetsHomeAssistant extends HTMLElement { video.load(); video.play(); let playingFired = false; - const videobg1 = this.getElementsByClassName('videobg1')[0]; - const videobg2 = this.getElementsByClassName('videobg2')[0]; + const videobgs1 = this.getElementsByClassName('videobg1'); + const videobgs2 = this.getElementsByClassName('videobg2'); video.addEventListener('click', event => { if (isVideoFullScreen(this)) { event.stopPropagation(); @@ -20742,15 +20760,27 @@ class PlexMeetsHomeAssistant extends HTMLElement { const fullScreenChangeAction = () => { if (this.videoElem) { if (isVideoFullScreen(this)) { - videobg1.classList.add('transparent'); - videobg2.classList.add('transparent'); + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.add('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.add('transparent'); + } this.videoElem.classList.add('maxZIndex'); video.controls = true; video.muted = false; } else { - videobg1.classList.remove('transparent'); - videobg2.classList.remove('transparent'); + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.remove('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.remove('transparent'); + } this.videoElem.classList.remove('maxZIndex'); video.controls = false; window.scroll({ diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index ad525f3..33306d5 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -521,17 +521,23 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.videoElem) { const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; const video = videoPlayer.children[0] as any; - if (video.requestFullscreen) { + if (video.requestFullscreen && false) { video.requestFullscreen(); - } else if (video.webkitRequestFullscreen) { + } else if (video.webkitRequestFullscreen && false) { video.webkitRequestFullscreen(); - } else if (video.msRequestFullscreen) { + } else if (video.msRequestFullscreen && false) { 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'); + const videobgs1 = this.getElementsByClassName('videobg1'); + const videobgs2 = this.getElementsByClassName('videobg2'); + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.add('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.add('transparent'); + } this.videoElem.classList.add('maxZIndex'); this.videoElem.classList.add('simulatedFullScreen'); @@ -568,10 +574,17 @@ class PlexMeetsHomeAssistant extends HTMLElement { 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'); + const videobgs1 = this.getElementsByClassName('videobg1'); + const videobgs2 = this.getElementsByClassName('videobg2'); + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.remove('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.remove('transparent'); + } + video.controls = false; } else { this.hideBackground(); @@ -681,10 +694,16 @@ class PlexMeetsHomeAssistant extends HTMLElement { 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'); + const videobgs1 = this.getElementsByClassName('videobg1'); + const videobgs2 = this.getElementsByClassName('videobg2'); + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.remove('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.remove('transparent'); + } } }; @@ -905,8 +924,8 @@ 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; + const videobgs1 = this.getElementsByClassName('videobg1'); + const videobgs2 = this.getElementsByClassName('videobg2'); video.addEventListener('click', event => { if (isVideoFullScreen(this)) { event.stopPropagation(); @@ -915,15 +934,27 @@ class PlexMeetsHomeAssistant extends HTMLElement { const fullScreenChangeAction = (): void => { if (this.videoElem) { if (isVideoFullScreen(this)) { - videobg1.classList.add('transparent'); - videobg2.classList.add('transparent'); + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.add('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.add('transparent'); + } this.videoElem.classList.add('maxZIndex'); video.controls = true; video.muted = false; } else { - videobg1.classList.remove('transparent'); - videobg2.classList.remove('transparent'); + // eslint-disable-next-line no-restricted-syntax + for (const videobg1 of videobgs1) { + videobg1.classList.remove('transparent'); + } + // eslint-disable-next-line no-restricted-syntax + for (const videobg2 of videobgs2) { + videobg2.classList.remove('transparent'); + } this.videoElem.classList.remove('maxZIndex'); video.controls = false;