Bug 1672623 - Closing PiP window pauses the cloned video element for video conferences. r=mconley

Differential Revision: https://phabricator.services.mozilla.com/D96633

toolkit/actors/PictureInPictureChild.jsm

@@ -1250,6 +1250,17 @@ class PictureInPictureChild extends JSWindowActorChild {
         break;
       }
       case "PictureInPicture:Pause": {
+        if (message.data && message.data.reason == "pip-closed") {
+          let video = this.getWeakVideo();
+
+          // Currently in Firefox srcObjects are MediaStreams. However, by spec a srcObject
+          // can be either a MediaStream, MediaSource or Blob. In case of future changes
+          // we do not want to pause MediaStream srcObjects and we want to maintain current
+          // behavior for non-MediaStream srcObjects.
+          if (video && video.srcObject instanceof MediaStream) {
+            break;
+          }
+        }
         this.pause();
         break;
       }

toolkit/components/pictureinpicture/content/player.js

@@ -308,7 +308,9 @@ let Player = {
       }
 
       case "close": {
-        this.actor.sendAsyncMessage("PictureInPicture:Pause");
+        this.actor.sendAsyncMessage("PictureInPicture:Pause", {
+          reason: "pip-closed",
+        });
         this.closePipWindow({ reason: "close-button" });
         break;
       }

toolkit/components/pictureinpicture/tests/browser.ini

@@ -12,6 +12,7 @@ support-files =
   test-transparent-overlay-2.html
   test-video-selection.html
   test-reversed.html
+  test-media-stream.html
   test-video.mp4
   test-video-cropped.mp4
   test-video-vertical.mp4
@@ -29,6 +30,7 @@ prefs =
   media.videocontrols.picture-in-picture.video-toggle.has-used=true
 
 [browser_cannotTriggerFromContent.js]
+[browser_closePipPause.js]
 [browser_contextMenu.js]
 skip-if = os == "linux" && bits == 64 && os_version == "18.04" # Bug 1569205
 [browser_closePlayer.js]
@@ -36,7 +38,6 @@ skip-if = os == "linux" && bits == 64 && os_version == "18.04" # Bug 1569205
 [browser_dblclickFullscreen.js]
 [browser_flipIconWithRTL.js]
 [browser_mediaStreamVideos.js]
-support-files = test-media-stream.html
 skip-if = os == 'mac' #Bug 1622391
 [browser_durationChange.js]
 [browser_fullscreen.js]

toolkit/components/pictureinpicture/tests/browser_closePipPause.js

@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * This test checks that MediaStream videos are not paused when closing
+ * the PiP window.
+ */
+add_task(async function test_close_mediaStreamVideos() {
+  await BrowserTestUtils.withNewTab(
+    {
+      url: TEST_ROOT + "test-media-stream.html",
+      gBrowser,
+    },
+    async browser => {
+      await SpecialPowers.spawn(browser, [], async () => {
+        // Construct a new video element, and capture a stream from it
+        // to redirect to both testing videos
+        let newVideo = content.document.createElement("video");
+        newVideo.src = "test-video.mp4";
+        newVideo.id = "media-stream-video";
+        content.document.body.appendChild(newVideo);
+        newVideo.loop = true;
+      });
+      await ensureVideosReady(browser);
+
+      // Modify both the "with-controls" and "no-controls" videos so that they mirror
+      // the new video that we just added via MediaStream.
+      await SpecialPowers.spawn(browser, [], async () => {
+        let newVideo = content.document.getElementById("media-stream-video");
+        newVideo.play();
+
+        for (let videoID of ["with-controls", "no-controls"]) {
+          let testedVideo = content.document.createElement("video");
+          testedVideo.id = videoID;
+          testedVideo.srcObject = newVideo.mozCaptureStream().clone();
+          content.document.body.prepend(testedVideo);
+          if (
+            testedVideo.readyState < content.HTMLMediaElement.HAVE_ENOUGH_DATA
+          ) {
+            info(`Waiting for 'canplaythrough' for '${testedVideo.id}'`);
+            await ContentTaskUtils.waitForEvent(testedVideo, "canplaythrough");
+          }
+          testedVideo.play();
+        }
+      });
+
+      for (let videoID of ["with-controls", "no-controls"]) {
+        let pipWin = await triggerPictureInPicture(browser, videoID);
+        ok(pipWin, "Got Picture-in-Picture window.");
+        ok(
+          !(await isVideoPaused(browser, videoID)),
+          "The video is not paused in PiP window."
+        );
+
+        let pipClosed = BrowserTestUtils.domWindowClosed(pipWin);
+        let closeButton = pipWin.document.getElementById("close");
+        EventUtils.synthesizeMouseAtCenter(closeButton, {}, pipWin);
+        await pipClosed;
+        ok(
+          !(await isVideoPaused(browser, videoID)),
+          "The video is not paused after closing PiP window."
+        );
+      }
+    }
+  );
+});

toolkit/components/pictureinpicture/tests/head.js

@@ -815,3 +815,16 @@ async function ensureMessageAndClosePiP(browser, videoID, pipWin, isIframe) {
     await uaWidgetUpdate;
   }
 }
+
+/**
+ * Helper function that returns True if the specified video is paused
+ * and False if the specified video is not paused.
+ *
+ * @param {Element} browser The <xul:browser> that has the <video> loaded in it.
+ * @param {String} videoID The ID of the video to check.
+ */
+async function isVideoPaused(browser, videoID) {
+  return SpecialPowers.spawn(browser, [videoID], async videoID => {
+    return content.document.getElementById(videoID).paused;
+  });
+}