Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): Fix iOS fullscreen on rotation #4679

Merged
merged 6 commits into from
Dec 6, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix(ui): fixed to allow fullscreen on iOS
ocipap committed Nov 11, 2022

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
commit 95c012f188c481752c16d290acfa875ac66d4fd5
55 changes: 44 additions & 11 deletions ui/controls.js
Original file line number Diff line number Diff line change
@@ -587,21 +587,51 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
return false;
}

/** @private */
async enterFullScreen_() {
try {
if (document.fullscreenEnabled) {
await this.videoContainer_.requestFullscreen({navigationUI: 'hide'});
} else {
const video = /** @type {HTMLVideoElement} */(this.localVideo_);
if (video.webkitSupportsFullscreen) {
video.webkitEnterFullscreen();
}
}
} catch (error) {
joeyparrish marked this conversation as resolved.
Show resolved Hide resolved
// Entering fullscreen can fail
// if the user didn't interacting with the video.
// be rejected with an error. Suppress that error.
joeyparrish marked this conversation as resolved.
Show resolved Hide resolved
}
}

/** @private */
async exitFullScreen_() {
if (document.fullscreenEnabled) {
await document.exitFullscreen();
} else {
const video = /** @type {HTMLVideoElement} */(this.localVideo_);
if (video.webkitSupportsFullscreen) {
video.webkitExitFullscreen();
}
}
}

/** @export */
async toggleFullScreen() {
if (document.fullscreenEnabled) {
joeyparrish marked this conversation as resolved.
Show resolved Hide resolved
if (document.fullscreenElement) {
if (screen.orientation) {
screen.orientation.unlock();
joeyparrish marked this conversation as resolved.
Show resolved Hide resolved
}
await document.exitFullscreen();
await this.exitFullScreen_();
} else {
// If we are in PiP mode, leave PiP mode first.
try {
if (document.pictureInPictureElement) {
await document.exitPictureInPicture();
}
await this.videoContainer_.requestFullscreen({navigationUI: 'hide'});
await this.enterFullScreen_();
if (this.config_.forceLandscapeOnFullscreen && screen.orientation) {
joeyparrish marked this conversation as resolved.
Show resolved Hide resolved
try {
// Locking to 'landscape' should let it be either
@@ -621,9 +651,9 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
const video = /** @type {HTMLVideoElement} */(this.localVideo_);
if (video.webkitSupportsFullscreen) {
if (video.webkitDisplayingFullscreen) {
video.webkitExitFullscreen();
await this.exitFullScreen_();
} else {
video.webkitEnterFullscreen();
await this.enterFullScreen_();
}
}
}
@@ -1008,7 +1038,11 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {

if (screen.orientation) {
this.eventManager_.listen(screen.orientation, 'change', async () => {
await this.onScreenRotation_();
try {
await this.onScreenRotation_();
} catch (e) {
console.log(e);
}
});
}
}
@@ -1025,18 +1059,17 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
this.video_.readyState == 0 ||
this.castProxy_.isCasting() ||
!this.config_.enableFullscreenOnRotation ||
!this.isFullScreenSupported()||
typeof (this.video_.requestFullscreen) !== 'function'
!this.isFullScreenSupported()
) {
joeyparrish marked this conversation as resolved.
Show resolved Hide resolved
return;
}

if (screen.orientation.type.includes('landscape') &&
!document.fullscreenElement) {
await this.videoContainer_.requestFullscreen({navigationUI: 'hide'});
!this.isFullScreenEnabled()) {
await this.enterFullScreen_();
} else if (screen.orientation.type.includes('portrait') &&
document.fullscreenElement) {
await document.exitFullscreen();
this.isFullScreenEnabled()) {
await this.exitFullScreen_();
}
}