Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

25 files changed, 1116 insertions, 0 deletions

diff --git a/browser/extensions/pictureinpicture/video-wrappers/airmozilla.js b/browser/extensions/pictureinpicture/video-wrappers/airmozilla.js
new file mode 100644
index 0000000000..d2e98cbe48
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/airmozilla.js
@@ -0,0 +1,63 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  play(video) {
+    let playPauseButton = document.querySelector(
+      "#transportControls #playButton"
+    );
+    if (video.paused) {
+      playPauseButton?.click();
+    }
+  }
+
+  pause(video) {
+    let playPauseButton = document.querySelector(
+      "#transportControls #playButton"
+    );
+    if (!video.paused) {
+      playPauseButton?.click();
+    }
+  }
+
+  setMuted(video, shouldMute) {
+    let muteButton = document.querySelector("#transportControls #muteButton");
+    if (video.muted !== shouldMute && muteButton) {
+      muteButton.click();
+    }
+  }
+
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector("#absoluteControls");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container?.querySelector("#overlayCaption").innerText;
+
+        if (!text) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(text);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/bbc.js b/browser/extensions/pictureinpicture/video-wrappers/bbc.js
new file mode 100644
index 0000000000..a5adcbc534
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/bbc.js
@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".p_subtitlesContainer");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container.querySelector(".p_cueDirUniWrapper")?.innerText;
+        updateCaptionsFunction(text);
+      };
+
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/cbc.js b/browser/extensions/pictureinpicture/video-wrappers/cbc.js
new file mode 100644
index 0000000000..595d23594b
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/cbc.js
@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  play(video) {
+    let playPauseButton = document.querySelector(".video-ui .play-button");
+    if (video.paused) {
+      playPauseButton?.click();
+    }
+  }
+
+  pause(video) {
+    let playPauseButton = document.querySelector(".video-ui .pause-button");
+    if (!video.paused) {
+      playPauseButton?.click();
+    }
+  }
+
+  setMuted(video, shouldMute) {
+    let muteButton = document.querySelector(".video-ui .muted-btn");
+    if (video.muted !== shouldMute && muteButton) {
+      muteButton.click();
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/dailymotion.js b/browser/extensions/pictureinpicture/video-wrappers/dailymotion.js
new file mode 100644
index 0000000000..161f1ec516
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/dailymotion.js
@@ -0,0 +1,42 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector("#player");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let textNodeList = container
+          ?.querySelector(".subtitles")
+          ?.querySelectorAll("div");
+
+        if (!textNodeList) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(
+          Array.from(textNodeList, x => x.innerText).join("\n")
+        );
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/disneyplus.js b/browser/extensions/pictureinpicture/video-wrappers/disneyplus.js
new file mode 100644
index 0000000000..816dc0d5e0
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/disneyplus.js
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".dss-hls-subtitle-overlay");
+
+    if (container) {
+      const callback = () => {
+        let textNodeList = container.querySelectorAll(
+          ".dss-subtitle-renderer-line"
+        );
+
+        if (!textNodeList.length) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(
+          Array.from(textNodeList, x => x.textContent).join("\n")
+        );
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback();
+
+      let captionsObserver = new MutationObserver(callback);
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/edx.js b/browser/extensions/pictureinpicture/video-wrappers/edx.js
new file mode 100644
index 0000000000..07a3d9f302
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/edx.js
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".video-wrapper");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container.querySelector(
+          ".closed-captions.is-visible"
+        )?.innerText;
+        updateCaptionsFunction(text);
+      };
+
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/hbomax.js b/browser/extensions/pictureinpicture/video-wrappers/hbomax.js
new file mode 100644
index 0000000000..8aff3e0077
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/hbomax.js
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setVolume(video, volume) {
+    video.volume = volume;
+  }
+  isMuted(video) {
+    return video.volume === 0;
+  }
+  setMuted(video, shouldMute) {
+    if (shouldMute) {
+      this.setVolume(video, 0);
+    } else {
+      this.setVolume(video, 1);
+    }
+  }
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(
+      '[data-testid="CueBoxContainer"]'
+    ).parentElement;
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container.querySelector(
+          '[data-testid="CueBoxContainer"]'
+        )?.innerText;
+        updateCaptionsFunction(text);
+      };
+
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/hotstar.js b/browser/extensions/pictureinpicture/video-wrappers/hotstar.js
new file mode 100644
index 0000000000..d64c0dabb2
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/hotstar.js
@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".subtitle-container");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let textNodeList = container
+          .querySelector(".shaka-text-container")
+          ?.querySelectorAll("span");
+        if (!textNodeList) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(
+          Array.from(textNodeList, x => x.textContent).join("\n")
+        );
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/hulu.js b/browser/extensions/pictureinpicture/video-wrappers/hulu.js
new file mode 100644
index 0000000000..fdaf6d7c18
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/hulu.js
@@ -0,0 +1,71 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  constructor(video) {
+    this.player = video.wrappedJSObject.__HuluDashPlayer__;
+  }
+  play() {
+    this.player.play();
+  }
+  pause() {
+    this.player.pause();
+  }
+  isMuted(video) {
+    return video.volume === 0;
+  }
+  setMuted(video, shouldMute) {
+    let muteButton = document.querySelector(".VolumeControl > div");
+
+    if (this.isMuted(video) !== shouldMute) {
+      muteButton.click();
+    }
+  }
+  setCurrentTime(video, position) {
+    this.player.currentTime = position;
+  }
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".ClosedCaption");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        // This will get the subtitles for both live and regular playback videos
+        // and combine them to display. liveVideoText should be an empty string
+        // when the video is regular playback and vice versa. If both
+        // liveVideoText and regularVideoText are non empty strings, which
+        // doesn't seem to be the case, they will both show.
+        let liveVideoText = Array.from(
+          container.querySelectorAll(
+            "#inband-closed-caption > div > div > div"
+          ),
+          x => x.textContent.trim()
+        )
+          .filter(String)
+          .join("\n");
+        let regularVideoText = container.querySelector(".CaptionBox").innerText;
+
+        updateCaptionsFunction(liveVideoText + regularVideoText);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+  getDuration(video) {
+    return this.player.duration;
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/mock-wrapper.js b/browser/extensions/pictureinpicture/video-wrappers/mock-wrapper.js
new file mode 100644
index 0000000000..b68ce3fa9b
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/mock-wrapper.js
@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  play(video) {
+    let playPauseButton = document.querySelector("#player .play-pause-button");
+    playPauseButton.click();
+  }
+
+  pause(video) {
+    let invalidSelector = "#player .pause-button";
+    let playPauseButton = document.querySelector(invalidSelector);
+    playPauseButton.click();
+  }
+
+  setMuted(video, shouldMute) {
+    let muteButton = document.querySelector("#player .mute-button");
+    if (video.muted !== shouldMute && muteButton) {
+      muteButton.click();
+    } else {
+      video.muted = shouldMute;
+    }
+  }
+
+  shouldHideToggle() {
+    let video = document.getElementById("mock-video-controls");
+    return !!video.classList.contains("mock-preview-video");
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/netflix.js b/browser/extensions/pictureinpicture/video-wrappers/netflix.js
new file mode 100644
index 0000000000..bda91796b6
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/netflix.js
@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  constructor() {
+    let netflixPlayerAPI =
+      window.wrappedJSObject.netflix.appContext.state.playerApp.getAPI()
+        .videoPlayer;
+    let sessionId = null;
+    for (let id of netflixPlayerAPI.getAllPlayerSessionIds()) {
+      if (id.startsWith("watch-")) {
+        sessionId = id;
+        break;
+      }
+    }
+    this.player = netflixPlayerAPI.getVideoPlayerBySessionId(sessionId);
+  }
+  /**
+   * The Netflix player returns the current time in milliseconds so we convert
+   * to seconds before returning.
+   * @param {HTMLVideoElement} video The original video element
+   * @returns {Number} The current time in seconds
+   */
+  getCurrentTime(video) {
+    return this.player.getCurrentTime() / 1000;
+  }
+  /**
+   * The Netflix player returns the duration in milliseconds so we convert to
+   * seconds before returning.
+   * @param {HTMLVideoElement} video The original video element
+   * @returns {Number} The duration in seconds
+   */
+  getDuration(video) {
+    return this.player.getDuration() / 1000;
+  }
+  play() {
+    this.player.play();
+  }
+  pause() {
+    this.player.pause();
+  }
+
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".watch-video");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container.querySelector(".player-timedtext").innerText;
+        updateCaptionsFunction(text);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+
+  /**
+   * Set the current time of the video in milliseconds.
+   * @param {HTMLVideoElement} video The original video element
+   * @param {Number} position The new time in seconds
+   */
+  setCurrentTime(video, position) {
+    this.player.seek(position * 1000);
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/nytimes.js b/browser/extensions/pictureinpicture/video-wrappers/nytimes.js
new file mode 100644
index 0000000000..4f6d8cbe44
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/nytimes.js
@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".react-vhs-player");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container.querySelector(".cueWrap-2P4Ue4VQ")?.innerText;
+        if (!text) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(text);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/piped.js b/browser/extensions/pictureinpicture/video-wrappers/piped.js
new file mode 100644
index 0000000000..1cc1c32eb2
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/piped.js
@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".player-container");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let textNodeList = container
+          .querySelector(".shaka-text-wrapper")
+          ?.querySelectorAll('span[style="background-color: black;"]');
+        if (!textNodeList) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(
+          Array.from(textNodeList, x => x.textContent).join("\n")
+        );
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/primeVideo.js b/browser/extensions/pictureinpicture/video-wrappers/primeVideo.js
new file mode 100644
index 0000000000..1425846598
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/primeVideo.js
@@ -0,0 +1,101 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  /**
+   * Playing the video when the readyState is HAVE_METADATA (1) can cause play
+   * to fail but it will load the video and trying to play again allows enough
+   * time for the second play to successfully play the video.
+   * @param {HTMLVideoElement} video
+   *  The original video element
+   */
+  play(video) {
+    video.play().catch(() => {
+      video.play();
+    });
+  }
+  /**
+   * Seeking large amounts of time can cause the video readyState to
+   * HAVE_METADATA (1) and it will throw an error when trying to play the video.
+   * To combat this, after seeking we check if the readyState changed and if so,
+   * we will play to video to "load" the video at the new time and then play or
+   * pause the video depending on if the video was playing before we seeked.
+   * @param {HTMLVideoElement} video
+   *  The original video element
+   * @param {Number} position
+   *  The new time to set the video to
+   * @param {Boolean} wasPlaying
+   *  True if the video was playing before seeking else false
+   */
+  setCurrentTime(video, position, wasPlaying) {
+    if (wasPlaying === undefined) {
+      this.wasPlaying = !video.paused;
+    }
+    video.currentTime = position;
+    if (video.readyState < video.HAVE_CURRENT_DATA) {
+      video
+        .play()
+        .then(() => {
+          if (!wasPlaying) {
+            video.pause();
+          }
+        })
+        .catch(() => {
+          if (wasPlaying) {
+            this.play(video);
+          }
+        });
+    }
+  }
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document?.querySelector("#dv-web-player");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        // eslint-disable-next-line no-unused-vars
+        for (const mutation of mutationsList) {
+          let text;
+          // windows, mac
+          if (container?.querySelector(".atvwebplayersdk-player-container")) {
+            text = container
+              ?.querySelector(".f35bt6a")
+              ?.querySelector(".atvwebplayersdk-captions-text")?.innerText;
+          } else {
+            // linux
+            text = container
+              ?.querySelector(".persistentPanel")
+              ?.querySelector("span")?.innerText;
+          }
+
+          if (!text) {
+            updateCaptionsFunction("");
+            return;
+          }
+
+          updateCaptionsFunction(text);
+        }
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+
+  shouldHideToggle(video) {
+    return !!video.classList.contains("tst-video-overlay-player-html5");
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/radiocanada.js b/browser/extensions/pictureinpicture/video-wrappers/radiocanada.js
new file mode 100644
index 0000000000..1a55377493
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/radiocanada.js
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  play(video) {
+    let playPauseButton = document.querySelector(
+      ".rcplayer-btn.rcplayer-smallPlayPauseBtn"
+    );
+    if (video.paused) {
+      playPauseButton.click();
+    }
+  }
+
+  pause(video) {
+    let playPauseButton = document.querySelector(
+      ".rcplayer-btn.rcplayer-smallPlayPauseBtn"
+    );
+    if (!video.paused) {
+      playPauseButton.click();
+    }
+  }
+
+  setMuted(video, shouldMute) {
+    let muteButton = document.querySelector(
+      ".rcplayer-bouton-with-panel--volume > button"
+    );
+    if (video.muted !== shouldMute && muteButton) {
+      muteButton.click();
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/sonyliv.js b/browser/extensions/pictureinpicture/video-wrappers/sonyliv.js
new file mode 100644
index 0000000000..b703aaec2c
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/sonyliv.js
@@ -0,0 +1,39 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".player-ui-main-wrapper");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container.querySelector(
+          `.text-track-wrapper:not([style*="display: none"])`
+        )?.innerText;
+        if (!text) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(text);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/tubi.js b/browser/extensions/pictureinpicture/video-wrappers/tubi.js
new file mode 100644
index 0000000000..291dbfddeb
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/tubi.js
@@ -0,0 +1,35 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(`[data-id="hls"]`);
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container?.querySelector(
+          `[data-id="captionsComponent"]:not([style="display: none;"])`
+        )?.innerText;
+
+        updateCaptionsFunction(text);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/tubilive.js b/browser/extensions/pictureinpicture/video-wrappers/tubilive.js
new file mode 100644
index 0000000000..0de748e717
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/tubilive.js
@@ -0,0 +1,35 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = video.parentElement;
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text =
+          container.querySelector(`.tubi-text-track-container`)?.innerText ||
+          container.querySelector(`.subtitleWindow`)?.innerText;
+
+        updateCaptionsFunction(text);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/twitch.js b/browser/extensions/pictureinpicture/video-wrappers/twitch.js
new file mode 100644
index 0000000000..1dd7567c24
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/twitch.js
@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  isLive(video) {
+    return !document.querySelector(".seekbar-bar");
+  }
+  getDuration(video) {
+    if (this.isLive(video)) {
+      return Infinity;
+    }
+    return video.duration;
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/udemy.js b/browser/extensions/pictureinpicture/video-wrappers/udemy.js
new file mode 100644
index 0000000000..302a8d1eaf
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/udemy.js
@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(
+      ".video-player--video-player--1sfof"
+    );
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container.querySelector(
+          ".captions-display--captions-container--1-aQJ"
+        )?.innerText;
+        if (!text) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(text);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/videojsWrapper.js b/browser/extensions/pictureinpicture/video-wrappers/videojsWrapper.js
new file mode 100644
index 0000000000..ca3145af4a
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/videojsWrapper.js
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// This wrapper supports multiple sites that use video.js player
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".vjs-text-track-display");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container.querySelector("div").innerText;
+        if (!text) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(text);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/voot.js b/browser/extensions/pictureinpicture/video-wrappers/voot.js
new file mode 100644
index 0000000000..57d903a2e8
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/voot.js
@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".playkit-container");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container.querySelector(".playkit-subtitles").innerText;
+        if (!text) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(text);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/washingtonpost.js b/browser/extensions/pictureinpicture/video-wrappers/washingtonpost.js
new file mode 100644
index 0000000000..6d0e57c96a
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/washingtonpost.js
@@ -0,0 +1,42 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".powa");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let subtitleElement = container.querySelector(".powa-sub-torpedo");
+        if (!subtitleElement?.innerText) {
+          updateCaptionsFunction("");
+          return;
+        }
+        let subtitleElementClone = subtitleElement.cloneNode(true);
+        let breaks = subtitleElementClone.getElementsByTagName("br");
+        for (const element of breaks) {
+          element.replaceWith("\n");
+        }
+        let text = subtitleElementClone.innerText;
+
+        updateCaptionsFunction(text);
+      };
+
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/yahoo.js b/browser/extensions/pictureinpicture/video-wrappers/yahoo.js
new file mode 100644
index 0000000000..b7d8d3160f
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/yahoo.js
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.querySelector(".vp-main");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        let text = container.querySelector(".vp-cc-element.vp-show")?.innerText;
+
+        if (!text) {
+          updateCaptionsFunction("");
+          return;
+        }
+
+        updateCaptionsFunction(text);
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
diff --git a/browser/extensions/pictureinpicture/video-wrappers/youtube.js b/browser/extensions/pictureinpicture/video-wrappers/youtube.js
new file mode 100644
index 0000000000..b017328982
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/youtube.js
@@ -0,0 +1,65 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+class PictureInPictureVideoWrapper {
+  isLive(video) {
+    return !!document.querySelector(".ytp-live");
+  }
+  setMuted(video, shouldMute) {
+    let muteButton = document.querySelector("#player .ytp-mute-button");
+
+    if (video.muted !== shouldMute && muteButton) {
+      muteButton.click();
+    } else {
+      video.muted = shouldMute;
+    }
+  }
+  getDuration(video) {
+    if (this.isLive(video)) {
+      return Infinity;
+    }
+    return video.duration;
+  }
+  setCaptionContainerObserver(video, updateCaptionsFunction) {
+    let container = document.getElementById("ytp-caption-window-container");
+
+    if (container) {
+      updateCaptionsFunction("");
+      const callback = function (mutationsList, observer) {
+        // eslint-disable-next-line no-unused-vars
+        for (const mutation of mutationsList) {
+          let textNodeList = container
+            .querySelector(".captions-text")
+            ?.querySelectorAll(".caption-visual-line");
+          if (!textNodeList) {
+            updateCaptionsFunction("");
+            return;
+          }
+
+          updateCaptionsFunction(
+            Array.from(textNodeList, x => x.textContent).join("\n")
+          );
+        }
+      };
+
+      // immediately invoke the callback function to add subtitles to the PiP window
+      callback([1], null);
+
+      let captionsObserver = new MutationObserver(callback);
+
+      captionsObserver.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+  shouldHideToggle(video) {
+    return !!video.closest(".ytd-video-preview");
+  }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;