summaryrefslogtreecommitdiffstats
path: root/browser/extensions/pictureinpicture
diff options
context:
space:
mode:
Diffstat (limited to 'browser/extensions/pictureinpicture')
-rw-r--r--browser/extensions/pictureinpicture/data/picture_in_picture_overrides.js316
-rw-r--r--browser/extensions/pictureinpicture/experiment-apis/aboutConfigPipPrefs.js68
-rw-r--r--browser/extensions/pictureinpicture/experiment-apis/aboutConfigPipPrefs.json59
-rw-r--r--browser/extensions/pictureinpicture/experiment-apis/pictureInPicture.js86
-rw-r--r--browser/extensions/pictureinpicture/experiment-apis/pictureInPicture.json51
-rw-r--r--browser/extensions/pictureinpicture/lib/picture_in_picture_overrides.js100
-rw-r--r--browser/extensions/pictureinpicture/manifest.json48
-rw-r--r--browser/extensions/pictureinpicture/moz.build62
-rw-r--r--browser/extensions/pictureinpicture/run.js9
-rw-r--r--browser/extensions/pictureinpicture/tests/browser/.eslintrc.js14
-rw-r--r--browser/extensions/pictureinpicture/tests/browser/browser.toml21
-rw-r--r--browser/extensions/pictureinpicture/tests/browser/browser_mock_wrapper.js205
-rw-r--r--browser/extensions/pictureinpicture/tests/browser/test-mock-wrapper.html22
-rw-r--r--browser/extensions/pictureinpicture/tests/browser/test-mock-wrapper.js31
-rw-r--r--browser/extensions/pictureinpicture/tests/browser/test-toggle-visibility.html22
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/airmozilla.js63
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/arte.js35
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/bbc.js31
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/cbc.js30
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/dailymotion.js42
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/disneyplus.js70
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/edx.js33
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/hbomax.js48
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/hotstar.js39
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/hulu.js71
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/mock-wrapper.js34
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/netflix.js94
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/nytimes.js37
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/piped.js41
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/primeVideo.js103
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/radiocanada.js36
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/sonyliv.js39
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/tubi.js35
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/tubilive.js35
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/twitch.js19
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/udemy.js66
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/videojsWrapper.js38
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/voot.js37
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/washingtonpost.js42
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/yahoo.js38
-rw-r--r--browser/extensions/pictureinpicture/video-wrappers/youtube.js89
41 files changed, 2359 insertions, 0 deletions
diff --git a/browser/extensions/pictureinpicture/data/picture_in_picture_overrides.js b/browser/extensions/pictureinpicture/data/picture_in_picture_overrides.js
new file mode 100644
index 0000000000..ecc4945135
--- /dev/null
+++ b/browser/extensions/pictureinpicture/data/picture_in_picture_overrides.js
@@ -0,0 +1,316 @@
+/* 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";
+
+/* globals browser */
+
+let AVAILABLE_PIP_OVERRIDES;
+
+{
+ // See PictureInPictureControls.sys.mjs for these values.
+ // eslint-disable-next-line no-unused-vars
+ const TOGGLE_POLICIES = browser.pictureInPictureChild.getPolicies();
+ const KEYBOARD_CONTROLS = browser.pictureInPictureChild.getKeyboardControls();
+
+ AVAILABLE_PIP_OVERRIDES = {
+ // The keys of this object are match patterns for URLs, as documented in
+ // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns
+ //
+ // Example:
+ // const KEYBOARD_CONTROLS = browser.pictureInPictureChild.getKeyboardControls();
+ //
+ //
+ // "https://*.youtube.com/*": {
+ // policy: TOGGLE_POLICIES.THREE_QUARTERS,
+ // disabledKeyboardControls: KEYBOARD_CONTROLS.PLAY_PAUSE | KEYBOARD_CONTROLS.VOLUME,
+ // },
+ // "https://*.twitch.tv/mikeconley_dot_ca/*": {
+ // policy: TOGGLE_POLICIES.TOP,
+ // disabledKeyboardControls: KEYBOARD_CONTROLS.ALL,
+ // },
+
+ tests: {
+ // FOR TESTS ONLY!
+ "https://mochitest.youtube.com/*browser/browser/extensions/pictureinpicture/tests/browser/test-mock-wrapper.html":
+ {
+ videoWrapperScriptPath: "video-wrappers/mock-wrapper.js",
+ },
+ "https://mochitest.youtube.com/*browser/browser/extensions/pictureinpicture/tests/browser/test-toggle-visibility.html":
+ {
+ videoWrapperScriptPath: "video-wrappers/mock-wrapper.js",
+ },
+ },
+
+ abcnews: {
+ "https://*.abcnews.go.com/*": {
+ videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+ },
+ },
+
+ airmozilla: {
+ "https://*.mozilla.hosted.panopto.com/*": {
+ videoWrapperScriptPath: "video-wrappers/airmozilla.js",
+ },
+ },
+
+ aol: {
+ "https://*.aol.com/*": {
+ videoWrapperScriptPath: "video-wrappers/yahoo.js",
+ },
+ },
+
+ arte: {
+ "https://*.arte.tv/*": {
+ videoWrapperScriptPath: "video-wrappers/arte.js",
+ },
+ },
+
+ bbc: {
+ "https://*.bbc.com/*": {
+ videoWrapperScriptPath: "video-wrappers/bbc.js",
+ },
+ "https://*.bbc.co.uk/*": {
+ videoWrapperScriptPath: "video-wrappers/bbc.js",
+ },
+ },
+
+ brightcove: {
+ "https://*.brightcove.com/*": {
+ videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+ },
+ },
+ cbc: {
+ "https://*.cbc.ca/*": {
+ videoWrapperScriptPath: "video-wrappers/cbc.js",
+ },
+ },
+
+ dailymotion: {
+ "https://*.dailymotion.com/*": {
+ videoWrapperScriptPath: "video-wrappers/dailymotion.js",
+ },
+ },
+
+ disneyplus: {
+ "https://*.disneyplus.com/*": {
+ videoWrapperScriptPath: "video-wrappers/disneyplus.js",
+ },
+ },
+
+ edx: {
+ "https://*.edx.org/*": {
+ videoWrapperScriptPath: "video-wrappers/edx.js",
+ },
+ },
+
+ frontendMasters: {
+ "https://*.frontendmasters.com/*": {
+ videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+ },
+ },
+
+ funimation: {
+ "https://*.funimation.com/*": {
+ videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+ },
+ },
+
+ hbomax: {
+ "https://play.hbomax.com/page/*": { policy: TOGGLE_POLICIES.HIDDEN },
+ "https://play.hbomax.com/player/*": {
+ videoWrapperScriptPath: "video-wrappers/hbomax.js",
+ },
+ },
+
+ hotstar: {
+ "https://*.hotstar.com/*": {
+ videoWrapperScriptPath: "video-wrappers/hotstar.js",
+ },
+ },
+
+ hulu: {
+ "https://www.hulu.com/watch/*": {
+ videoWrapperScriptPath: "video-wrappers/hulu.js",
+ },
+ },
+
+ instagram: {
+ "https://www.instagram.com/*": { policy: TOGGLE_POLICIES.ONE_QUARTER },
+ },
+
+ laracasts: {
+ "https://*.laracasts.com/*": { policy: TOGGLE_POLICIES.ONE_QUARTER },
+ },
+
+ msn: {
+ "https://*.msn.com/*": {
+ visibilityThreshold: 0.7,
+ },
+ },
+ mxplayer: {
+ "https://*.mxplayer.in/*": {
+ videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+ },
+ },
+
+ nebula: {
+ "https://*.nebula.app/*": {
+ videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+ },
+ },
+
+ netflix: {
+ "https://*.netflix.com/*": {
+ videoWrapperScriptPath: "video-wrappers/netflix.js",
+ },
+ "https://*.netflix.com/browse*": { policy: TOGGLE_POLICIES.HIDDEN },
+ "https://*.netflix.com/latest*": { policy: TOGGLE_POLICIES.HIDDEN },
+ "https://*.netflix.com/Kids*": { policy: TOGGLE_POLICIES.HIDDEN },
+ "https://*.netflix.com/title*": { policy: TOGGLE_POLICIES.HIDDEN },
+ "https://*.netflix.com/notification*": { policy: TOGGLE_POLICIES.HIDDEN },
+ "https://*.netflix.com/search*": { policy: TOGGLE_POLICIES.HIDDEN },
+ },
+
+ nytimes: {
+ "https://*.nytimes.com/*": {
+ videoWrapperScriptPath: "video-wrappers/nytimes.js",
+ },
+ },
+
+ pbs: {
+ "https://*.pbs.org/*": {
+ videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+ },
+ "https://*.pbskids.org/*": {
+ videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+ },
+ },
+
+ piped: {
+ "https://*.piped.kavin.rocks/*": {
+ videoWrapperScriptPath: "video-wrappers/piped.js",
+ },
+ "https://*.piped.silkky.cloud/*": {
+ videoWrapperScriptPath: "video-wrappers/piped.js",
+ },
+ },
+
+ radiocanada: {
+ "https://*.ici.radio-canada.ca/*": {
+ videoWrapperScriptPath: "video-wrappers/radiocanada.js",
+ },
+ },
+
+ reddit: {
+ "https://*.reddit.com/*": { policy: TOGGLE_POLICIES.ONE_QUARTER },
+ },
+
+ sonyliv: {
+ "https://*.sonyliv.com/*": {
+ videoWrapperScriptPath: "video-wrappers/sonyliv.js",
+ },
+ },
+
+ ted: {
+ "https://*.ted.com/*": {
+ showHiddenTextTracks: true,
+ },
+ },
+
+ tubi: {
+ "https://*.tubitv.com/live*": {
+ videoWrapperScriptPath: "video-wrappers/tubilive.js",
+ },
+ "https://*.tubitv.com/movies*": {
+ videoWrapperScriptPath: "video-wrappers/tubi.js",
+ },
+ "https://*.tubitv.com/tv-shows*": {
+ videoWrapperScriptPath: "video-wrappers/tubi.js",
+ },
+ },
+
+ twitch: {
+ "https://*.twitch.tv/*": {
+ videoWrapperScriptPath: "video-wrappers/twitch.js",
+ policy: TOGGLE_POLICIES.ONE_QUARTER,
+ disabledKeyboardControls: KEYBOARD_CONTROLS.LIVE_SEEK,
+ },
+ "https://*.twitch.tech/*": {
+ videoWrapperScriptPath: "video-wrappers/twitch.js",
+ policy: TOGGLE_POLICIES.ONE_QUARTER,
+ disabledKeyboardControls: KEYBOARD_CONTROLS.LIVE_SEEK,
+ },
+ "https://*.twitch.a2z.com/*": {
+ videoWrapperScriptPath: "video-wrappers/twitch.js",
+ policy: TOGGLE_POLICIES.ONE_QUARTER,
+ disabledKeyboardControls: KEYBOARD_CONTROLS.LIVE_SEEK,
+ },
+ },
+
+ udemy: {
+ "https://*.udemy.com/*": {
+ videoWrapperScriptPath: "video-wrappers/udemy.js",
+ policy: TOGGLE_POLICIES.ONE_QUARTER,
+ },
+ },
+
+ viki: {
+ "https://*.viki.com/*": {
+ videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+ },
+ },
+
+ voot: {
+ "https://*.voot.com/*": {
+ videoWrapperScriptPath: "video-wrappers/voot.js",
+ },
+ },
+
+ wired: {
+ "https://*.wired.com/*": {
+ videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+ },
+ },
+
+ yahoofinance: {
+ "https://*.finance.yahoo.com/*": {
+ videoWrapperScriptPath: "video-wrappers/yahoo.js",
+ },
+ },
+
+ youtube: {
+ /**
+ * The threshold of 0.7 is so that users can click on the "Skip Ads"
+ * button on the YouTube site player without accidentally triggering
+ * PiP.
+ */
+ "https://*.youtube.com/*": {
+ visibilityThreshold: 0.7,
+ videoWrapperScriptPath: "video-wrappers/youtube.js",
+ },
+ "https://*.youtube-nocookie.com/*": {
+ visibilityThreshold: 0.9,
+ videoWrapperScriptPath: "video-wrappers/youtube.js",
+ },
+ },
+
+ washingtonpost: {
+ "https://*.washingtonpost.com/*": {
+ videoWrapperScriptPath: "video-wrappers/washingtonpost.js",
+ },
+ },
+
+ primeVideo: {
+ "https://*.primevideo.com/*": {
+ visibilityThreshold: 0.9,
+ videoWrapperScriptPath: "video-wrappers/primeVideo.js",
+ },
+ "https://*.amazon.com/*": {
+ visibilityThreshold: 0.9,
+ videoWrapperScriptPath: "video-wrappers/primeVideo.js",
+ },
+ },
+ };
+}
diff --git a/browser/extensions/pictureinpicture/experiment-apis/aboutConfigPipPrefs.js b/browser/extensions/pictureinpicture/experiment-apis/aboutConfigPipPrefs.js
new file mode 100644
index 0000000000..4660affd8f
--- /dev/null
+++ b/browser/extensions/pictureinpicture/experiment-apis/aboutConfigPipPrefs.js
@@ -0,0 +1,68 @@
+/* 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";
+
+/* global ExtensionAPI, ExtensionCommon, Services, XPCOMUtils */
+
+/**
+ * Class extending the ExtensionAPI, ensures we can set/get preferences
+ */
+this.aboutConfigPipPrefs = class extends ExtensionAPI {
+ /**
+ * Override ExtensionAPI with PiP override's specific preference API, prefixed by `disabled_picture_in_picture_overrides`
+ *
+ * @param {ExtensionContext} context the context of an extension
+ * @returns {object} returns the necessary API structure required to manage prefs within this extension
+ */
+ getAPI(context) {
+ const EventManager = ExtensionCommon.EventManager;
+ const extensionIDBase = context.extension.id.split("@")[0];
+ const extensionPrefNameBase = `extensions.${extensionIDBase}.`;
+
+ return {
+ aboutConfigPipPrefs: {
+ onPrefChange: new EventManager({
+ context,
+ name: "aboutConfigPipPrefs.onSiteOverridesPrefChange",
+ register: (fire, name) => {
+ const prefName = `${extensionPrefNameBase}${name}`;
+ const callback = () => {
+ fire.async(name).catch(() => {}); // ignore Message Manager disconnects
+ };
+ Services.prefs.addObserver(prefName, callback);
+ return () => {
+ Services.prefs.removeObserver(prefName, callback);
+ };
+ },
+ }).api(),
+ /**
+ * Calls `Services.prefs.getBoolPref` to get a preference
+ *
+ * @param {string} name The name of the preference to get; will be prefixed with this extension's branch
+ * @returns {boolean|undefined} the preference, or undefined
+ */
+ async getPref(name) {
+ try {
+ return Services.prefs.getBoolPref(
+ `${extensionPrefNameBase}${name}`
+ );
+ } catch (_) {
+ return undefined;
+ }
+ },
+
+ /**
+ * Calls `Services.prefs.setBoolPref` to set a preference
+ *
+ * @param {string} name the name of the preference to set; will be prefixed with this extension's branch
+ * @param {boolean} value the bool value to save in the pref
+ */
+ async setPref(name, value) {
+ Services.prefs.setBoolPref(`${extensionPrefNameBase}${name}`, value);
+ },
+ },
+ };
+ }
+};
diff --git a/browser/extensions/pictureinpicture/experiment-apis/aboutConfigPipPrefs.json b/browser/extensions/pictureinpicture/experiment-apis/aboutConfigPipPrefs.json
new file mode 100644
index 0000000000..8b2b352667
--- /dev/null
+++ b/browser/extensions/pictureinpicture/experiment-apis/aboutConfigPipPrefs.json
@@ -0,0 +1,59 @@
+[
+ {
+ "namespace": "aboutConfigPipPrefs",
+ "description": "experimental API extension to allow access to about:config preferences",
+ "events": [
+ {
+ "name": "onPrefChange",
+ "type": "function",
+ "parameters": [
+ {
+ "name": "name",
+ "type": "string",
+ "description": "The preference which changed"
+ }
+ ],
+ "extraParameters": [
+ {
+ "name": "name",
+ "type": "string",
+ "description": "The preference to monitor"
+ }
+ ]
+ }
+ ],
+ "functions": [
+ {
+ "name": "getPref",
+ "type": "function",
+ "description": "Get a preference's value",
+ "parameters": [
+ {
+ "name": "name",
+ "type": "string",
+ "description": "The preference name"
+ }
+ ],
+ "async": true
+ },
+ {
+ "name": "setPref",
+ "type": "function",
+ "description": "Set a preference's value",
+ "parameters": [
+ {
+ "name": "name",
+ "type": "string",
+ "description": "The preference name"
+ },
+ {
+ "name": "value",
+ "type": "boolean",
+ "description": "The new value"
+ }
+ ],
+ "async": true
+ }
+ ]
+ }
+]
diff --git a/browser/extensions/pictureinpicture/experiment-apis/pictureInPicture.js b/browser/extensions/pictureinpicture/experiment-apis/pictureInPicture.js
new file mode 100644
index 0000000000..9a2a3e14b8
--- /dev/null
+++ b/browser/extensions/pictureinpicture/experiment-apis/pictureInPicture.js
@@ -0,0 +1,86 @@
+/* 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";
+
+/* global AppConstants, ChromeUtils, ExtensionAPI, Services */
+
+ChromeUtils.defineESModuleGetters(this, {
+ KEYBOARD_CONTROLS: "resource://gre/modules/PictureInPictureControls.sys.mjs",
+ TOGGLE_POLICIES: "resource://gre/modules/PictureInPictureControls.sys.mjs",
+});
+
+const TOGGLE_ENABLED_PREF =
+ "media.videocontrols.picture-in-picture.video-toggle.enabled";
+
+/**
+ * This API is expected to be running in the parent process.
+ */
+this.pictureInPictureParent = class extends ExtensionAPI {
+ /**
+ * Override ExtensionAPI with PiP override's specific API
+ * Relays the site overrides to this extension's child process
+ *
+ * @param {ExtensionContext} context the context of our extension
+ * @returns {object} returns the necessary API structure required to manage sharedData in PictureInPictureParent
+ */
+ getAPI(context) {
+ return {
+ pictureInPictureParent: {
+ setOverrides(overrides) {
+ // The Picture-in-Picture toggle is only implemented for Desktop, so make
+ // this a no-op for non-Desktop builds.
+ if (AppConstants.platform == "android") {
+ return;
+ }
+
+ Services.ppmm.sharedData.set(
+ "PictureInPicture:SiteOverrides",
+ overrides
+ );
+ },
+ },
+ };
+ }
+};
+
+/**
+ * This API is expected to be running in a content process - specifically,
+ * the WebExtension content process that the background scripts run in. We
+ * split these out so that they can return values synchronously to the
+ * background scripts.
+ */
+this.pictureInPictureChild = class extends ExtensionAPI {
+ /**
+ * Override ExtensionAPI with PiP override's specific API
+ * Clone constants into the Picture-in-Picture child process
+ *
+ * @param {ExtensionContext} context the context of our extension
+ * @returns {object} returns the necessary API structure required to get data from PictureInPictureChild
+ */
+ getAPI(context) {
+ return {
+ pictureInPictureChild: {
+ getKeyboardControls() {
+ // The Picture-in-Picture toggle is only implemented for Desktop, so make
+ // this return nothing for non-Desktop builds.
+ if (AppConstants.platform == "android") {
+ return Cu.cloneInto({}, context.cloneScope);
+ }
+
+ return Cu.cloneInto(KEYBOARD_CONTROLS, context.cloneScope);
+ },
+ getPolicies() {
+ // The Picture-in-Picture toggle is only implemented for Desktop, so make
+ // this return nothing for non-Desktop builds.
+ if (AppConstants.platform == "android") {
+ return Cu.cloneInto({}, context.cloneScope);
+ }
+
+ return Cu.cloneInto(TOGGLE_POLICIES, context.cloneScope);
+ },
+ },
+ };
+ }
+};
diff --git a/browser/extensions/pictureinpicture/experiment-apis/pictureInPicture.json b/browser/extensions/pictureinpicture/experiment-apis/pictureInPicture.json
new file mode 100644
index 0000000000..5f34616b6e
--- /dev/null
+++ b/browser/extensions/pictureinpicture/experiment-apis/pictureInPicture.json
@@ -0,0 +1,51 @@
+[
+ {
+ "namespace": "pictureInPictureParent",
+ "description": "Parent process methods for controlling the Picture-in-Picture feature.",
+ "functions": [
+ {
+ "name": "setOverrides",
+ "type": "function",
+ "description": "Set Picture-in-Picture toggle position overrides",
+ "parameters": [
+ {
+ "name": "overrides",
+ "type": "object",
+ "additionalProperties": { "type": "any" },
+ "description": "The Picture-in-Picture toggle position overrides to set"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "namespace": "pictureInPictureChild",
+ "description": "WebExtension process methods for querying the Picture-in-Picture feature.",
+ "functions": [
+ {
+ "name": "getKeyboardControls",
+ "type": "function",
+ "description": "Get the Picture-in-Picture keyboard control override constants",
+ "parameters": [],
+ "returns": {
+ "type": "object",
+ "properties": {},
+ "additionalProperties": { "type": "any" },
+ "description": "The Picture-in-Picture keyboard control override constants"
+ }
+ },
+ {
+ "name": "getPolicies",
+ "type": "function",
+ "description": "Get the Picture-in-Picture toggle position override constants",
+ "parameters": [],
+ "returns": {
+ "type": "object",
+ "properties": {},
+ "additionalProperties": { "type": "any" },
+ "description": "The Picture-in-Picture toggle position override constants"
+ }
+ }
+ ]
+ }
+]
diff --git a/browser/extensions/pictureinpicture/lib/picture_in_picture_overrides.js b/browser/extensions/pictureinpicture/lib/picture_in_picture_overrides.js
new file mode 100644
index 0000000000..9328ce240b
--- /dev/null
+++ b/browser/extensions/pictureinpicture/lib/picture_in_picture_overrides.js
@@ -0,0 +1,100 @@
+/* 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";
+
+/* globals browser, module */
+
+/**
+ * Picture-in-Picture Overrides
+ */
+class PictureInPictureOverrides {
+ /**
+ * Class constructor
+ *
+ * @param {object} availableOverrides Contains all overrides provided in data/picture_in_picture_overrides.js
+ */
+ constructor(availableOverrides) {
+ this.pref = "enable_picture_in_picture_overrides";
+ this._prefEnabledOverrides = new Set();
+ this._availableOverrides = availableOverrides;
+ this.policies = browser.pictureInPictureChild.getPolicies();
+ }
+
+ /**
+ * Ensures the "enable_picture_in_picture_overrides" pref is set; if it is undefined, sets the pref to true
+ */
+ async _checkGlobalPref() {
+ await browser.aboutConfigPipPrefs.getPref(this.pref).then(value => {
+ if (value === false) {
+ this._enabled = false;
+ } else {
+ if (value === undefined) {
+ browser.aboutConfigPipPrefs.setPref(this.pref, true);
+ }
+ this._enabled = true;
+ }
+ });
+ }
+
+ /**
+ * Checks the status of a specified override, and updates the set, `this._prefEnabledOverrides`, accordingly
+ *
+ * @param {string} id the id of the specific override contained in `this._availableOverrides`
+ * @param {string} pref the specific preference to check, in the form `disabled_picture_in_picture_overrides.${id}`
+ */
+ async _checkSpecificOverridePref(id, pref) {
+ const isDisabled = await browser.aboutConfigPipPrefs.getPref(pref);
+ if (isDisabled === true) {
+ this._prefEnabledOverrides.delete(id);
+ } else {
+ this._prefEnabledOverrides.add(id);
+ }
+ }
+
+ /**
+ * The function that `run.js` calls to begin checking for changes to the PiP overrides
+ */
+ bootup() {
+ const checkGlobal = async () => {
+ await this._checkGlobalPref();
+ this._onAvailableOverridesChanged();
+ };
+ browser.aboutConfigPipPrefs.onPrefChange.addListener(
+ checkGlobal,
+ this.pref
+ );
+
+ const bootupPrefCheckPromises = [this._checkGlobalPref()];
+
+ for (const id of Object.keys(this._availableOverrides)) {
+ const pref = `disabled_picture_in_picture_overrides.${id}`;
+ const checkSingle = async () => {
+ await this._checkSpecificOverridePref(id, pref);
+ this._onAvailableOverridesChanged();
+ };
+ browser.aboutConfigPipPrefs.onPrefChange.addListener(checkSingle, pref);
+ bootupPrefCheckPromises.push(this._checkSpecificOverridePref(id, pref));
+ }
+
+ Promise.all(bootupPrefCheckPromises).then(() => {
+ this._onAvailableOverridesChanged();
+ });
+ }
+
+ /**
+ * Sets pictureInPictureParent's overrides
+ */
+ async _onAvailableOverridesChanged() {
+ const policies = await this.policies;
+ let enabledOverrides = {};
+ for (const [id, override] of Object.entries(this._availableOverrides)) {
+ const enabled = this._enabled && this._prefEnabledOverrides.has(id);
+ for (const [url, policy] of Object.entries(override)) {
+ enabledOverrides[url] = enabled ? policy : policies.DEFAULT;
+ }
+ }
+ browser.pictureInPictureParent.setOverrides(enabledOverrides);
+ }
+}
diff --git a/browser/extensions/pictureinpicture/manifest.json b/browser/extensions/pictureinpicture/manifest.json
new file mode 100644
index 0000000000..c193c446be
--- /dev/null
+++ b/browser/extensions/pictureinpicture/manifest.json
@@ -0,0 +1,48 @@
+{
+ "manifest_version": 2,
+ "name": "Picture-In-Picture",
+ "description": "Fixes for web compatibility with Picture-in-Picture",
+ "version": "1.0.0",
+
+ "browser_specific_settings": {
+ "gecko": {
+ "id": "pictureinpicture@mozilla.org",
+ "strict_min_version": "88.0a1"
+ }
+ },
+
+ "experiment_apis": {
+ "aboutConfigPipPrefs": {
+ "schema": "experiment-apis/aboutConfigPipPrefs.json",
+ "parent": {
+ "scopes": ["addon_parent"],
+ "script": "experiment-apis/aboutConfigPipPrefs.js",
+ "paths": [["aboutConfigPipPrefs"]]
+ }
+ },
+ "pictureInPictureChild": {
+ "schema": "experiment-apis/pictureInPicture.json",
+ "child": {
+ "scopes": ["addon_child"],
+ "script": "experiment-apis/pictureInPicture.js",
+ "paths": [["pictureInPictureChild"]]
+ }
+ },
+ "pictureInPictureParent": {
+ "schema": "experiment-apis/pictureInPicture.json",
+ "parent": {
+ "scopes": ["addon_parent"],
+ "script": "experiment-apis/pictureInPicture.js",
+ "paths": [["pictureInPictureParent"]]
+ }
+ }
+ },
+
+ "background": {
+ "scripts": [
+ "data/picture_in_picture_overrides.js",
+ "lib/picture_in_picture_overrides.js",
+ "run.js"
+ ]
+ }
+}
diff --git a/browser/extensions/pictureinpicture/moz.build b/browser/extensions/pictureinpicture/moz.build
new file mode 100644
index 0000000000..7cc77f9594
--- /dev/null
+++ b/browser/extensions/pictureinpicture/moz.build
@@ -0,0 +1,62 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DEFINES["MOZ_APP_VERSION"] = CONFIG["MOZ_APP_VERSION"]
+DEFINES["MOZ_APP_MAXVERSION"] = CONFIG["MOZ_APP_MAXVERSION"]
+
+FINAL_TARGET_FILES.features["pictureinpicture@mozilla.org"] += [
+ "manifest.json",
+ "run.js",
+]
+
+FINAL_TARGET_FILES.features["pictureinpicture@mozilla.org"]["data"] += [
+ "data/picture_in_picture_overrides.js",
+]
+
+FINAL_TARGET_FILES.features["pictureinpicture@mozilla.org"]["experiment-apis"] += [
+ "experiment-apis/aboutConfigPipPrefs.js",
+ "experiment-apis/aboutConfigPipPrefs.json",
+ "experiment-apis/pictureInPicture.js",
+ "experiment-apis/pictureInPicture.json",
+]
+
+FINAL_TARGET_FILES.features["pictureinpicture@mozilla.org"]["lib"] += [
+ "lib/picture_in_picture_overrides.js",
+]
+
+FINAL_TARGET_FILES.features["pictureinpicture@mozilla.org"]["video-wrappers"] += [
+ "video-wrappers/airmozilla.js",
+ "video-wrappers/arte.js",
+ "video-wrappers/bbc.js",
+ "video-wrappers/cbc.js",
+ "video-wrappers/dailymotion.js",
+ "video-wrappers/disneyplus.js",
+ "video-wrappers/edx.js",
+ "video-wrappers/hbomax.js",
+ "video-wrappers/hotstar.js",
+ "video-wrappers/hulu.js",
+ "video-wrappers/mock-wrapper.js",
+ "video-wrappers/netflix.js",
+ "video-wrappers/nytimes.js",
+ "video-wrappers/piped.js",
+ "video-wrappers/primeVideo.js",
+ "video-wrappers/radiocanada.js",
+ "video-wrappers/sonyliv.js",
+ "video-wrappers/tubi.js",
+ "video-wrappers/tubilive.js",
+ "video-wrappers/twitch.js",
+ "video-wrappers/udemy.js",
+ "video-wrappers/videojsWrapper.js",
+ "video-wrappers/voot.js",
+ "video-wrappers/washingtonpost.js",
+ "video-wrappers/yahoo.js",
+ "video-wrappers/youtube.js",
+]
+
+BROWSER_CHROME_MANIFESTS += ["tests/browser/browser.toml"]
+
+with Files("**"):
+ BUG_COMPONENT = ("Toolkit", "Picture-in-Picture")
diff --git a/browser/extensions/pictureinpicture/run.js b/browser/extensions/pictureinpicture/run.js
new file mode 100644
index 0000000000..cb2982f83f
--- /dev/null
+++ b/browser/extensions/pictureinpicture/run.js
@@ -0,0 +1,9 @@
+/* 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";
+
+/* globals AVAILABLE_PIP_OVERRIDES, PictureInPictureOverrides */
+const pipOverrides = new PictureInPictureOverrides(AVAILABLE_PIP_OVERRIDES);
+pipOverrides.bootup();
diff --git a/browser/extensions/pictureinpicture/tests/browser/.eslintrc.js b/browser/extensions/pictureinpicture/tests/browser/.eslintrc.js
new file mode 100644
index 0000000000..9bf153d21a
--- /dev/null
+++ b/browser/extensions/pictureinpicture/tests/browser/.eslintrc.js
@@ -0,0 +1,14 @@
+/* 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";
+
+module.exports = {
+ globals: {
+ ensureVideosReady: "readonly",
+ triggerPictureInPicture: "readonly",
+ isVideoMuted: "readonly",
+ isVideoPaused: "readonly",
+ },
+};
diff --git a/browser/extensions/pictureinpicture/tests/browser/browser.toml b/browser/extensions/pictureinpicture/tests/browser/browser.toml
new file mode 100644
index 0000000000..94bb7c5cbc
--- /dev/null
+++ b/browser/extensions/pictureinpicture/tests/browser/browser.toml
@@ -0,0 +1,21 @@
+[DEFAULT]
+support-files = [
+ "test-mock-wrapper.html",
+ "test-mock-wrapper.js",
+ "test-toggle-visibility.html",
+ "../../../../../toolkit/components/pictureinpicture/tests/click-event-helper.js",
+ "../../../../../toolkit/components/pictureinpicture/tests/head.js",
+ "../../../../../toolkit/components/pictureinpicture/tests/test-video.mp4",
+]
+
+prefs = [
+ "media.videocontrols.picture-in-picture.enabled=true",
+ "media.videocontrols.picture-in-picture.video-toggle.enabled=true",
+ "media.videocontrols.picture-in-picture.video-toggle.testing=true",
+ "media.videocontrols.picture-in-picture.video-toggle.always-show=true",
+ "media.videocontrols.picture-in-picture.video-toggle.has-used=true",
+ "media.videocontrols.picture-in-picture.video-toggle.position='right'",
+]
+
+["browser_mock_wrapper.js"]
+skip-if = ["!nightly_build"] # Bug 1751793
diff --git a/browser/extensions/pictureinpicture/tests/browser/browser_mock_wrapper.js b/browser/extensions/pictureinpicture/tests/browser/browser_mock_wrapper.js
new file mode 100644
index 0000000000..33a7ecc601
--- /dev/null
+++ b/browser/extensions/pictureinpicture/tests/browser/browser_mock_wrapper.js
@@ -0,0 +1,205 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* import-globals-from ../../../../../toolkit/components/pictureinpicture/tests/head.js */
+
+ChromeUtils.defineESModuleGetters(this, {
+ TOGGLE_POLICIES: "resource://gre/modules/PictureInPictureControls.sys.mjs",
+});
+
+const TEST_URL =
+ getRootDirectory(gTestPath).replace(
+ "chrome://mochitests/content",
+ "https://mochitest.youtube.com:443"
+ ) + "test-mock-wrapper.html";
+const TEST_URL_TOGGLE_VISIBILITY =
+ getRootDirectory(gTestPath).replace(
+ "chrome://mochitests/content",
+ "https://mochitest.youtube.com:443"
+ ) + "test-toggle-visibility.html";
+
+/**
+ * Tests the mock-wrapper.js video wrapper script selects the expected element
+ * responsible for toggling the video player's mute status.
+ */
+add_task(async function test_mock_mute_button() {
+ await BrowserTestUtils.withNewTab(TEST_URL, async browser => {
+ await ensureVideosReady(browser);
+
+ // Open the video in PiP
+ let videoID = "mock-video-controls";
+ let pipWin = await triggerPictureInPicture(browser, videoID);
+ ok(pipWin, "Got Picture-in-Picture window.");
+
+ // Mute audio
+ await toggleMute(browser, pipWin);
+ ok(await isVideoMuted(browser, videoID), "The audio is muted.");
+
+ await SpecialPowers.spawn(browser, [], async function () {
+ let muteButton = content.document.querySelector(".mute-button");
+ ok(
+ muteButton.getAttribute("isMuted"),
+ "muteButton has isMuted attribute."
+ );
+ });
+
+ // Unmute audio
+ await toggleMute(browser, pipWin);
+ ok(!(await isVideoMuted(browser, videoID)), "The audio is playing.");
+
+ await SpecialPowers.spawn(browser, [], async function () {
+ let muteButton = content.document.querySelector(".mute-button");
+ ok(
+ !muteButton.getAttribute("isMuted"),
+ "muteButton does not have isMuted attribute"
+ );
+ });
+
+ // Close PiP window
+ let pipClosed = BrowserTestUtils.domWindowClosed(pipWin);
+ let closeButton = pipWin.document.getElementById("close");
+ EventUtils.synthesizeMouseAtCenter(closeButton, {}, pipWin);
+ await pipClosed;
+ });
+});
+
+/**
+ * Tests the mock-wrapper.js video wrapper script selects the expected element
+ * responsible for toggling the video player's play/pause status.
+ */
+add_task(async function test_mock_play_pause_button() {
+ await BrowserTestUtils.withNewTab(TEST_URL, async browser => {
+ await ensureVideosReady(browser);
+ await setupVideoListeners(browser);
+
+ // Open the video in PiP
+ let videoID = "mock-video-controls";
+ let pipWin = await triggerPictureInPicture(browser, videoID);
+ ok(pipWin, "Got Picture-in-Picture window.");
+
+ info("Test a wrapper method with a correct selector");
+ // Play video
+ let playbackPromise = waitForVideoEvent(browser, "playing");
+ let playPause = pipWin.document.getElementById("playpause");
+ EventUtils.synthesizeMouseAtCenter(playPause, {}, pipWin);
+ await playbackPromise;
+ ok(!(await isVideoPaused(browser, videoID)), "The video is playing.");
+
+ info("Test a wrapper method with an incorrect selector");
+ // Pause the video.
+ let pausePromise = waitForVideoEvent(browser, "pause");
+ EventUtils.synthesizeMouseAtCenter(playPause, {}, pipWin);
+ await pausePromise;
+ ok(await isVideoPaused(browser, videoID), "The video is paused.");
+
+ // Close PiP window
+ let pipClosed = BrowserTestUtils.domWindowClosed(pipWin);
+ let closeButton = pipWin.document.getElementById("close");
+ EventUtils.synthesizeMouseAtCenter(closeButton, {}, pipWin);
+ await pipClosed;
+ });
+});
+
+/**
+ * Tests the mock-wrapper.js video wrapper script does not toggle mute/umute
+ * state when increasing/decreasing the volume using the arrow keys.
+ */
+add_task(async function test_volume_change_with_keyboard() {
+ await BrowserTestUtils.withNewTab(TEST_URL, async browser => {
+ await ensureVideosReady(browser);
+ await setupVideoListeners(browser);
+
+ // Open the video in PiP
+ let videoID = "mock-video-controls";
+ let pipWin = await triggerPictureInPicture(browser, videoID);
+ ok(pipWin, "Got Picture-in-Picture window.");
+
+ // Initially set video to be muted
+ await toggleMute(browser, pipWin);
+ ok(await isVideoMuted(browser, videoID), "The audio is not playing.");
+
+ // Decrease volume with arrow down
+ EventUtils.synthesizeKey("KEY_ArrowDown", {}, pipWin);
+ ok(await isVideoMuted(browser, videoID), "The audio is not playing.");
+
+ // Increase volume with arrow up
+ EventUtils.synthesizeKey("KEY_ArrowUp", {}, pipWin);
+ ok(!(await isVideoMuted(browser, videoID)), "The audio is still playing.");
+
+ await SpecialPowers.spawn(browser, [], async function () {
+ let video = content.document.querySelector("video");
+ ok(!video.muted, "Video should be unmuted.");
+ });
+
+ // Close PiP window
+ let pipClosed = BrowserTestUtils.domWindowClosed(pipWin);
+ let closeButton = pipWin.document.getElementById("close");
+ EventUtils.synthesizeMouseAtCenter(closeButton, {}, pipWin);
+ await pipClosed;
+ });
+});
+
+function waitForVideoEvent(browser, eventType) {
+ return BrowserTestUtils.waitForContentEvent(browser, eventType, true);
+}
+
+async function toggleMute(browser, pipWin) {
+ let mutedPromise = waitForVideoEvent(browser, "volumechange");
+ let audioButton = pipWin.document.getElementById("audio");
+ EventUtils.synthesizeMouseAtCenter(audioButton, {}, pipWin);
+ await mutedPromise;
+}
+
+async function setupVideoListeners(browser) {
+ await SpecialPowers.spawn(browser, [], async function () {
+ let video = content.document.querySelector("video");
+
+ // Set a listener for "playing" event
+ video.addEventListener("playing", async () => {
+ info("Got playing event!");
+ let playPauseButton =
+ content.document.querySelector(".play-pause-button");
+ ok(
+ !playPauseButton.getAttribute("isPaused"),
+ "playPauseButton does not have isPaused attribute."
+ );
+ });
+
+ // Set a listener for "pause" event
+ video.addEventListener("pause", async () => {
+ info("Got pause event!");
+ let playPauseButton =
+ content.document.querySelector(".play-pause-button");
+ // mock-wrapper's pause() method uses an invalid selector and should throw
+ // an error. Test that the PiP wrapper uses the fallback pause() method.
+ // This is to ensure PiP can handle cases where a site wrapper script is
+ // incorrect, but does not break functionality altogether.
+ ok(
+ !playPauseButton.getAttribute("isPaused"),
+ "playPauseButton still doesn't have isPaused attribute."
+ );
+ });
+ });
+}
+
+/**
+ * Tests that the mock-wrapper.js video wrapper hides the pip toggle when shouldHideToggle()
+ * returns true.
+ */
+add_task(async function test_mock_should_hide_toggle() {
+ await testToggle(TEST_URL_TOGGLE_VISIBILITY, {
+ "mock-video-controls": { canToggle: false, policy: TOGGLE_POLICIES.HIDDEN },
+ });
+});
+
+/**
+ * Tests that the mock-wrapper.js video wrapper does not hide the pip toggle when shouldHideToggle()
+ * returns false.
+ */
+add_task(async function test_mock_should_not_hide_toggle() {
+ await testToggle(TEST_URL, {
+ "mock-video-controls": { canToggle: true },
+ });
+});
diff --git a/browser/extensions/pictureinpicture/tests/browser/test-mock-wrapper.html b/browser/extensions/pictureinpicture/tests/browser/test-mock-wrapper.html
new file mode 100644
index 0000000000..f53e7a1b28
--- /dev/null
+++ b/browser/extensions/pictureinpicture/tests/browser/test-mock-wrapper.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Mock Wrapper Test</title>
+ <script type="text/javascript" src="test-mock-wrapper.js"></script>
+ <script type="text/javascript" src="click-event-helper.js"></script>
+</head>
+<style>
+ video {
+ display: block;
+ border: 1px solid black;
+ }
+</style>
+<body>
+ <div id="player">
+ <video id="mock-video-controls" src="test-video.mp4" controls loop="true" width="400" height="225"></video>
+ <button class="play-pause-button" onclick="playPause()">play/pause button</button>
+ <button class="mute-button" onclick="toggleMute()">mute/unmute button</button>
+ </div>
+</body>
+</html>
diff --git a/browser/extensions/pictureinpicture/tests/browser/test-mock-wrapper.js b/browser/extensions/pictureinpicture/tests/browser/test-mock-wrapper.js
new file mode 100644
index 0000000000..2119122428
--- /dev/null
+++ b/browser/extensions/pictureinpicture/tests/browser/test-mock-wrapper.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";
+
+function toggleMute() {
+ let video = document.getElementById("mock-video-controls");
+ let muteButton = document.querySelector(".mute-button");
+ let isMuted = video.muted;
+ video.muted = !isMuted;
+
+ if (video.muted) {
+ muteButton.setAttribute("isMuted", true);
+ } else {
+ muteButton.removeAttribute("isMuted");
+ }
+}
+
+function playPause() {
+ let video = document.getElementById("mock-video-controls");
+ let playPauseButton = document.querySelector(".play-pause-button");
+
+ if (video.paused) {
+ video.play();
+ playPauseButton.removeAttribute("isPaused");
+ } else {
+ video.setAttribute("isPaused", true);
+ video.pause();
+ }
+}
diff --git a/browser/extensions/pictureinpicture/tests/browser/test-toggle-visibility.html b/browser/extensions/pictureinpicture/tests/browser/test-toggle-visibility.html
new file mode 100644
index 0000000000..622ea6c568
--- /dev/null
+++ b/browser/extensions/pictureinpicture/tests/browser/test-toggle-visibility.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Mock Wrapper Test</title>
+ <script type="text/javascript" src="test-mock-wrapper.js"></script>
+ <script type="text/javascript" src="click-event-helper.js"></script>
+</head>
+<style>
+ video {
+ display: block;
+ border: 1px solid black;
+ }
+</style>
+<body>
+ <div id="player">
+ <video id="mock-video-controls" class="mock-preview-video" src="test-video.mp4" controls loop="true" width="400" height="225"></video>
+ <button class="play-pause-button" onclick="playPause()">play/pause button</button>
+ <button class="mute-button" onclick="toggleMute()">mute/unmute button</button>
+ </div>
+</body>
+</html>
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/arte.js b/browser/extensions/pictureinpicture/video-wrappers/arte.js
new file mode 100644
index 0000000000..3d1df1f65f
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/arte.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(".avp-captions");
+
+ if (container) {
+ updateCaptionsFunction("");
+ const callback = function (mutationsList, observer) {
+ let textNodeList = container.querySelectorAll(".avp-captions-line");
+ if (!textNodeList.length) {
+ updateCaptionsFunction("");
+ return;
+ }
+ updateCaptionsFunction(
+ Array.from(textNodeList, x => x.textContent).join("\n")
+ );
+ };
+ 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..bb5c55e0cb
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/disneyplus.js
@@ -0,0 +1,70 @@
+/* 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) {
+ // Handle Disney+ (US)
+ 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,
+ });
+ return;
+ }
+
+ // Handle Disney+ (non US version)
+ container = document.querySelector(".shaka-text-container");
+ if (container) {
+ updateCaptionsFunction("");
+ const callback = function (mutationsList, observer) {
+ let textNodeList = 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/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..c6b45b1a0a
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/hotstar.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(".shaka-text-container");
+
+ if (container) {
+ updateCaptionsFunction("");
+ const callback = function (mutationsList, observer) {
+ let textNodeList = 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..e33fe23a24
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/netflix.js
@@ -0,0 +1,94 @@
+/* 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);
+ }
+ setVolume(video, volume) {
+ this.player.setVolume(volume);
+ }
+ getVolume() {
+ return this.player.getVolume();
+ }
+ setMuted(video, shouldMute) {
+ this.player.setMuted(shouldMute);
+ }
+ isMuted() {
+ return this.player.isMuted();
+ }
+}
+
+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..28a2bd1575
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/primeVideo.js
@@ -0,0 +1,103 @@
+/* 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..09e3b989dc
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/udemy.js
@@ -0,0 +1,66 @@
+/* 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(
+ `[data-purpose="play-button"]`
+ );
+ if (video.paused) {
+ playPauseButton?.click();
+ }
+ }
+
+ pause(video) {
+ let playPauseButton = document.querySelector(
+ `[data-purpose="pause-button"]`
+ );
+ if (!video.paused) {
+ playPauseButton?.click();
+ }
+ }
+
+ setMuted(video, shouldMute) {
+ let muteButton = document.querySelector(
+ `[data-purpose="volume-control-button"]`
+ );
+ if (video.muted !== shouldMute && muteButton) {
+ muteButton.click();
+ }
+ }
+
+ setCaptionContainerObserver(video, updateCaptionsFunction) {
+ let container = video.parentElement;
+
+ if (container) {
+ updateCaptionsFunction("");
+ const callback = function (mutationsList, observer) {
+ let text = container.querySelector(
+ `[data-purpose="captions-cue-text"]`
+ )?.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..8b39e469f9
--- /dev/null
+++ b/browser/extensions/pictureinpicture/video-wrappers/youtube.js
@@ -0,0 +1,89 @@
+/* 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) {
+ // Use shorts player only if video is from YouTube Shorts.
+ let shortsPlayer = video.closest("#shorts-player")?.wrappedJSObject;
+ let isYTShorts = !!(video.baseURI.includes("shorts") && shortsPlayer);
+
+ this.player = isYTShorts
+ ? shortsPlayer
+ : video.closest("#movie_player")?.wrappedJSObject;
+ }
+ isLive(video) {
+ return !!document.querySelector(".ytp-live");
+ }
+ setMuted(video, shouldMute) {
+ if (this.player) {
+ if (shouldMute) {
+ this.player.mute();
+ } else {
+ this.player.unMute();
+ }
+ } 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");
+ }
+ setVolume(video, volume) {
+ if (this.player) {
+ this.player.setVolume(volume * 100);
+ } else {
+ video.volume = volume;
+ }
+ }
+ getVolume(video) {
+ if (this.player) {
+ return this.player.getVolume() / 100;
+ }
+ return video.volume;
+ }
+}
+
+this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;