From 753ce48e2194c7bce265a9d3f39d1a37d963aa62 Mon Sep 17 00:00:00 2001 From: Steve Heffernan Date: Tue, 28 May 2013 15:29:42 -0700 Subject: [PATCH] Close GH-546: Fix for exit-fullscreen bug in 4.0. fixes #497. --- sandbox/index.html.example | 5 ++++ src/js/events.js | 5 +++- src/js/player.js | 54 +++++++------------------------------- test/unit/mediafaker.js | 4 +++ test/unit/player.js | 18 +++++++++++++ 5 files changed, 41 insertions(+), 45 deletions(-) diff --git a/sandbox/index.html.example b/sandbox/index.html.example index 0b0463d44..be52b7be3 100644 --- a/sandbox/index.html.example +++ b/sandbox/index.html.example @@ -9,6 +9,11 @@ + + +

You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example, so please don't edit or add those files. To get started make a copy of index.html.example and rename it to index.html.

diff --git a/src/js/events.js b/src/js/events.js index 8933b867f..31f0aff04 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -174,7 +174,10 @@ vjs.fixEvent = function(event) { // which makes copying more difficult. // TODO: Probably best to create a whitelist of event props for (var key in old) { - event[key] = old[key]; + // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y + if (key !== 'layerX' && key !== 'layerY') { + event[key] = old[key]; + } } // The event occurred on this element diff --git a/src/js/player.js b/src/js/player.js index 09085a2c4..b4b753c18 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -392,7 +392,7 @@ vjs.Player.prototype.onError = function(e) { vjs.log('Video Error', e); }; -vjs.Player.prototype.onFullscreenChange = function(e) { +vjs.Player.prototype.onFullscreenChange = function() { if (this.isFullScreen) { this.addClass('vjs-fullscreen'); } else { @@ -593,7 +593,11 @@ vjs.Player.prototype.requestFullScreen = function(){ // take the controls fullscreen as well as the video // Trigger fullscreenchange event after change - vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){ + // We have to specifically add this each time, and remove + // when cancelling fullscreen. Otherwise if there's multiple + // players on a page, they would all be reacting to the same fullscreen + // events + vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(e){ this.isFullScreen = document[requestFullScreen.isFullScreen]; // If cancelling fullscreen, remove event listener. @@ -601,37 +605,18 @@ vjs.Player.prototype.requestFullScreen = function(){ vjs.off(document, requestFullScreen.eventName, arguments.callee); } + this.trigger('fullscreenchange'); })); - // Flash and other plugins get reloaded when you take their parent to fullscreen. - // To fix that we'll remove the tech, and reload it after the resize has finished. - if (this.tech.features.fullscreenResize === false && this.options_['flash']['iFrameMode'] !== true) { - - this.pause(); - this.unloadTech(); - - vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){ - vjs.off(document, requestFullScreen.eventName, arguments.callee); - this.loadTech(this.techName, { src: this.cache_.src }); - })); - - this.el_[requestFullScreen.requestFn](); - - } else { - this.el_[requestFullScreen.requestFn](); - } - - this.trigger('fullscreenchange'); + this.el_[requestFullScreen.requestFn](); } else if (this.tech.supportsFullScreen()) { // we can't take the video.js controls fullscreen but we can go fullscreen // with native controls - this.techCall('enterFullScreen'); } else { // fullscreen isn't supported so we'll just stretch the video element to // fill the viewport - this.enterFullWindow(); this.trigger('fullscreenchange'); } @@ -641,31 +626,11 @@ vjs.Player.prototype.requestFullScreen = function(){ vjs.Player.prototype.cancelFullScreen = function(){ var requestFullScreen = vjs.support.requestFullScreen; - this.isFullScreen = false; // Check for browser element fullscreen support if (requestFullScreen) { - - // Flash and other plugins get reloaded when you take their parent to fullscreen. - // To fix that we'll remove the tech, and reload it after the resize has finished. - if (this.tech.features.fullscreenResize === false && this.options_['flash']['iFrameMode'] !== true) { - - this.pause(); - this.unloadTech(); - - vjs.on(document, requestFullScreen.eventName, vjs.bind(this, function(){ - vjs.off(document, requestFullScreen.eventName, arguments.callee); - this.loadTech(this.techName, { src: this.cache_.src }); - })); - - document[requestFullScreen.cancelFn](); - } else { - document[requestFullScreen.cancelFn](); - } - - this.trigger('fullscreenchange'); - + document[requestFullScreen.cancelFn](); } else if (this.tech.supportsFullScreen()) { this.techCall('exitFullScreen'); } else { @@ -920,6 +885,7 @@ vjs.Player.prototype.ended = function(){ return this.techGet('ended'); }; // Current W3C Spec // http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api // Mozilla Draft: https://wiki.mozilla.org/Gecko:FullScreenAPI#fullscreenchange_event + // New: https://dvcs.w3.org/hg/fullscreen/raw-file/529a67b8d9f3/Overview.html if (div.cancelFullscreen !== undefined) { requestFS.requestFn = 'requestFullscreen'; requestFS.cancelFn = 'exitFullscreen'; diff --git a/test/unit/mediafaker.js b/test/unit/mediafaker.js index 29c29c4c1..82bff24a5 100644 --- a/test/unit/mediafaker.js +++ b/test/unit/mediafaker.js @@ -33,6 +33,10 @@ vjs.MediaFaker.prototype.createEl = function(){ vjs.MediaFaker.prototype.currentTime = function(){ return 0; }; vjs.MediaFaker.prototype.volume = function(){ return 0; }; vjs.MediaFaker.prototype.muted = function(){ return false; }; +vjs.MediaFaker.prototype.pause = function(){ return false; }; +vjs.MediaFaker.prototype.supportsFullScreen = function(){ return false; }; +vjs.MediaFaker.prototype.features = {}; +vjs.MediaFaker.prototype.buffered = function(){ return {}; }; // Export vars for Closure Compiler vjs['MediaFaker'] = vjs.MediaFaker; diff --git a/test/unit/player.js b/test/unit/player.js index 0fec80022..0aebcdd25 100644 --- a/test/unit/player.js +++ b/test/unit/player.js @@ -250,3 +250,21 @@ test('should set controls and trigger event', function() { player.dispose(); }); +// Can't figure out how to test fullscreen events with tests +// Browsers aren't triggering the events at least +// asyncTest('should trigger the fullscreenchange event', function() { +// expect(3); + +// var player = PlayerTest.makePlayer(); +// player.on('fullscreenchange', function(){ +// ok(true, 'fullscreenchange event fired'); +// ok(this.isFullScreen === true, 'isFullScreen is true'); +// ok(this.el().className.indexOf('vjs-fullscreen') !== -1, 'vjs-fullscreen class added'); + +// player.dispose(); +// start(); +// }); + +// player.requestFullScreen(); +// }); +