From c76a8da367e7ddacbfbd91884b8f4002f518271c Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 26 Sep 2016 14:07:50 -0400 Subject: [PATCH 1/5] Proxy ios webkit events into fullscreenchange Previously, the ios webkit events (webkitbeginfullscreen and webkitendfullscreen) were only proxied into the fullscreenchange event when requestFullscreen was called directly. So, on iPhones, we would never be able to get this event. This makes it so these events are always proxied. --- src/js/tech/html5.js | 33 +++++++++++++++++++++++---------- 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index af0a5481ec..58394e68a9 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -120,6 +120,10 @@ class Html5 extends Tech { this.setControls(true); } + // on iOS, we want to proxy `webkitbeginfullscreen` and `webkitendfullscreen` + // into a `fullscreenchange` event + this.proxyWebkitFullscreen_(); + this.triggerReady(); } @@ -574,6 +578,25 @@ class Html5 extends Tech { return this.el_.offsetHeight; } + /** + * Proxy iOS `webkitbeginfullscreen` and `webkitendfullscreen` into + * `fullscreenchange` event + * + * @private + * @method proxyWebkitFullscreen_ + */ + proxyWebkitFullscreen_() { + if ('webkitDisplayingFullscreen' in this.el_) { + this.one('webkitbeginfullscreen', function() { + this.one('webkitendfullscreen', function() { + this.trigger('fullscreenchange', { isFullscreen: false }); + }); + + this.trigger('fullscreenchange', { isFullscreen: true }); + }); + } + } + /** * Get if there is fullscreen support * @@ -600,16 +623,6 @@ class Html5 extends Tech { enterFullScreen() { const video = this.el_; - if ('webkitDisplayingFullscreen' in video) { - this.one('webkitbeginfullscreen', function() { - this.one('webkitendfullscreen', function() { - this.trigger('fullscreenchange', { isFullscreen: false }); - }); - - this.trigger('fullscreenchange', { isFullscreen: true }); - }); - } - 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 From 7475b8658a50b6a1984b7c50562a560744f0323a Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 26 Sep 2016 14:27:32 -0400 Subject: [PATCH 2/5] fix handlers --- src/js/tech/html5.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index 58394e68a9..cc533ee9c3 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -587,13 +587,16 @@ class Html5 extends Tech { */ proxyWebkitFullscreen_() { if ('webkitDisplayingFullscreen' in this.el_) { - this.one('webkitbeginfullscreen', function() { + const webkitbeginFn = function() { this.one('webkitendfullscreen', function() { this.trigger('fullscreenchange', { isFullscreen: false }); }); this.trigger('fullscreenchange', { isFullscreen: true }); - }); + }; + + this.on('webkitbeginfullscreen', webkitbeginFn); + this.on('dispose', () => this.off('webkitbeginfullscreen', webkitbeginFn)); } } From dcf8423da174cdef44eeea90eb2839b750c97e73 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 26 Sep 2016 14:35:47 -0400 Subject: [PATCH 3/5] extra whitespace --- src/js/tech/html5.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index cc533ee9c3..cdb7ef8170 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -587,7 +587,7 @@ class Html5 extends Tech { */ proxyWebkitFullscreen_() { if ('webkitDisplayingFullscreen' in this.el_) { - const webkitbeginFn = function() { + const webkitbeginFn = function() { this.one('webkitendfullscreen', function() { this.trigger('fullscreenchange', { isFullscreen: false }); }); From 5b0d6d2feefde5db4c138e3d60eb4112acf6d4f5 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 27 Sep 2016 16:48:46 -0400 Subject: [PATCH 4/5] Refactor endFn into a separate function to be disposed. Remove 'webkit' from var names --- src/js/tech/html5.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index cdb7ef8170..91337ba114 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -587,16 +587,21 @@ class Html5 extends Tech { */ proxyWebkitFullscreen_() { if ('webkitDisplayingFullscreen' in this.el_) { - const webkitbeginFn = function() { - this.one('webkitendfullscreen', function() { - this.trigger('fullscreenchange', { isFullscreen: false }); - }); + const endFn = function() { + this.trigger('fullscreenchange', { isFullscreen: false }); + }; + + const beginFn = function() { + this.one('webkitendfullscreen', endFn); this.trigger('fullscreenchange', { isFullscreen: true }); }; - this.on('webkitbeginfullscreen', webkitbeginFn); - this.on('dispose', () => this.off('webkitbeginfullscreen', webkitbeginFn)); + this.on('webkitbeginfullscreen', beginFn); + this.on('dispose', () => { + this.off('webkitbeginfullscreen', beginFn); + this.off('webkitendfullscreen', endFn); + }); } } From cf01084b6c5fb9e472e9739fd788b3f9cee9c21a Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Thu, 29 Sep 2016 13:47:38 -0400 Subject: [PATCH 5/5] remove some nesting --- src/js/tech/html5.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index 91337ba114..3ce6b58566 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -586,23 +586,25 @@ class Html5 extends Tech { * @method proxyWebkitFullscreen_ */ proxyWebkitFullscreen_() { - if ('webkitDisplayingFullscreen' in this.el_) { - const endFn = function() { - this.trigger('fullscreenchange', { isFullscreen: false }); - }; + if (!('webkitDisplayingFullscreen' in this.el_)) { + return; + } - const beginFn = function() { - this.one('webkitendfullscreen', endFn); + const endFn = function() { + this.trigger('fullscreenchange', { isFullscreen: false }); + }; - this.trigger('fullscreenchange', { isFullscreen: true }); - }; + const beginFn = function() { + this.one('webkitendfullscreen', endFn); - this.on('webkitbeginfullscreen', beginFn); - this.on('dispose', () => { - this.off('webkitbeginfullscreen', beginFn); - this.off('webkitendfullscreen', endFn); - }); - } + this.trigger('fullscreenchange', { isFullscreen: true }); + }; + + this.on('webkitbeginfullscreen', beginFn); + this.on('dispose', () => { + this.off('webkitbeginfullscreen', beginFn); + this.off('webkitendfullscreen', endFn); + }); } /**