Merge pull request #6321 from Slowlife01/media-control

Feat: basic media control

src/browser/base/zen-components/ZenMediaController.mjs

@@ -27,6 +27,18 @@ class ZenMediaController {
     this.mediaDuration = document.querySelector('#zen-media-duration');
     this.mediaFocusButton = document.querySelector('#zen-media-focus-button');
     this.mediaProgressBarContainer = document.querySelector('#zen-media-progress-hbox');
+
+    window.addEventListener('TabSelect', (event) => {
+      if (this._currentBrowser) {
+        if (event.target.linkedBrowser.browserId === this._currentBrowser.browserId) {
+          this.mediaControlBar.setAttribute('hidden', 'true');
+        } else {
+          this.mediaControlBar.removeAttribute('hidden');
+        }
+
+        gZenUIManager.updateTabsToolbar();
+      }
+    });
   }
 
   /**
@@ -78,7 +90,6 @@ class ZenMediaController {
     this.mediaServiceIcon.src = this._currentBrowser.mIconURL;
     this.mediaFocusButton.style.listStyleImage = `url(${this._currentBrowser.mIconURL})`;
 
-    this.mediaControlBar.removeAttribute('hidden');
     this.mediaTitle.textContent = metadata.title || '';
     this.mediaArtist.textContent = metadata.artist || '';
 
@@ -99,8 +110,14 @@ class ZenMediaController {
    * @param {Object} browser - The browser associated with the media controller.
    */
   activateMediaControls(mediaController, browser) {
+    this.updateMuteState();
+
     if (this._currentBrowser?.browserId === browser.browserId) return;
-    else this._currentBrowser = browser;
+    else {
+      this.deinitMediaController(this._currentMediaController);
+      this._currentMediaController = mediaController;
+      this._currentBrowser = browser;
+    }
 
     mediaController.onpositionstatechange = this.onPositionstateChange.bind(this);
     mediaController.onplaybackstatechange = this.onPlaybackstateChange.bind(this);
@@ -108,11 +125,6 @@ class ZenMediaController {
     mediaController.onmetadatachange = this.onMetadataChange.bind(this);
     mediaController.ondeactivated = this.onDeactivated.bind(this);
 
-    if (this._currentMediaController === mediaController) return;
-    else this.deinitMediaController(this._currentMediaController);
-
-    this._currentMediaController = mediaController;
-
     const metadata = mediaController.getMetadata();
     const positionState = mediaController.getPositionState();
 
@@ -269,6 +281,15 @@ class ZenMediaController {
       this._currentMediaController?.play();
     }
   }
+
+  updateMuteState() {
+    if (!this._currentBrowser) return;
+    if (this._currentBrowser._audioMuted) {
+      this.mediaControlBar.setAttribute('muted', '');
+    } else {
+      this.mediaControlBar.removeAttribute('muted');
+    }
+  }
 }
 
 window.gZenMediaController = new ZenMediaController();

src/dom/html/HTMLMediaElement-cpp.patch

@@ -0,0 +1,12 @@
+diff --git a/dom/html/HTMLMediaElement.cpp b/dom/html/HTMLMediaElement.cpp
+index 0b8dee1ca22b1f0ddcf7e6a976f606990104b56e..a3a5a7cfcaa8a4719e56988bc917183fa3cc9d10 100644
+--- a/dom/html/HTMLMediaElement.cpp
++++ b/dom/html/HTMLMediaElement.cpp
+@@ -455,6 +455,7 @@ class HTMLMediaElement::MediaControlKeyListener final
+     // audible state. Therefore, in that case we would noitfy the audible state
+     // when media starts playing.
+     if (mState == MediaPlaybackState::ePlayed) {
++      NotifyMediaPositionState();
+       NotifyAudibleStateChanged(mIsOwnerAudible
+                                     ? MediaAudibleState::eAudible
+                                     : MediaAudibleState::eInaudible);

src/toolkit/actors/AudioPlaybackParent-sys-mjs.patch

@@ -1,8 +1,8 @@
 diff --git a/toolkit/actors/AudioPlaybackParent.sys.mjs b/toolkit/actors/AudioPlaybackParent.sys.mjs
-index db682fd90b2bb5330497d2cf2158ff4cac6bbc47..c44e39f47f9d9b13918930a6c96ee7aa39c51b36 100644
+index db682fd90b2bb5330497d2cf2158ff4cac6bbc47..4e6f891275d489418b8ea58a10345a1baa3a554c 100644
 --- a/toolkit/actors/AudioPlaybackParent.sys.mjs
 +++ b/toolkit/actors/AudioPlaybackParent.sys.mjs
-@@ -14,6 +14,7 @@ export class AudioPlaybackParent extends JSWindowActorParent {
+@@ -14,10 +14,12 @@ export class AudioPlaybackParent extends JSWindowActorParent {
      switch (aMessage.name) {
        case "AudioPlayback:Start":
          this._hasAudioPlayback = true;
@@ -10,3 +10,8 @@ index db682fd90b2bb5330497d2cf2158ff4cac6bbc47..c44e39f47f9d9b13918930a6c96ee7aa
          browser.audioPlaybackStarted();
          break;
        case "AudioPlayback:Stop":
+         this._hasAudioPlayback = false;
++        browser.ownerGlobal.gZenMediaController.updateMuteState();
+         browser.audioPlaybackStopped();
+         break;
+       case "AudioPlayback:ActiveMediaBlockStart":