web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-04 06:48:49 +02:00
Code Releases Activity

fix: Guard against Safari adding native controls after fullscreen (#7634)

Browse Source
This commit is contained in:
mister-ben 2022-02-23 18:17:49 +01:00 committed by GitHub
parent c44057d217
commit f16d73b528
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/player.js
View File

@ -2124,7 +2124,10 @@ class Player extends Component {
handleTechFullscreenChange_(event, data) {
if (data) {
if (data.nativeIOSFullscreen) {
this.toggleClass('vjs-ios-native-fs');
this.addClass('vjs-ios-native-fs');
this.tech_.one('webkitendfullscreen', () => {
this.removeClass('vjs-ios-native-fs');
});
}
this.isFullscreen(data.isFullscreen);
}

7
src/js/tech/html5.js
View File

@ -641,11 +641,14 @@ class Html5 extends Tech {
const endFn = function() {
this.trigger('fullscreenchange', { isFullscreen: false });
// Safari will sometimes set contols on the videoelement when existing fullscreen.
if (this.el_.controls && !this.options_.nativeControlsForTouch && this.controls()) {
this.el_.controls = false;
}
};
const beginFn = function() {
if ('webkitPresentationMode' in this.el_ &&
this.el_.webkitPresentationMode !== 'picture-in-picture') {
if ('webkitPresentationMode' in this.el_ && this.el_.webkitPresentationMode !== 'picture-in-picture') {
this.one('webkitendfullscreen', endFn);
this.trigger('fullscreenchange', {

48
test/unit/player-fullscreen.test.js
View File

@ -1,5 +1,6 @@
/* eslint-env qunit */
import Player from '../../src/js/player.js';
import Html5 from '../../src/js/tech/html5.js'; // eslint-disable-line no-unused-vars
import TestHelpers from './test-helpers.js';
import sinon from 'sinon';
import window from 'global/window';
@ -21,6 +22,19 @@ const FullscreenTestHelpers = {
};
return player;
},
fakeSafariVideoEl() {
const testEl = document.createElement('video');
if (!('webkitPresentationMode' in testEl)) {
testEl.webkitPresentationMode = 'test';
}
if (!('webkitDisplayingFullscreen' in testEl)) {
testEl.webkitDisplayingFullscreen = false;
}
return testEl;
}
};
@ -265,6 +279,40 @@ QUnit.test('fullscreenchange event from Html5 should change player.isFullscreen_
player.dispose();
});
QUnit.test('fullscreenchange event from Html5 should guard against Safari showing double controls', function(assert) {
const player = FullscreenTestHelpers.makePlayer(undefined, {techOrder: ['html5']}, FullscreenTestHelpers.fakeSafariVideoEl());
const html5 = player.tech(true);
html5.trigger('webkitbeginfullscreen');
assert.ok(player.isFullscreen(), 'player.isFullscreen_ should be true');
player.tech_.el_.controls = true;
html5.trigger('webkitendfullscreen');
assert.ok(!player.tech_.el_.controls, 'el controls should be false');
player.dispose();
});
QUnit.test('Safari leaving fullscreen should retain controls with nativeControlsForTouch', function(assert) {
const player = FullscreenTestHelpers.makePlayer(undefined, {techOrder: ['html5'], nativeControlsForTouch: true}, FullscreenTestHelpers.fakeSafariVideoEl());
const html5 = player.tech(true);
html5.trigger('webkitbeginfullscreen');
assert.ok(player.isFullscreen(), 'player.isFullscreen_ should be true');
player.tech_.el_.controls = true;
html5.trigger('webkitendfullscreen');
assert.ok(player.tech_.el_.controls, 'el controls should be true');
player.dispose();
});
QUnit.test('fullscreenerror event from Html5 should pass through player', function(assert) {
const player = FullscreenTestHelpers.makePlayer(false);
const html5 = player.tech(true);