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..643a1b47 --- /dev/null +++ b/libraries/mediaelement-fullscreen-hook.js @@ -0,0 +1,55 @@ +define([ + 'core/js/adapt', + 'libraries/mediaelement-and-player' +], function(Adapt) { + 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 browser = Adapt.device.browser.toLowerCase(); + + if (browser === "internet explorer") { + return "ms"; + } + + if (browser === "firefox") { + return "moz"; + } + + return "webkit"; // Chrome, Safari, Opera and Edge all use the 'webkit' prefix, so default to that + } + }); +}); \ No newline at end of file