Skip to content

Commit

Permalink
fixed FF not leaving FS, general OSMF issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@frankyghost
frankyghost committed Oct 24, 2013
1 parent df29bfe commit ba0d787
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 118 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ V1.2.39

fixes:
* [core] fixed jQuery 1.4 issues
* [core] now even Firefox accepts to leave fullscreen once "done" is being triggered

changes:
* [core] made OSMF player model default
Expand Down
2 changes: 1 addition & 1 deletion src/controller/projekktor.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ projekktorConfig.prototype = {
_thereCanBeOnlyOne: true,

/* on "true" try to leave fullscreen on player "complete" - does not seem to work properly in Firefox... yeah! */
_leaveFullscreen: false,
_leaveFullscreen: true,

/* An array of items to be played. Check http://www.projekktor.com/docs/playlists to learn more */
_playlist: [],
Expand Down
241 changes: 126 additions & 115 deletions src/controller/projekktor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -576,8 +576,10 @@ projekktor = $p = function() {
case 'COMPLETED':
// all items in PL completed:
if (this._currentItem+1>=this.media.length && !this.getConfig('loop')) {
if (this.getConfig('leaveFullscreen')) this.setFullscreen(false);
this._promote('done', {});
if (this.getConfig('leaveFullscreen')) {
this.reset(); // POW, crowba-method for Firefox!

This comment has been minimized.

Sign in to view

Copy link
@rwlodkowski

rwlodkowski Dec 9, 2013

Collaborator

Sascha this reset() is causing endless loop on the last playlist item.

This comment has been minimized.

Sign in to view

Copy link
@frankyghost

frankyghost Dec 12, 2013

Author Owner

Argh! The trouble comes from Firefox not accepting "change fullscreen mode" request without prior user interaction. As I understand why this is for "enterFullscreen" ´ve I absolutely no understanding for not allowing this on "leaveFullscreen" calls. I know this is built in by intention but I think it´s useless. The only way to force cancellation on "DONE" in FF is to remove the child-DOM. This is what .reset() does and why I put it in here. Seems to require some cleanup, though.

This comment has been minimized.

Sign in to view

Copy link
@rwlodkowski

rwlodkowski Dec 12, 2013

Collaborator

I think that endless loop on all browsers (especially when postrolls are enabled) is bigger problem than not leaving fullscreen only on FF. I think we should remove that reset() immediately.

This comment has been minimized.

Sign in to view

Copy link
@frankyghost

frankyghost Dec 19, 2013

Author Owner

There must be a solution for keeping the reset() and fixing the loop issue. Starting to work on this.

This comment has been minimized.

Sign in to view

Copy link
@rwlodkowski

rwlodkowski Mar 8, 2014

Collaborator

Some good news for us:
https://bugzilla.mozilla.org/show_bug.cgi?id=948268
they decided to allow to exit fullscreen programmatically

This comment has been minimized.

Sign in to view

Copy link
@frankyghost

frankyghost Mar 10, 2014

Author Owner

Seems it´s time to kick the ugly ".reset()" workaround and tell FF users to update their browsers.

This comment has been minimized.

Sign in to view

Copy link
@rwlodkowski

rwlodkowski Mar 21, 2014

Collaborator

Damn... that fix will be released with FF 29 on April 29, 2014.

This comment has been minimized.

Sign in to view

Copy link
@rwlodkowski

rwlodkowski Apr 29, 2014

Collaborator

At last! FF 29 is here and the exiting fullscreen works just as it should.
}
}
// next one, pls:
this.setActiveItem('next');
Expand Down Expand Up @@ -1461,15 +1463,15 @@ projekktor = $p = function() {
*/
this.getNativeFullscreenSupport = function() {
var ref = this,
fullScreenApi = {
supportsFullScreen: 'semi',
isFullScreen: function() {try {return ref.getDC().hasClass('fullscreen');} catch(e){return false;}},
requestFullScreen: function() {ref.playerModel.applyCommand('fullscreen', true);},
cancelFullScreen: function() {ref.playerModel.applyCommand('fullscreen', false);},
prefix: '',
ref: this
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
fullScreenApi = {
supportsFullScreen: 'viewport', // viewport=full viewport, media=video only (e.g. iphone), dom=html5 true fullscreen
isFullScreen: function() {try {return ref.getDC().hasClass('fullscreen');} catch(e){return false;}},
requestFullScreen: function() {ref.playerModel.applyCommand('fullscreen', true);},
cancelFullScreen: function() {ref.playerModel.applyCommand('fullscreen', false);},
prefix: '',
ref: this
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');

// return fullScreenApi;
// check for native support
Expand All @@ -1478,135 +1480,145 @@ projekktor = $p = function() {
if (typeof document.cancelFullScreen != 'undefined') {
fullScreenApi.supportsFullScreen = true;
} else {
// (double)-check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {

fullScreenApi.prefix = browserPrefixes[i];

// media element only
if (typeof document.createElement('video')[fullScreenApi.prefix+"EnterFullscreen"] != 'undefined') {
fullScreenApi.supportsFullScreen = 'mediaonly';
}

// player container / true fullscreen
if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {

fullScreenApi.supportsFullScreen = 'dom';

// FF8+FF9 double-check
if (fullScreenApi.prefix=='moz' && typeof document[fullScreenApi.prefix + 'FullScreenEnabled'] == 'undefined' ) {
fullScreenApi.supportsFullScreen = 'viewport';
}
}

// (double)-check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {

fullScreenApi.prefix = browserPrefixes[i];

// media element only
if (typeof document.createElement('video')[fullScreenApi.prefix+"EnterFullscreen"] != 'undefined') {
fullScreenApi.supportsFullScreen = 'media';
}

// player container / true fullscreen
if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
fullScreenApi.supportsFullScreen = 'dom';

// FF8+FF9 double-check
if (fullScreenApi.prefix=='moz' && typeof document[fullScreenApi.prefix + 'FullScreenEnabled'] == 'undefined' )
fullScreenApi.supportsFullScreen = false;
if (fullScreenApi.supportsFullScreen!==false && fullScreenApi.supportsFullScreen!=='viewport') {
break;
}

}

if (fullScreenApi.supportsFullScreen!==false && fullScreenApi.supportsFullScreen!=='semi')
break;

}

// SEMI:
// we are done here: full viewport only
if (fullScreenApi.supportsFullScreen=='viewport' || (fullScreenApi.supportsFullScreen=='dom' && this.getConfig('forceFullViewport'))) {
return fullScreenApi;
}

// forget it:
if (fullScreenApi.supportsFullScreen=='semi' || (fullScreenApi.supportsFullScreen=='dom' && this.getConfig('forceFullViewport')))
return fullScreenApi;

// is in fullscreen check
fullScreenApi.isFullScreen = function(esc) {
/*
* FF and GoogleTV report bullshit here:
* */
var dest = (ref.getIframe()) ? parent.window.document : document;
switch (this.prefix) {
case '':
return dest.fullScreen;
case 'webkit':
return dest.webkitIsFullScreen;
case 'moz':
return dest[this.prefix + 'FullScreen'] || (ref.getDC().hasClass('fullscreen') && esc!==true);
default:
return dest[this.prefix + 'FullScreen'];

// MEDIA ONLY:
// the browser supports true fullscreen for the media element only - this is semi cool
if (fullScreenApi.supportsFullScreen=='mediaonly') {
fullScreenApi.requestFullScreen = function(el) {
ref.playerModel.getMediaElement().get(0)[this.prefix+'EnterFullscreen']();
}
fullScreenApi.dest = {};

// cancel fullscreen method
fullScreenApi.cancelFullScreen = function() {}

return fullScreenApi;
}


// HTML5 true fullscreen:
// is in fullscreen check
fullScreenApi.isFullScreen = function(esc) {
// * FF and GoogleTV report bullshit here:
var dest = (ref.getIframe()) ? parent.window.document : document;
switch (this.prefix) {
case '':
return dest.fullScreen;
case 'webkit':
return dest.webkitIsFullScreen;
case 'moz':
return dest[this.prefix + 'FullScreen'] || (ref.getDC().hasClass('fullscreen') && esc!==true);
default:
return dest[this.prefix + 'FullScreen'];
}
}

// set initiation method and dest Obj
if (fullScreenApi.supportsFullScreen=='dom') {

// the browser supports true fullscreen for any DOM container - this is ubercool:
fullScreenApi.requestFullScreen = function() {
if (this.isFullScreen()) return;

var win = ref.getIframeParent() || $(window);
win.data('fsdata', {
scrollTop: win.scrollTop(),
scrollLeft: win.scrollLeft()
});
if (this.isFullScreen()) return;

var target = ref.getIframe() || ref.getDC(),
apiRef = this,
dest = (ref.getIframe()) ? parent.window.document : document,
win = ref.getIframeParent() || $(window);

var win = ref.getIframeParent() || $(window),
target = ref.getIframe() || ref.getDC().get(0),
apiRef = this,
dest = (ref.getIframe()) ? parent.window.document : document,
win = ref.getIframeParent() || $(window);

// store scroll positon:
win.data('fsdata', {
scrollTop: win.scrollTop(),
scrollLeft: win.scrollLeft()
});

$(dest).unbind(this.prefix + "fullscreenchange.projekktor");

if (this.prefix === '') {
target.requestFullScreen();
}
else {
target[this.prefix + 'RequestFullScreen']();
}

apiRef.ref.playerModel.applyCommand('fullscreen', true);

// create fullscreen change listener on the fly:
$(dest).bind(this.prefix + "fullscreenchange.projekktor", function(evt) {

if (!apiRef.isFullScreen(true)) {
apiRef.ref.playerModel.applyCommand('fullscreen', false);
var win = apiRef.ref.getIframeParent() || $(window),
fsData = win.data('fsdata');
if (fsData!=null) {
win.scrollTop(fsData.scrollTop);
win.scrollLeft(fsData.scrollLeft);
}

} else {
apiRef.ref.playerModel.applyCommand('fullscreen', true);
}
if (!apiRef.isFullScreen(true)) {
apiRef.ref.playerModel.applyCommand('fullscreen', false);
var win = apiRef.ref.getIframeParent() || $(window),
fsData = win.data('fsdata');
if (fsData!=null) {
win.scrollTop(fsData.scrollTop);
win.scrollLeft(fsData.scrollLeft);
}
} else {
apiRef.ref.playerModel.applyCommand('fullscreen', true);
}
});

if (this.prefix === '')
target.get(0).requestFullScreen()
else
target.get(0)[this.prefix + 'RequestFullScreen']();

apiRef.ref.playerModel.applyCommand('fullscreen', true);
}

// cancel fullscreen method
fullScreenApi.cancelFullScreen = function() {

$( (ref.getIframe()) ? parent.window.document : document).unbind(this.prefix + "fullscreenchange.projekktor");
var target = ref.getIframe() ? parent.window.document : document;
var target = ref.getIframe() ? parent.window.document : document,
win = ref.getIframeParent() || $(window),
fsData = win.data('fsdata');

$( (ref.getIframe()) ? parent.window.document : document).unbind(this.prefix + "fullscreenchange.projekktor");

// $(target).unbind(this.prefix + "fullscreenchange.projekktor");
// seems to cause errors in FF
if (target.exitFullScreen)
target.exitFullScreen();
else if (this.prefix == '')
target.cancelFullScreen();
else
target[this.prefix + 'CancelFullScreen']();
var win = ref.getIframeParent() || $(window),
fsData = win.data('fsdata');

if (fsData!=null) {
win.scrollTop(fsData.scrollTop);
win.scrollLeft(fsData.scrollLeft);
}

ref.playerModel.applyCommand('fullscreen', false);
}

return fullScreenApi;
}
if (target.exitFullScreen) {
target.exitFullScreen();
}
else if (this.prefix == '') {
target.cancelFullScreen();
}
else {
target[this.prefix + 'CancelFullScreen']();
}

// the browser supports true fullscreen for the media element only - this is semi cool
fullScreenApi.requestFullScreen = function(el) {
ref.playerModel.getMediaElement().get(0)[this.prefix+'EnterFullscreen']();
// restore scrollposition
if (fsData!=null) {
win.scrollTop(fsData.scrollTop);
win.scrollLeft(fsData.scrollLeft);
}

ref.playerModel.applyCommand('fullscreen', false);
}
fullScreenApi.dest = {};

// cancel fullscreen method
fullScreenApi.cancelFullScreen = function() {}

return fullScreenApi;
};
Expand Down Expand Up @@ -2092,8 +2104,7 @@ projekktor = $p = function() {
};

this.setFullscreen = function(goFull) {
var nativeFullscreen = this.getNativeFullscreenSupport(),
ref = this;
var nativeFullscreen = this.getNativeFullscreenSupport();

goFull = (goFull==null) ? !nativeFullscreen.isFullScreen() : goFull;

Expand Down
4 changes: 2 additions & 2 deletions src/models/player.audio.video.osmf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ $p.newModel({
_volume: 0,

_eventMap: {
mediaPlayerStateChange: "OSMF_playerStateChange",
// mediaPlayerStateChange: "OSMF_playerStateChange", obsolete
mediaPlayerCapabilityChange: "OSMF_PlayerCapabilityChange",
durationChange: "OSMF_durationChange",
currentTimeChange: "OSMF_currentTimeChange",
Expand Down Expand Up @@ -207,7 +207,7 @@ $p.newModel({
case 'playing':
this.playingListener();
break;
case 'paused':
case 'paused':
this.pauseListener();
break;
case 'stopped':
Expand Down

0 comments on commit ba0d787

Please sign in to comment.