fix: Don't request fullscreen from document PIP window (#8881)

mister-ben · gkatsev · web-flow · commit 077077b00a91 · 2024-10-06T07:50:03.000+02:00
## Description Double clicking the document pip window requests fullscreen but this fails. The gesture on the pip window can't initiate fullscreen. Fixes #8877 ## Specific Changes proposed Change the default double click action to just exit pip. This is the same behaviour as before without the error, as requestFullScreen() calls exitPictureInPicture(); --------- Co-authored-by: Gary Katsevman <git@gkatsev.com>
diff --git a/src/js/player.js b/src/js/player.js
@@ -2003,7 +2003,8 @@ class Player extends Component {
   }
 
   /**
-   * Handle a double-click on the media element to enter/exit fullscreen
+   * Handle a double-click on the media element to enter/exit fullscreen,
+   * or exit documentPictureInPicture mode
    *
    * @param {Event} event
    *        the event that caused this function to trigger
@@ -2045,7 +2046,12 @@ class Player extends Component {
         ) {
 
           this.options_.userActions.doubleClick.call(this, event);
-
+        } else if (this.isInPictureInPicture() && !document.pictureInPictureElement) {
+          // Checking the presence of `window.documentPictureInPicture.window` complicates
+          // tests, checking `document.pictureInPictureElement` also works. It wouldn't
+          // be null in regular picture in picture.
+          // Exit picture in picture mode. This gesture can't trigger pip on the main window.
+          this.exitPictureInPicture();
         } else if (this.isFullscreen()) {
           this.exitFullscreen();
         } else {
diff --git a/test/unit/player-user-actions.test.js b/test/unit/player-user-actions.test.js
@@ -151,6 +151,19 @@ QUnit.test('by default, double-click opens fullscreen', function(assert) {
   assert.strictEqual(this.player.exitFullscreen.callCount, 1, 'has exited fullscreen');
 });
 
+QUnit.test('in document picture in picture mode, double-click exits pip', function(assert) {
+  this.player.isInPictureInPicture = () => true;
+  this.player.exitPictureInPicture = sinon.spy();
+  this.player.requestFullscreen = sinon.spy();
+  this.player.exitFullscreen = sinon.spy();
+
+  this.player.handleTechDoubleClick_({target: this.player.tech_.el_});
+
+  assert.strictEqual(this.player.exitPictureInPicture.callCount, 1, 'has exited pip once');
+  assert.strictEqual(this.player.requestFullscreen.callCount, 0, 'has not entered fullscreen');
+  assert.strictEqual(this.player.exitFullscreen.callCount, 0, 'has not exited fullscreen');
+});
+
 QUnit.test('when controls are disabled, double-click does nothing', function(assert) {
   let fullscreen = false;
 
