web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-02-02 11:34:50 +02:00
Code Releases Activity

refactor(pip): rely only on WICG spec events (#6064)

Browse Source 
The WICG spec calls out only two events, enterpictureinpicture and
leavepictureinpicture. We should try and only use those.
If pictureinpicturechange is still necessary, it can be re-added at a
later date.
This commit is contained in:
Gary Katsevman 2019-06-20 15:11:21 -04:00 committed by GitHub
parent cf6e0e8248
commit 10ed08a15a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/js/control-bar/picture-in-picture-toggle.js
View File

@ -20,10 +20,13 @@ class PictureInPictureToggle extends Button {
*
* @param {Object} [options]
* The key/value store of player options.
*
* @listens Player#enterpictureinpicture
* @listens Player#leavepictureinpicture
*/
constructor(player, options) {
super(player, options);
this.on(player, 'pictureinpicturechange', this.handlePictureInPictureChange);
this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], this.handlePictureInPictureChange);
// TODO: Activate button on player loadedmetadata event.
// TODO: Deactivate button on player emptied event.
@ -44,13 +47,14 @@ class PictureInPictureToggle extends Button {
}
/**
* Handles pictureinpicturechange on the player and change control text accordingly.
* Handles enterpictureinpicture and leavepictureinpicture on the player and change control text accordingly.
*
* @param {EventTarget~Event} [event]
* The {@link Player#pictureinpicturechange} event that caused this function to be
* The {@link Player#enterpictureinpicture} or {@link Player#leavepictureinpicture} event that caused this function to be
* called.
*
* @listens Player#pictureinpicturechange
* @listens Player#enterpictureinpicture
* @listens Player#leavepictureinpicture
*/
handlePictureInPictureChange(event) {
if (this.player_.isInPictureInPicture()) {

34
src/js/player.js
View File

@ -2067,18 +2067,9 @@ class Player extends Component {
*
* @private
* @listens Tech#enterpictureinpicture
* @fires Player#pictureinpicturechange
*/
handleTechEnterPictureInPicture_(event) {
this.isInPictureInPicture(true);
/**
* Fired when going in and out of Picture-in-Picture.
*
* @event Player#pictureinpicturechange
* @type {EventTarget~Event}
*/
this.trigger('pictureinpicturechange');
}
/**
@ -2089,18 +2080,9 @@ class Player extends Component {
*
* @private
* @listens Tech#leavepictureinpicture
* @fires Player#pictureinpicturechange
*/
handleTechLeavePictureInPicture_(event) {
this.isInPictureInPicture(false);
/**
* Fired when going in and out of Picture-in-Picture.
*
* @event Player#pictureinpicturechange
* @type {EventTarget~Event}
*/
this.trigger('pictureinpicturechange');
}
/**
@ -2896,13 +2878,19 @@ class Player extends Component {
*
* @see [Spec]{@link https://wicg.github.io/picture-in-picture}
*
* @fires Player#pictureinpicturechange
* @fires Player#enterpictureinpicture
*
* @return {Promise}
* A promise with a Picture-in-Picture window.
*/
requestPictureInPicture() {
if ('pictureInPictureEnabled' in document) {
/**
* This event fires when the player enters picture in picture mode
*
* @event Player#enterpictureinpicture
* @type {EventTarget~Event}
*/
return this.techGet_('requestPictureInPicture');
}
}
@ -2912,13 +2900,19 @@ class Player extends Component {
*
* @see [Spec]{@link https://wicg.github.io/picture-in-picture}
*
* @fires Player#pictureinpicturechange
* @fires Player#leavepictureinpicture
*
* @return {Promise}
* A promise.
*/
exitPictureInPicture() {
if ('pictureInPictureEnabled' in document) {
/**
* This event fires when the player leaves picture in picture mode
*
* @event Player#leavepictureinpicture
* @type {EventTarget~Event}
*/
return document.exitPictureInPicture();
}
}

6
test/unit/controls.test.js
View File

@ -153,16 +153,16 @@ QUnit.test('should hide playback rate control if it\'s not supported', function(
playbackRate.dispose();
});
QUnit.test('Picture-in-Picture control text should be correct when pictureinpicturechange is triggered', function(assert) {
QUnit.test('Picture-in-Picture control text should be correct when enterpictureinpicture and leavepictureinpicture are triggered', function(assert) {
const player = TestHelpers.makePlayer();
const pictureInPictureToggle = new PictureInPictureToggle(player);
player.isInPictureInPicture(true);
player.trigger('pictureinpicturechange');
player.trigger('enterpictureinpicture');
assert.equal(pictureInPictureToggle.controlText(), 'Exit Picture-in-Picture', 'Control Text is correct while switching to Picture-in-Picture mode');
player.isInPictureInPicture(false);
player.trigger('pictureinpicturechange');
player.trigger('leavepictureinpicture');
assert.equal(pictureInPictureToggle.controlText(), 'Picture-in-Picture', 'Control Text is correct while switching back to normal mode');
player.dispose();