From 8e1592b6ab278cefb8f46f5b65a47373c7cebb7d Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Wed, 22 Mar 2017 10:26:44 +0000 Subject: [PATCH 1/8] issue-1480: fullscreen hook + inview control --- js/adapt-contrib-media.js | 3 ++- libraries/mediaelement-fullscreen-hook.js | 31 +++++++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 libraries/mediaelement-fullscreen-hook.js diff --git a/js/adapt-contrib-media.js b/js/adapt-contrib-media.js index 9a0d416b..dd9f4cc5 100644 --- a/js/adapt-contrib-media.js +++ b/js/adapt-contrib-media.js @@ -2,7 +2,8 @@ define([ 'core/js/adapt', 'core/js/views/componentView', 'libraries/mediaelement-and-player', - 'libraries/mediaelement-and-player-accessible-captions' + 'libraries/mediaelement-and-player-accessible-captions', + 'libraries/mediaelement-fullscreen-hook' ], function(Adapt, ComponentView) { var froogaloopAdded = false; diff --git a/libraries/mediaelement-fullscreen-hook.js b/libraries/mediaelement-fullscreen-hook.js new file mode 100644 index 00000000..893e8a9d --- /dev/null +++ b/libraries/mediaelement-fullscreen-hook.js @@ -0,0 +1,31 @@ +define([ + 'core/js/adapt', + 'libraries/mediaelement-and-player' +], function(Adapt) { + + var rawPrototype = $.extend({}, mejs.MediaElementPlayer.prototype); + $.extend(mejs.MediaElementPlayer.prototype, { + + exitFullScreen: function() { + + Adapt.trigger("media:fullscreen:exit", this); + + $.inview.unlock("mediaelement"); + + return rawPrototype.exitFullScreen.apply(this, arguments); + + }, + + enterFullScreen: function() { + + Adapt.trigger("media:fullscreen:enter", this); + + $.inview.lock("mediaelement"); + + return rawPrototype.enterFullScreen.apply(this, arguments); + + } + + }); + +}); \ No newline at end of file From f3c289f87006d26f01287430057b02e562a83550 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Thu, 23 Mar 2017 09:37:35 +0000 Subject: [PATCH 2/8] issue-1480: wait for settle on fullScreen:exit --- libraries/mediaelement-fullscreen-hook.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/libraries/mediaelement-fullscreen-hook.js b/libraries/mediaelement-fullscreen-hook.js index 893e8a9d..a20cb5b6 100644 --- a/libraries/mediaelement-fullscreen-hook.js +++ b/libraries/mediaelement-fullscreen-hook.js @@ -10,9 +10,14 @@ define([ Adapt.trigger("media:fullscreen:exit", this); - $.inview.unlock("mediaelement"); + var returnValue = rawPrototype.exitFullScreen.apply(this, arguments); - return rawPrototype.exitFullScreen.apply(this, arguments); + // Wait for browser to settle coming down from full screen. + _.delay(function() { + $.inview.unlock("mediaelement"); + }, 500); + + return returnValue; }, @@ -28,4 +33,4 @@ define([ }); -}); \ No newline at end of file +}); From adf81f5c07eb1fad1ff5d58a164ca1625d49adca Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Thu, 23 Mar 2017 10:15:44 +0000 Subject: [PATCH 3/8] issue-1480: added comment + spaces 4 --- libraries/mediaelement-fullscreen-hook.js | 49 +++++++++++++---------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/libraries/mediaelement-fullscreen-hook.js b/libraries/mediaelement-fullscreen-hook.js index a20cb5b6..14834fae 100644 --- a/libraries/mediaelement-fullscreen-hook.js +++ b/libraries/mediaelement-fullscreen-hook.js @@ -1,36 +1,41 @@ define([ - 'core/js/adapt', - 'libraries/mediaelement-and-player' + 'core/js/adapt', + 'libraries/mediaelement-and-player' ], function(Adapt) { - - var rawPrototype = $.extend({}, mejs.MediaElementPlayer.prototype); - $.extend(mejs.MediaElementPlayer.prototype, { + + // fixes a bug (adaptlearning/adapt_framework#1478) + // where the media player going into/coming out of full-screen mode would trigger inview on + // components below it; we therefore need to switch off inview when entering full screen mode + // and switch it back on again shortly after exiting it - exitFullScreen: function() { + var mepPrototype = $.extend({}, mejs.MediaElementPlayer.prototype); + $.extend(mejs.MediaElementPlayer.prototype, { - Adapt.trigger("media:fullscreen:exit", this); + exitFullScreen: function() { - var returnValue = rawPrototype.exitFullScreen.apply(this, arguments); + Adapt.trigger("media:fullscreen:exit", this); - // Wait for browser to settle coming down from full screen. - _.delay(function() { - $.inview.unlock("mediaelement"); - }, 500); - - return returnValue; - - }, + var returnValue = mepPrototype.exitFullScreen.apply(this, arguments); - enterFullScreen: function() { + // Wait for browser to settle coming down from full screen. + _.delay(function() { + $.inview.unlock("mediaelement"); + }, 500); + + return returnValue; + + }, - Adapt.trigger("media:fullscreen:enter", this); + enterFullScreen: function() { - $.inview.lock("mediaelement"); + Adapt.trigger("media:fullscreen:enter", this); - return rawPrototype.enterFullScreen.apply(this, arguments); + $.inview.lock("mediaelement"); - } + return mepPrototype.enterFullScreen.apply(this, arguments); - }); + } + + }); }); From 3f18bc8d96963680d44495fa31a53a0f0d17feea Mon Sep 17 00:00:00 2001 From: moloko Date: Fri, 12 May 2017 11:28:19 +0100 Subject: [PATCH 4/8] re-wrote to use the browser fullscreen API so that it will still work when the user activates/deactivates fullscreen mode using the browser's own fullscreen controls rather than the mediaelementjs control --- libraries/mediaelement-fullscreen-hook.js | 91 +++++++++++++---------- 1 file changed, 53 insertions(+), 38 deletions(-) diff --git a/libraries/mediaelement-fullscreen-hook.js b/libraries/mediaelement-fullscreen-hook.js index 14834fae..2487e227 100644 --- a/libraries/mediaelement-fullscreen-hook.js +++ b/libraries/mediaelement-fullscreen-hook.js @@ -1,41 +1,56 @@ define([ - 'core/js/adapt', - 'libraries/mediaelement-and-player' + 'core/js/adapt', + 'libraries/mediaelement-and-player' ], function(Adapt) { - - // fixes a bug (adaptlearning/adapt_framework#1478) - // where the media player going into/coming out of full-screen mode would trigger inview on - // components below it; we therefore need to switch off inview when entering full screen mode - // and switch it back on again shortly after exiting it - - var mepPrototype = $.extend({}, mejs.MediaElementPlayer.prototype); - $.extend(mejs.MediaElementPlayer.prototype, { - - exitFullScreen: function() { - - Adapt.trigger("media:fullscreen:exit", this); - - var returnValue = mepPrototype.exitFullScreen.apply(this, arguments); - - // Wait for browser to settle coming down from full screen. - _.delay(function() { - $.inview.unlock("mediaelement"); - }, 500); - - return returnValue; + var mepPrototype = $.extend({}, mejs.MediaElementPlayer.prototype); + + $.extend(mejs.MediaElementPlayer.prototype, { + /** + * fixes a bug (adaptlearning/adapt_framework#1478) + * where the media player going into/coming out of full-screen mode would trigger inview on + * components below it; we therefore need to switch off inview when entering full screen mode + * and switch it back on again after exiting full screen mode + */ + detectFullscreenMode: function() { + var vendorPrefix = this.getVendorPrefix(); + var fsEventName = "on" + vendorPrefix + "fullscreenchange"; + + if(document[fsEventName] === null) { + document[fsEventName] = function fullScreenEventHandler() { + + // because Firefox just HAS to be different... + var elementName = (vendorPrefix === "moz" ? "mozFullScreenElement" : vendorPrefix + "FullscreenElement"); + + if(document[elementName] !== null) { + $.inview.lock("mediaelement"); + Adapt.trigger("media:fullscreen:enter"); + } else { + $.inview.unlock("mediaelement"); + Adapt.trigger("media:fullscreen:exit"); + } + }; + } + return mepPrototype.detectFullscreenMode.apply(this, arguments); + }, + + /** + * unfortunately the fullscreen events and properties are all still vendor-prefixed, see + * https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Prefixing + * This function works out the correct prefix for the current browser. + */ + getVendorPrefix: function() { + var prefix = "webkit";// Chrome, Safari, Opera and Edge all use the 'webkit' prefix, so default to that + var $html = $('html'); - }, - - enterFullScreen: function() { - - Adapt.trigger("media:fullscreen:enter", this); - - $.inview.lock("mediaelement"); - - return mepPrototype.enterFullScreen.apply(this, arguments); - - } - - }); - -}); + if($html.hasClass('internet explorer')){ + prefix = "ms"; + } + + if($html.hasClass('firefox')) { + prefix = "moz"; + } + + return prefix; + } + }); +}); \ No newline at end of file From 55afb35042f709a3cfb703f545690b05db92efa9 Mon Sep 17 00:00:00 2001 From: moloko Date: Fri, 12 May 2017 11:32:05 +0100 Subject: [PATCH 5/8] return early from getVendorPrefix - if browser is IE or Firefox there's no point doing anything further --- libraries/mediaelement-fullscreen-hook.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libraries/mediaelement-fullscreen-hook.js b/libraries/mediaelement-fullscreen-hook.js index 2487e227..782d5a85 100644 --- a/libraries/mediaelement-fullscreen-hook.js +++ b/libraries/mediaelement-fullscreen-hook.js @@ -41,13 +41,13 @@ define([ getVendorPrefix: function() { var prefix = "webkit";// Chrome, Safari, Opera and Edge all use the 'webkit' prefix, so default to that var $html = $('html'); - + if($html.hasClass('internet explorer')){ - prefix = "ms"; + return "ms"; } if($html.hasClass('firefox')) { - prefix = "moz"; + return "moz"; } return prefix; From dc408594abccdb1bb45d7aae9bfd1d61f9d0fb5f Mon Sep 17 00:00:00 2001 From: moloko Date: Fri, 12 May 2017 11:35:38 +0100 Subject: [PATCH 6/8] tabs > spaces --- libraries/mediaelement-fullscreen-hook.js | 100 +++++++++++----------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/libraries/mediaelement-fullscreen-hook.js b/libraries/mediaelement-fullscreen-hook.js index 782d5a85..6cb2646c 100644 --- a/libraries/mediaelement-fullscreen-hook.js +++ b/libraries/mediaelement-fullscreen-hook.js @@ -1,56 +1,56 @@ define([ - 'core/js/adapt', - 'libraries/mediaelement-and-player' + 'core/js/adapt', + 'libraries/mediaelement-and-player' ], function(Adapt) { - var mepPrototype = $.extend({}, mejs.MediaElementPlayer.prototype); + var mepPrototype = $.extend({}, mejs.MediaElementPlayer.prototype); - $.extend(mejs.MediaElementPlayer.prototype, { - /** + $.extend(mejs.MediaElementPlayer.prototype, { + /** * fixes a bug (adaptlearning/adapt_framework#1478) - * where the media player going into/coming out of full-screen mode would trigger inview on - * components below it; we therefore need to switch off inview when entering full screen mode - * and switch it back on again after exiting full screen mode + * where the media player going into/coming out of full-screen mode would trigger inview on + * components below it; we therefore need to switch off inview when entering full screen mode + * and switch it back on again after exiting full screen mode */ - detectFullscreenMode: function() { - var vendorPrefix = this.getVendorPrefix(); - var fsEventName = "on" + vendorPrefix + "fullscreenchange"; - - if(document[fsEventName] === null) { - document[fsEventName] = function fullScreenEventHandler() { - - // because Firefox just HAS to be different... - var elementName = (vendorPrefix === "moz" ? "mozFullScreenElement" : vendorPrefix + "FullscreenElement"); - - if(document[elementName] !== null) { - $.inview.lock("mediaelement"); - Adapt.trigger("media:fullscreen:enter"); - } else { - $.inview.unlock("mediaelement"); - Adapt.trigger("media:fullscreen:exit"); - } - }; - } - return mepPrototype.detectFullscreenMode.apply(this, arguments); - }, - - /** - * unfortunately the fullscreen events and properties are all still vendor-prefixed, see - * https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Prefixing - * This function works out the correct prefix for the current browser. - */ - getVendorPrefix: function() { - var prefix = "webkit";// Chrome, Safari, Opera and Edge all use the 'webkit' prefix, so default to that - var $html = $('html'); - - if($html.hasClass('internet explorer')){ - return "ms"; - } - - if($html.hasClass('firefox')) { - return "moz"; - } - - return prefix; - } - }); + detectFullscreenMode: function() { + var vendorPrefix = this.getVendorPrefix(); + var fsEventName = "on" + vendorPrefix + "fullscreenchange"; + + if(document[fsEventName] === null) { + document[fsEventName] = function fullScreenEventHandler() { + + // because Firefox just HAS to be different... + var elementName = (vendorPrefix === "moz" ? "mozFullScreenElement" : vendorPrefix + "FullscreenElement"); + + if(document[elementName] !== null) { + $.inview.lock("mediaelement"); + Adapt.trigger("media:fullscreen:enter"); + } else { + $.inview.unlock("mediaelement"); + Adapt.trigger("media:fullscreen:exit"); + } + }; + } + return mepPrototype.detectFullscreenMode.apply(this, arguments); + }, + + /** + * unfortunately the fullscreen events and properties are all still vendor-prefixed, see + * https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Prefixing + * This function works out the correct prefix for the current browser. + */ + getVendorPrefix: function() { + var prefix = "webkit";// Chrome, Safari, Opera and Edge all use the 'webkit' prefix, so default to that + var $html = $('html'); + + if($html.hasClass('internet explorer')){ + return "ms"; + } + + if($html.hasClass('firefox')) { + return "moz"; + } + + return prefix; + } + }); }); \ No newline at end of file From 1b9d65651d0f2c3b2c6281d36f8e6beddc4905ae Mon Sep 17 00:00:00 2001 From: moloko Date: Fri, 12 May 2017 11:45:02 +0100 Subject: [PATCH 7/8] ditch local var prefix from getVendorPrefix; fix spacing --- libraries/mediaelement-fullscreen-hook.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/libraries/mediaelement-fullscreen-hook.js b/libraries/mediaelement-fullscreen-hook.js index 6cb2646c..aed68e89 100644 --- a/libraries/mediaelement-fullscreen-hook.js +++ b/libraries/mediaelement-fullscreen-hook.js @@ -15,13 +15,13 @@ define([ var vendorPrefix = this.getVendorPrefix(); var fsEventName = "on" + vendorPrefix + "fullscreenchange"; - if(document[fsEventName] === null) { + if (document[fsEventName] === null) { document[fsEventName] = function fullScreenEventHandler() { // because Firefox just HAS to be different... var elementName = (vendorPrefix === "moz" ? "mozFullScreenElement" : vendorPrefix + "FullscreenElement"); - if(document[elementName] !== null) { + if (document[elementName] !== null) { $.inview.lock("mediaelement"); Adapt.trigger("media:fullscreen:enter"); } else { @@ -39,18 +39,17 @@ define([ * This function works out the correct prefix for the current browser. */ getVendorPrefix: function() { - var prefix = "webkit";// Chrome, Safari, Opera and Edge all use the 'webkit' prefix, so default to that var $html = $('html'); - if($html.hasClass('internet explorer')){ + if ($html.hasClass('internet explorer')) { return "ms"; } - if($html.hasClass('firefox')) { + if ($html.hasClass('firefox')) { return "moz"; } - return prefix; + return "webkit"; // Chrome, Safari, Opera and Edge all use the 'webkit' prefix, so default to that } }); }); \ No newline at end of file From 77f5df000d6450948941ac1992bd025881d0f1f9 Mon Sep 17 00:00:00 2001 From: moloko Date: Fri, 12 May 2017 13:20:20 +0100 Subject: [PATCH 8/8] switching to using Adapt.device.browser following suggestions from code review --- libraries/mediaelement-fullscreen-hook.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libraries/mediaelement-fullscreen-hook.js b/libraries/mediaelement-fullscreen-hook.js index aed68e89..643a1b47 100644 --- a/libraries/mediaelement-fullscreen-hook.js +++ b/libraries/mediaelement-fullscreen-hook.js @@ -39,13 +39,13 @@ define([ * This function works out the correct prefix for the current browser. */ getVendorPrefix: function() { - var $html = $('html'); + var browser = Adapt.device.browser.toLowerCase(); - if ($html.hasClass('internet explorer')) { + if (browser === "internet explorer") { return "ms"; } - if ($html.hasClass('firefox')) { + if (browser === "firefox") { return "moz"; }