diff --git a/ui/controls.js b/ui/controls.js index a674614793..a1dd088990 100644 --- a/ui/controls.js +++ b/ui/controls.js @@ -587,48 +587,57 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget { return false; } - /** @export */ - async toggleFullScreen() { - if (document.fullscreenEnabled) { - if (document.fullscreenElement) { - if (screen.orientation) { - screen.orientation.unlock(); + /** @private */ + async enterFullScreen_() { + try { + if (document.fullscreenEnabled) { + if (document.pictureInPictureElement) { + await document.exitPictureInPicture(); + } + await this.videoContainer_.requestFullscreen({navigationUI: 'hide'}); + + if (this.config_.forceLandscapeOnFullscreen && screen.orientation) { + // Locking to 'landscape' should let it be either + // 'landscape-primary' or 'landscape-secondary' as appropriate. + await screen.orientation.lock('landscape'); } - await document.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'}); - if (this.config_.forceLandscapeOnFullscreen && screen.orientation) { - try { - // Locking to 'landscape' should let it be either - // 'landscape-primary' or 'landscape-secondary' as appropriate. - await screen.orientation.lock('landscape'); - } catch (error) { - // If screen.orientation.lock does not work on a device, it will - // be rejected with an error. Suppress that error. - } - } - } catch (error) { - this.dispatchEvent(new shaka.util.FakeEvent( - 'error', (new Map()).set('detail', error))); + const video = /** @type {HTMLVideoElement} */(this.localVideo_); + if (video.webkitSupportsFullscreen) { + video.webkitEnterFullscreen(); } } + } catch (error) { + // Entering fullscreen can fail without user interaction. + this.dispatchEvent(new shaka.util.FakeEvent( + 'error', (new Map()).set('detail', error))); + } + } + + /** @private */ + async exitFullScreen_() { + if (document.fullscreenEnabled) { + if (screen.orientation) { + screen.orientation.unlock(); + } + await document.exitFullscreen(); } else { const video = /** @type {HTMLVideoElement} */(this.localVideo_); if (video.webkitSupportsFullscreen) { - if (video.webkitDisplayingFullscreen) { - video.webkitExitFullscreen(); - } else { - video.webkitEnterFullscreen(); - } + video.webkitExitFullscreen(); } } } + /** @export */ + async toggleFullScreen() { + if (this.isFullScreenEnabled()) { + await this.exitFullScreen_(); + } else { + await this.enterFullScreen_(); + } + } + /** @export */ showAdUI() { shaka.ui.Utils.setDisplay(this.adPanel_, true); @@ -1030,11 +1039,11 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget { } 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_(); } }