add querySelectorAllDeep() for querying autoplay / autofetch content …

…through the shadow dom (#76)

bump version to 0.6.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "browsertrix-behaviors",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "main": "index.js",
   "author": "Webrecorder Software",
   "license": "AGPL-3.0-or-later",
@@ -28,5 +28,8 @@
     "src",
     "index.js",
     "dist/"
-  ]
+  ],
+  "dependencies": {
+    "query-selector-shadow-dom": "^1.0.1"
+  }
 }

src/autofetcher.ts

@@ -4,6 +4,8 @@
 // - media query stylesheets that have not necessarily been loaded (may not work for cross-origin stylesheets)
 // - any data-* attribute
 
+import { querySelectorAllDeep } from "query-selector-shadow-dom";
+
 import { BackgroundBehavior } from "./lib/behavior";
 import { sleep, xpathNodes } from "./lib/utils";
 
@@ -244,7 +246,7 @@ export class AutoFetcher extends BackgroundBehavior {
   }
 
   extractSrcSrcSetAll(root) {
-    const elems = root.querySelectorAll(SRC_SET_SELECTOR);
+    const elems = querySelectorAllDeep(SRC_SET_SELECTOR, root);
 
     for (const elem of elems) {
       this.extractSrcSrcSet(elem);

src/autoplay.ts

@@ -1,3 +1,5 @@
+import { querySelectorAllDeep } from "query-selector-shadow-dom";
+
 import { BackgroundBehavior } from "./lib/behavior";
 import { sleep } from "./lib/utils";
 import { type AutoFetcher } from "./autofetcher";
@@ -47,7 +49,7 @@ export class Autoplay extends BackgroundBehavior {
     this.polling = true;
 
     while (run) {
-      for (const [, elem] of document.querySelectorAll("video, audio, picture").entries()) {
+      for (const [, elem] of querySelectorAllDeep("video, audio, picture").entries()) {
         if (!elem["__bx_autoplay_found"]) {
 
           if (!this.running) {
@@ -122,8 +124,12 @@ export class Autoplay extends BackgroundBehavior {
       return;
     }
 
-    if (media.paused) {
-      this.debug("no src url found, attempting to click or play: " + media.outerHTML);
+    if (media.paused || media.currentTime) {
+      if (media.paused) {
+        this.debug("no src url found, attempting to click or play: " + media.outerHTML);
+      } else {
+        this.debug("media already playing, waiting for full playback to finish: " + media.outerHTML);
+      }
 
       this.attemptMediaPlay(media).then(async (finished: Promise<any> | null) => {
         let check = true;
@@ -149,35 +155,44 @@ export class Autoplay extends BackgroundBehavior {
 
   async attemptMediaPlay(media) {
     // finished promise
-    let resolve;
+    let resolveFinished;
 
     const finished = new Promise((res) => {
-      resolve = res;
+      resolveFinished = res;
     });
 
     // started promise
-    let resolve2;
+    let resolveStarted;
 
     const started = new Promise((res) => {
-      resolve2 = res;
+      resolveStarted = res;
     });
 
     started.then(() => this.promises.push(finished));
 
-    media.addEventListener("loadstart", () => { this.debug("media event: loadstart"); resolve2(true); });
-    media.addEventListener("playing", () => { this.debug("media event: playing"); resolve2(true); });
+    // already started
+    if (!media.paused && media.currentTime > 0) {
+      resolveStarted();
+    }
+
+    media.addEventListener("loadstart", () => { this.debug("media event: loadstart"); resolveStarted(true); });
+    media.addEventListener("playing", () => { this.debug("media event: playing"); resolveStarted(true); });
 
     media.addEventListener("loadeddata", () => this.debug("media event: loadeddata"));
 
-    media.addEventListener("ended", () => { this.debug("media event: ended"); resolve(); });
-    media.addEventListener("pause", () => { this.debug("media event: pause"); resolve(); });
-    media.addEventListener("abort", () => { this.debug("media event: abort"); resolve(); });
-    media.addEventListener("error", () => { this.debug("media event: error"); resolve(); });
-    media.addEventListener("stalled", () => { this.debug("media event: stalled"); resolve(); });
-    media.addEventListener("suspend", () => { this.debug("media event: suspend"); resolve(); });
+    media.addEventListener("ended", () => { this.debug("media event: ended"); resolveFinished(); });
+    media.addEventListener("pause", () => { this.debug("media event: pause"); resolveFinished(); });
+    media.addEventListener("abort", () => { this.debug("media event: abort"); resolveFinished(); });
+    media.addEventListener("error", () => { this.debug("media event: error"); resolveFinished(); });
+    media.addEventListener("stalled", () => { this.debug("media event: stalled"); resolveFinished(); });
+    media.addEventListener("suspend", () => { this.debug("media event: suspend"); resolveFinished(); });
 
     media.muted = true;
 
+    if (!media.paused && media.currentTime > 0) {
+      return finished;
+    }
+
     const hasA = media.closest("a");
 
     // if contained in <a> tag, clicking may navigate away, so avoid

yarn.lock

@@ -4203,6 +4203,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
+query-selector-shadow-dom@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/query-selector-shadow-dom/-/query-selector-shadow-dom-1.0.1.tgz#1c7b0058eff4881ac44f45d8f84ede32e9a2f349"
+  integrity sha512-lT5yCqEBgfoMYpf3F2xQRK7zEr1rhIIZuceDK6+xRkJQ4NMbHTwXqk4NkwDwQMNqXgG9r9fyHnzwNVs6zV5KRw==
+
 [email protected]:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"