From 7cd81b483a935e35f54c66e52119893de1c8795f Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Thu, 30 Jan 2020 17:22:10 -0500 Subject: [PATCH 1/4] wrap requestFS in a promise and trigger fullscreenerror for iOS --- src/js/player.js | 38 ++++++++++++++++++++++++++++++++++++++ src/js/tech/html5.js | 15 ++++++++++++--- 2 files changed, 50 insertions(+), 3 deletions(-) diff --git a/src/js/player.js b/src/js/player.js index 75815f1971..11b66131e5 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -1157,6 +1157,7 @@ class Player extends Component { this.on(this.tech_, 'pause', this.handleTechPause_); this.on(this.tech_, 'durationchange', this.handleTechDurationChange_); this.on(this.tech_, 'fullscreenchange', this.handleTechFullscreenChange_); + this.on(this.tech_, 'fullscreenerror', this.handleTechFullscreenError_); this.on(this.tech_, 'enterpictureinpicture', this.handleTechEnterPictureInPicture_); this.on(this.tech_, 'leavepictureinpicture', this.handleTechLeavePictureInPicture_); this.on(this.tech_, 'error', this.handleTechError_); @@ -2047,6 +2048,10 @@ class Player extends Component { } } + handleTechFullscreenError_(event, err) { + this.trigger('fullscreenerror', err); + } + /** * @private */ @@ -2732,6 +2737,39 @@ class Player extends Component { * @fires Player#fullscreenchange */ requestFullscreen(fullscreenOptions) { + const PromiseClass = this.options_.Promise || window.Promise; + + if (PromiseClass) { + return new PromiseClass((resolve, reject) => { + function offHandler() { + this.off(this.fsApi_.fullscreenerror, errorHandler); + this.off(this.fsApi_.fullscreenchange, changeHandler); + } + function changeHandler() { + offHandler(); + resolve(); + } + function errorHandler(e, err) { + offHandler(); + reject(err); + } + + this.one('fullscreenchange', changeHandler); + this.one('fullscreenerror', errorHandler); + + const promise = this.requestFullscreenHelper_(); + + if (promise) { + promise.then(offHandler, offHandler); + return promise; + } + }); + } + + return this.requestFullscreenHelper_(); + } + + requestFullscreenHelper_(fullscreenOptions) { let fsOptions; // Only pass fullscreen options to requestFullscreen in spec-compliant browsers. diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index 83458f7ad4..ea0f5cc9dc 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -14,6 +14,7 @@ import {toTitleCase} from '../utils/string-cases.js'; import {NORMAL as TRACK_TYPES} from '../tracks/track-types'; import setupSourceset from './setup-sourceset'; import defineLazyProperty from '../utils/define-lazy-property.js'; +import {silencePromise} from '../utils/promise'; /** * HTML5 Media Controller - Wrapper for HTML5 Media API @@ -639,16 +640,24 @@ class Html5 extends Tech { if (video.paused && video.networkState <= video.HAVE_METADATA) { // attempt to prime the video element for programmatic access // this isn't necessary on the desktop but shouldn't hurt - this.el_.play(); + silencePromise(this.el_.play()); // playing and pausing synchronously during the transition to fullscreen // can get iOS ~6.1 devices into a play/pause loop this.setTimeout(function() { video.pause(); - video.webkitEnterFullScreen(); + try { + video.webkitEnterFullScreen(); + } catch (e) { + this.trigger('fullscreenerror', e); + } }, 0); } else { - video.webkitEnterFullScreen(); + try { + video.webkitEnterFullScreen(); + } catch (e) { + this.trigger('fullscreenerror', e); + } } } From f08edd9873006037a6660f453ff373dcefb803d1 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Thu, 30 Jan 2020 17:36:50 -0500 Subject: [PATCH 2/4] pass fs options --- src/js/player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/player.js b/src/js/player.js index 11b66131e5..197335fdc3 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -2757,7 +2757,7 @@ class Player extends Component { this.one('fullscreenchange', changeHandler); this.one('fullscreenerror', errorHandler); - const promise = this.requestFullscreenHelper_(); + const promise = this.requestFullscreenHelper_(fullscreenOptions); if (promise) { promise.then(offHandler, offHandler); From 7c415c2d687618cd3a37233c836324a34a0e2378 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Fri, 31 Jan 2020 15:32:25 -0500 Subject: [PATCH 3/4] exitfullscreen promise --- src/js/player.js | 35 +++++++++++++++++++++++++++++++++++ src/js/tech/html5.js | 5 +++++ 2 files changed, 40 insertions(+) diff --git a/src/js/player.js b/src/js/player.js index 197335fdc3..8e178853d5 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -2813,6 +2813,41 @@ class Player extends Component { * @fires Player#fullscreenchange */ exitFullscreen() { + const PromiseClass = this.options_.Promise || window.Promise; + + if (PromiseClass) { + const self = this; + + return new PromiseClass((resolve, reject) => { + function offHandler() { + self.off(self.fsApi_.fullscreenerror, errorHandler); + self.off(self.fsApi_.fullscreenchange, changeHandler); + } + function changeHandler() { + offHandler(); + resolve(); + } + function errorHandler(e, err) { + offHandler(); + reject(err); + } + + self.one('fullscreenchange', changeHandler); + self.one('fullscreenerror', errorHandler); + + const promise = self.exitFullscreenHelper_(); + + if (promise) { + promise.then(offHandler, offHandler); + return promise; + } + }); + } + + return this.exitFullscreenHelper_(); + } + + exitFullscreenHelper_() { if (this.fsApi_.requestFullscreen) { const promise = document[this.fsApi_.exitFullscreen](); diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index ea0f5cc9dc..1cfdbda7ab 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -665,6 +665,11 @@ class Html5 extends Tech { * Request that the `HTML5` Tech exit fullscreen. */ exitFullScreen() { + if (!this.el_.webkitDisplayingFullscreen) { + this.trigger('fullscreenerror', new Error('The video is not fullscreen')); + return; + } + this.el_.webkitExitFullScreen(); } From bca87507b4dbf91c8f9cedab6620365dad4a2621 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Fri, 31 Jan 2020 15:33:07 -0500 Subject: [PATCH 4/4] switch to self for safety --- src/js/player.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/js/player.js b/src/js/player.js index 8e178853d5..e21ad113bb 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -2740,10 +2740,12 @@ class Player extends Component { const PromiseClass = this.options_.Promise || window.Promise; if (PromiseClass) { + const self = this; + return new PromiseClass((resolve, reject) => { function offHandler() { - this.off(this.fsApi_.fullscreenerror, errorHandler); - this.off(this.fsApi_.fullscreenchange, changeHandler); + self.off(self.fsApi_.fullscreenerror, errorHandler); + self.off(self.fsApi_.fullscreenchange, changeHandler); } function changeHandler() { offHandler(); @@ -2754,10 +2756,10 @@ class Player extends Component { reject(err); } - this.one('fullscreenchange', changeHandler); - this.one('fullscreenerror', errorHandler); + self.one('fullscreenchange', changeHandler); + self.one('fullscreenerror', errorHandler); - const promise = this.requestFullscreenHelper_(fullscreenOptions); + const promise = self.requestFullscreenHelper_(fullscreenOptions); if (promise) { promise.then(offHandler, offHandler);