Fix: Unable to control video player on iOS or Safari

pull/16/head 1.1.2
Juraj Nyíri 4 years ago
parent c90cfd1771
commit 6bc108b3a2

@ -20375,20 +20375,26 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.videoElem) { if (this.videoElem) {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0]; const videoPlayer = this.getElementsByClassName('videoPlayer')[0];
const video = videoPlayer.children[0]; const video = videoPlayer.children[0];
if (video.requestFullscreen) { if (video.requestFullscreen && false) {
video.requestFullscreen(); video.requestFullscreen();
} }
else if (video.webkitRequestFullscreen) { else if (video.webkitRequestFullscreen && false) {
video.webkitRequestFullscreen(); video.webkitRequestFullscreen();
} }
else if (video.msRequestFullscreen) { else if (video.msRequestFullscreen && false) {
video.msRequestFullscreen(); video.msRequestFullscreen();
} }
else { else {
const videobg1 = this.getElementsByClassName('videobg1')[0]; const videobgs1 = this.getElementsByClassName('videobg1');
const videobg2 = this.getElementsByClassName('videobg2')[0]; const videobgs2 = this.getElementsByClassName('videobg2');
// eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) {
videobg1.classList.add('transparent'); videobg1.classList.add('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.add('transparent'); videobg2.classList.add('transparent');
}
this.videoElem.classList.add('maxZIndex'); this.videoElem.classList.add('maxZIndex');
this.videoElem.classList.add('simulatedFullScreen'); this.videoElem.classList.add('simulatedFullScreen');
video.controls = true; video.controls = true;
@ -20420,10 +20426,16 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.videoElem.classList.remove('maxZIndex'); this.videoElem.classList.remove('maxZIndex');
this.videoElem.classList.remove('simulatedFullScreen'); this.videoElem.classList.remove('simulatedFullScreen');
} }
const videobg1 = this.getElementsByClassName('videobg1')[0]; const videobgs1 = this.getElementsByClassName('videobg1');
const videobg2 = this.getElementsByClassName('videobg2')[0]; const videobgs2 = this.getElementsByClassName('videobg2');
// eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) {
videobg1.classList.remove('transparent'); videobg1.classList.remove('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.remove('transparent'); videobg2.classList.remove('transparent');
}
video.controls = false; video.controls = false;
} }
else { else {
@ -20522,11 +20534,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
videoPlayer.innerHTML = ''; videoPlayer.innerHTML = '';
this.videoElem.classList.remove('maxZIndex'); this.videoElem.classList.remove('maxZIndex');
this.videoElem.classList.remove('simulatedFullScreen'); this.videoElem.classList.remove('simulatedFullScreen');
const videobg1 = this.getElementsByClassName('videobg1')[0]; const videobgs1 = this.getElementsByClassName('videobg1');
const videobg2 = this.getElementsByClassName('videobg2')[0]; const videobgs2 = this.getElementsByClassName('videobg2');
// eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) {
videobg1.classList.remove('transparent'); videobg1.classList.remove('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.remove('transparent'); videobg2.classList.remove('transparent');
} }
}
}; };
this.minimizeAll = () => { this.minimizeAll = () => {
this.detailsShown = false; this.detailsShown = false;
@ -20732,8 +20750,8 @@ 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 videobgs1 = this.getElementsByClassName('videobg1');
const videobg2 = this.getElementsByClassName('videobg2')[0]; const videobgs2 = this.getElementsByClassName('videobg2');
video.addEventListener('click', event => { video.addEventListener('click', event => {
if (isVideoFullScreen(this)) { if (isVideoFullScreen(this)) {
event.stopPropagation(); event.stopPropagation();
@ -20742,15 +20760,27 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const fullScreenChangeAction = () => { const fullScreenChangeAction = () => {
if (this.videoElem) { if (this.videoElem) {
if (isVideoFullScreen(this)) { if (isVideoFullScreen(this)) {
// eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) {
videobg1.classList.add('transparent'); videobg1.classList.add('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.add('transparent'); videobg2.classList.add('transparent');
}
this.videoElem.classList.add('maxZIndex'); this.videoElem.classList.add('maxZIndex');
video.controls = true; video.controls = true;
video.muted = false; video.muted = false;
} }
else { else {
// eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) {
videobg1.classList.remove('transparent'); videobg1.classList.remove('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.remove('transparent'); videobg2.classList.remove('transparent');
}
this.videoElem.classList.remove('maxZIndex'); this.videoElem.classList.remove('maxZIndex');
video.controls = false; video.controls = false;
window.scroll({ window.scroll({

@ -521,17 +521,23 @@ class PlexMeetsHomeAssistant extends HTMLElement {
if (this.videoElem) { if (this.videoElem) {
const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement; const videoPlayer = this.getElementsByClassName('videoPlayer')[0] as HTMLElement;
const video = videoPlayer.children[0] as any; const video = videoPlayer.children[0] as any;
if (video.requestFullscreen) { if (video.requestFullscreen && false) {
video.requestFullscreen(); video.requestFullscreen();
} else if (video.webkitRequestFullscreen) { } else if (video.webkitRequestFullscreen && false) {
video.webkitRequestFullscreen(); video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) { } else if (video.msRequestFullscreen && false) {
video.msRequestFullscreen(); video.msRequestFullscreen();
} else { } else {
const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement; const videobgs1 = this.getElementsByClassName('videobg1');
const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement; const videobgs2 = this.getElementsByClassName('videobg2');
// eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) {
videobg1.classList.add('transparent'); videobg1.classList.add('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.add('transparent'); videobg2.classList.add('transparent');
}
this.videoElem.classList.add('maxZIndex'); this.videoElem.classList.add('maxZIndex');
this.videoElem.classList.add('simulatedFullScreen'); this.videoElem.classList.add('simulatedFullScreen');
@ -568,10 +574,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.videoElem.classList.remove('simulatedFullScreen'); this.videoElem.classList.remove('simulatedFullScreen');
} }
const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement; const videobgs1 = this.getElementsByClassName('videobg1');
const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement; const videobgs2 = this.getElementsByClassName('videobg2');
// eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) {
videobg1.classList.remove('transparent'); videobg1.classList.remove('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.remove('transparent'); videobg2.classList.remove('transparent');
}
video.controls = false; video.controls = false;
} else { } else {
this.hideBackground(); this.hideBackground();
@ -681,11 +694,17 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.videoElem.classList.remove('maxZIndex'); this.videoElem.classList.remove('maxZIndex');
this.videoElem.classList.remove('simulatedFullScreen'); this.videoElem.classList.remove('simulatedFullScreen');
const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement; const videobgs1 = this.getElementsByClassName('videobg1');
const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement; const videobgs2 = this.getElementsByClassName('videobg2');
// eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) {
videobg1.classList.remove('transparent'); videobg1.classList.remove('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.remove('transparent'); videobg2.classList.remove('transparent');
} }
}
}; };
minimizeAll = (): void => { minimizeAll = (): void => {
@ -905,8 +924,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
video.play(); video.play();
let playingFired = false; let playingFired = false;
const videobg1 = this.getElementsByClassName('videobg1')[0] as HTMLElement; const videobgs1 = this.getElementsByClassName('videobg1');
const videobg2 = this.getElementsByClassName('videobg2')[0] as HTMLElement; const videobgs2 = this.getElementsByClassName('videobg2');
video.addEventListener('click', event => { video.addEventListener('click', event => {
if (isVideoFullScreen(this)) { if (isVideoFullScreen(this)) {
event.stopPropagation(); event.stopPropagation();
@ -915,15 +934,27 @@ class PlexMeetsHomeAssistant extends HTMLElement {
const fullScreenChangeAction = (): void => { const fullScreenChangeAction = (): void => {
if (this.videoElem) { if (this.videoElem) {
if (isVideoFullScreen(this)) { if (isVideoFullScreen(this)) {
// eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) {
videobg1.classList.add('transparent'); videobg1.classList.add('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.add('transparent'); videobg2.classList.add('transparent');
}
this.videoElem.classList.add('maxZIndex'); this.videoElem.classList.add('maxZIndex');
video.controls = true; video.controls = true;
video.muted = false; video.muted = false;
} else { } else {
// eslint-disable-next-line no-restricted-syntax
for (const videobg1 of videobgs1) {
videobg1.classList.remove('transparent'); videobg1.classList.remove('transparent');
}
// eslint-disable-next-line no-restricted-syntax
for (const videobg2 of videobgs2) {
videobg2.classList.remove('transparent'); videobg2.classList.remove('transparent');
}
this.videoElem.classList.remove('maxZIndex'); this.videoElem.classList.remove('maxZIndex');
video.controls = false; video.controls = false;

Loading…
Cancel
Save