Bug 1835149 - modify video controls visibility on PiP window after pl…

…ay/pause state change r=pip-reviewers,niklas

This patch utilizes `this.revealControls` to modify the visibility of video controls and subtitles on the PiP window, simlarly to how we show/hide them after selecting the play/pause buttons ([[ https://searchfox.org/mozilla-central/rev/76b13c585e575cf273fd05ab3b48a1532c1d1faa/toolkit/components/pictureinpicture/content/player.js#651,654 | searchfox ]]).

To be more specific about what `this.revealControls` does:
- handles when to add/remove the `showing` attribute, which is responsible for player controls opacity
- handles calling `this.showVideoControls` or `this.hideVideoControls`, which then send the async message `PictureInPicture:ShowVideoControls` or `PictureInPicture:HideVideoControls` respectively for subtitles position on the PiP window

Another change is simplifying how we send the async message `PictureInPicture:HideVideoControls` to PiPChild via the `this.hideVideoControls` function.

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

toolkit/components/pictureinpicture/content/player.js

@@ -124,6 +124,7 @@ function setVolume(volume) {
  * events for updating state.
  */
 let Player = {
+  _isInitialized: false,
   WINDOW_EVENTS: [
     "click",
     "contextmenu",
@@ -334,6 +335,8 @@ let Player = {
     } else {
       document.querySelector("#medium").checked = "true";
     }
+
+    this._isInitialized = true;
   },
 
   uninit() {
@@ -734,11 +737,7 @@ let Player = {
         return;
       }
 
-      this.actor.sendAsyncMessage("PictureInPicture:HideVideoControls", {
-        isFullscreen: this.isFullscreen,
-        isVideoControlsShowing: false,
-        playerBottomControlsDOMRect: null,
-      });
+      this.hideVideoControls();
     } else {
       this.settingsPanel.classList.remove("hide");
       this.closedCaptionButton.setAttribute("aria-expanded", true);
@@ -1090,11 +1089,7 @@ let Player = {
         !this.controls.getAttribute("keying") &&
         !this.controls.getAttribute("donthide")
       ) {
-        this.actor.sendAsyncMessage("PictureInPicture:HideVideoControls", {
-          isFullscreen: this.isFullscreen,
-          isVideoControlsShowing: false,
-          playerBottomControlsDOMRect: null,
-        });
+        this.hideVideoControls();
       }
     }
   },
@@ -1220,6 +1215,20 @@ let Player = {
       ? `pictureinpicture-pause-btn`
       : `pictureinpicture-play-btn`;
     this.setupTooltip("playpause", strId);
+
+    if (
+      !this._isInitialized ||
+      this.isCurrentHover ||
+      this.controls.getAttribute("keying")
+    ) {
+      return;
+    }
+
+    if (!isPlaying) {
+      this.revealControls(true);
+    } else {
+      this.revealControls(false);
+    }
   },
 
   _isMuted: false,
@@ -1279,6 +1288,7 @@ let Player = {
 
   /**
    * Send a message to PiPChild to adjust the subtitles position
+   * so that subtitles are visible when showing video controls.
    */
   showVideoControls() {
     // offsetParent returns null when the element or any ancestor has display: none
@@ -1291,6 +1301,18 @@ let Player = {
     });
   },
 
+  /**
+   * Send a message to PiPChild to adjust the subtitles position
+   * so that subtitles take up remaining space when hiding video controls.
+   */
+  hideVideoControls() {
+    this.actor.sendAsyncMessage("PictureInPicture:HideVideoControls", {
+      isFullscreen: this.isFullscreen,
+      isVideoControlsShowing: false,
+      playerBottomControlsDOMRect: null,
+    });
+  },
+
   /**
    * Makes the player controls visible.
    *
@@ -1328,11 +1350,7 @@ let Player = {
           !this.controls.getAttribute("keying") &&
           !this.controls.getAttribute("donthide")
         ) {
-          this.actor.sendAsyncMessage("PictureInPicture:HideVideoControls", {
-            isFullscreen: false,
-            isVideoControlsShowing: false,
-            playerBottomControlsDOMRect: null,
-          });
+          this.hideVideoControls();
         }
       }, CONTROLS_FADE_TIMEOUT_MS);
     }