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

@@ -40,6 +40,12 @@ let AVAILABLE_PIP_OVERRIDES;
       },
     },
 
+    abcnews: {
+      "https://*.abcnews.go.com/*": {
+        videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
+      },
+    },
+
     airmozilla: {
       "https://*.mozilla.hosted.panopto.com/*": {
         videoWrapperScriptPath: "video-wrappers/airmozilla.js",
@@ -69,7 +75,7 @@ let AVAILABLE_PIP_OVERRIDES;
 
     funimation: {
       "https://*.funimation.com/*": {
-        videoWrapperScriptPath: "video-wrappers/funimation.js",
+        videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
       },
     },
 
@@ -102,9 +108,15 @@ let AVAILABLE_PIP_OVERRIDES;
       "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",
       },
     },
 
@@ -120,6 +132,12 @@ let AVAILABLE_PIP_OVERRIDES;
       "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",
@@ -131,7 +149,7 @@ let AVAILABLE_PIP_OVERRIDES;
 
     sonyliv: {
       "https://*.sonyliv.com/*": {
-        videoWrapperScriptPath: "video-wrappers/sonyliv.js",
+        videoWrapperScriptPath: "video-wrappers/videojsWrapper.js",
       },
     },
 

browser/extensions/pictureinpicture/moz.build

@@ -32,17 +32,15 @@ FINAL_TARGET_FILES.features["pictureinpicture@mozilla.org"]["video-wrappers"] +=
     "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/extensions/pictureinpicture/video-wrappers/funimation.js

@@ -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;

browser/extensions/pictureinpicture/video-wrappers/nebula.js

@@ -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;

browser/extensions/pictureinpicture/video-wrappers/videojsWrapper.js

@@ -4,6 +4,7 @@
 
 "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");