Bug 1762230 - videojs wrapper for PIP captions/subtitles r=kpatenio,niklas
authorJanvi Bajoria <janvibajo1@gmail.com>
Thu, 21 Jul 2022 13:32:17 +0000
changeset 624751 c9ce53b2fd3a94288c2ee35f95d860d8bf7c5455
parent 624750 fc7d48b82e5eed1bbe768acb5d361c61d5368c9a
child 624752 592b0b4a842482aaa43ab261ae450618cb709458
push id40013
push userapavel@mozilla.com
push dateThu, 21 Jul 2022 21:40:08 +0000
treeherdermozilla-central@675d5c0e4d1d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerskpatenio, niklas
bugs1762230
milestone104.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1762230 - videojs wrapper for PIP captions/subtitles r=kpatenio,niklas Differential Revision: https://phabricator.services.mozilla.com/D151367
browser/extensions/pictureinpicture/data/picture_in_picture_overrides.js
browser/extensions/pictureinpicture/moz.build
browser/extensions/pictureinpicture/video-wrappers/funimation.js
browser/extensions/pictureinpicture/video-wrappers/nebula.js
browser/extensions/pictureinpicture/video-wrappers/sonyliv.js
browser/extensions/pictureinpicture/video-wrappers/videojsWrapper.js
--- a/browser/extensions/pictureinpicture/data/picture_in_picture_overrides.js
+++ b/browser/extensions/pictureinpicture/data/picture_in_picture_overrides.js
@@ -35,16 +35,22 @@ let AVAILABLE_PIP_OVERRIDES;
       "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",
       },
     },
 
     bbc: {
       "https://*.bbc.com/*": {
@@ -64,17 +70,17 @@ let AVAILABLE_PIP_OVERRIDES;
     disneyplus: {
       "https://*.disneyplus.com/*": {
         videoWrapperScriptPath: "video-wrappers/disneyplus.js",
       },
     },
 
     funimation: {
       "https://*.funimation.com/*": {
-        videoWrapperScriptPath: "video-wrappers/funimation.js",
+        videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
       },
     },
 
     hbomax: {
       "https://play.hbomax.com/feature/*": {
         videoWrapperScriptPath: "video-wrappers/hbomax.js",
       },
       "https://play.hbomax.com/episode/*": {
@@ -97,46 +103,58 @@ let AVAILABLE_PIP_OVERRIDES;
     instagram: {
       "https://www.instagram.com/*": { policy: TOGGLE_POLICIES.ONE_QUARTER },
     },
 
     laracasts: {
       "https://*.laracasts.com/*": { policy: TOGGLE_POLICIES.ONE_QUARTER },
     },
 
+    mxplayer: {
+      "https://*.mxplayer.in/*": {
+        videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+      },
+    },
+
     nebula: {
       "https://*.nebula.app/*": {
-        videoWrapperScriptPath: "video-wrappers/nebula.js",
+        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 },
     },
 
+    pbs: {
+      "https://*.pbs.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",
       },
     },
 
     sonyliv: {
       "https://*.sonyliv.com/*": {
-        videoWrapperScriptPath: "video-wrappers/sonyliv.js",
+        videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
       },
     },
 
     tubi: {
       "https://*.tubitv.com/*": {
         videoWrapperScriptPath: "video-wrappers/tubi.js",
       },
     },
--- a/browser/extensions/pictureinpicture/moz.build
+++ b/browser/extensions/pictureinpicture/moz.build
@@ -27,27 +27,25 @@ FINAL_TARGET_FILES.features["pictureinpi
     "lib/picture_in_picture_overrides.js",
 ]
 
 FINAL_TARGET_FILES.features["pictureinpicture@mozilla.org"]["video-wrappers"] += [
     "video-wrappers/airmozilla.js",
     "video-wrappers/bbc.js",
     "video-wrappers/dailymotion.js",
     "video-wrappers/disneyplus.js",
-    "video-wrappers/funimation.js",
     "video-wrappers/hbomax.js",
     "video-wrappers/hotstar.js",
     "video-wrappers/hulu.js",
     "video-wrappers/mock-wrapper.js",
-    "video-wrappers/nebula.js",
     "video-wrappers/netflix.js",
     "video-wrappers/piped.js",
     "video-wrappers/primeVideo.js",
-    "video-wrappers/sonyliv.js",
     "video-wrappers/tubi.js",
+    "video-wrappers/videojsWrapper.js",
     "video-wrappers/voot.js",
     "video-wrappers/washingtonpost.js",
     "video-wrappers/youtube.js",
 ]
 
 BROWSER_CHROME_MANIFESTS += ["tests/browser/browser.ini"]
 
 with Files("**"):
deleted file mode 100644
--- a/browser/extensions/pictureinpicture/video-wrappers/funimation.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/* 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.getElementById("vjs_video_3");
-
-    if (container) {
-      updateCaptionsFunction("");
-      const callback = function(mutationsList, observer) {
-        let textNodeList = container
-          .querySelector(".vjs-text-track-cue")
-          ?.querySelectorAll("div");
-        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;
deleted file mode 100644
--- a/browser/extensions/pictureinpicture/video-wrappers/nebula.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/* 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(".vjs-text-track-display");
-
-    if (container) {
-      updateCaptionsFunction("");
-      const callback = () => {
-        let textNodeList = container
-          .querySelector(".vjs-text-track-cue")
-          ?.querySelectorAll("div");
-
-        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();
-
-      let captionsObserver = new MutationObserver(callback);
-      captionsObserver.observe(container, {
-        attributes: false,
-        childList: true,
-        subtree: true,
-      });
-    }
-  }
-}
-
-this.PictureInPictureVideoWrapper = PictureInPictureVideoWrapper;
rename from browser/extensions/pictureinpicture/video-wrappers/sonyliv.js
rename to browser/extensions/pictureinpicture/video-wrappers/videojsWrapper.js
--- a/browser/extensions/pictureinpicture/video-wrappers/sonyliv.js
+++ b/browser/extensions/pictureinpicture/video-wrappers/videojsWrapper.js
@@ -1,14 +1,15 @@
 /* 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 textNodeList = container