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

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.

src/js/control-bar/picture-in-picture-toggle.js

@@ -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()) {

src/js/player.js

@@ -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();
     }
   }

test/unit/controls.test.js

@@ -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();