- start running autoplay/autofetch behaviors only in response to star…

…t(), not (#63)

automatically on page load
- ensures we have consistent time when behaviors run
- logging tweaks: add ids to standard classes, log when behaviors are actually starting
bump to 0.5.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "browsertrix-behaviors",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "main": "index.js",
   "author": "Webrecorder Software",
   "license": "AGPL-3.0-or-later",

src/autofetcher.ts

@@ -4,7 +4,7 @@
 // (May not work for cross-origin stylesheets)
 
 import { BackgroundBehavior } from "./lib/behavior";
-import { awaitLoad, sleep } from "./lib/utils";
+import { sleep } from "./lib/utils";
 
 const SRC_SET_SELECTOR = "img[srcset], img[data-srcset], img[data-src], noscript > img[src], img[loading='lazy'], " +
   "video[srcset], video[data-srcset], video[data-src], audio[srcset], audio[data-srcset], audio[data-src], " +
@@ -30,6 +30,9 @@ export class AutoFetcher extends BackgroundBehavior {
   headers: object;
   _donePromise: Promise<null>;
   _markDone: (value: any) => void;
+  active: boolean;
+
+  static id = "AutoFetcher";
 
   constructor(active = false, headers = null) {
     super();
@@ -42,25 +45,26 @@ export class AutoFetcher extends BackgroundBehavior {
 
     this._donePromise = new Promise((resolve) => this._markDone = resolve);
 
-    if (active) {
-      this.start();
-    }
+    this.active = active;
   }
 
   get numFetching() {
     return this.numDone + this.numPending + this.urlQueue.length;
   }
 
   async start() {
-    await awaitLoad();
+    if (!this.active) {
+      return;
+    }
+
     this.run();
     this.initObserver();
 
-    await sleep(500);
-
-    if (!this.urlQueue.length && !this.numPending) {
-      this._markDone(null);
-    }
+    sleep(500).then(() => {
+      if (!this.urlQueue.length && !this.numPending) {
+        this._markDone(null);
+      }
+    });
   }
 
   done() {

src/autoplay.ts

@@ -1,5 +1,5 @@
 import { BackgroundBehavior } from "./lib/behavior";
-import { awaitLoad, sleep } from "./lib/utils";
+import { sleep } from "./lib/utils";
 import { type AutoFetcher } from "./autofetcher";
 
 
@@ -11,6 +11,8 @@ export class Autoplay extends BackgroundBehavior {
   promises: Promise<any>[];
   _initDone: Function;
 
+  static id = "Autoplay";
+
   constructor(autofetcher: AutoFetcher) {
     super();
     this.mediaSet = new Set();
@@ -19,11 +21,9 @@ export class Autoplay extends BackgroundBehavior {
     this.promises = [];
     this._initDone = () => null;
     this.promises.push(new Promise((resolve) => this._initDone = resolve));
-    this.start();
   }
 
   async start() {
-    await awaitLoad();
     //this.initObserver();
 
     this.pollAudioVideo();
@@ -142,17 +142,17 @@ export class Autoplay extends BackgroundBehavior {
 
     started.then(() => this.promises.push(finished));
 
-    media.addEventListener("loadstart", () => { this.debug("loadstart"); resolve2(true); });
-    media.addEventListener("playing", () => { this.debug("playing"); resolve2(true); });
+    media.addEventListener("loadstart", () => { this.debug("media event: loadstart"); resolve2(true); });
+    media.addEventListener("playing", () => { this.debug("media event: playing"); resolve2(true); });
 
-    media.addEventListener("loadeddata", () => this.debug("loadeddata"));
+    media.addEventListener("loadeddata", () => this.debug("media event: loadeddata"));
 
-    media.addEventListener("ended", () => { this.debug("ended"); resolve(); });
-    media.addEventListener("pause", () => { this.debug("pause"); resolve(); });
-    media.addEventListener("abort", () => { this.debug("abort"); resolve(); });
-    media.addEventListener("error", () => { this.debug("error"); resolve(); });
-    media.addEventListener("stalled", () => { this.debug("stalled"); resolve(); });
-    media.addEventListener("suspend", () => { this.debug("suspend"); resolve(); });
+    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.muted = true;
 
@@ -162,15 +162,18 @@ export class Autoplay extends BackgroundBehavior {
     if (!hasA) {
       media.click();
 
-      const loadingStarted = await Promise.race([started, sleep(1000)]);
-
-      if (loadingStarted) {
+      if (await Promise.race([started, sleep(1000)])) {
+        this.debug("play started after media.click()");
         return finished;
       }
     }
 
     media.play();
 
+    if (await Promise.race([started, sleep(1000)])) {
+      this.debug("play started after media.play()");
+    }
+
     return finished;
   }
 

src/index.ts

@@ -7,7 +7,7 @@ import { Behavior, BehaviorRunner } from "./lib/behavior";
 import siteBehaviors from "./site";
 
 // ===========================================================================
-// ====                  WIP: New Behavior Manager                        ====
+// ====                  Behavior Manager                        ====
 // ===========================================================================
 //
 
@@ -79,12 +79,12 @@ export class BehaviorManager {
     this.autofetch = new AutoFetcher(!!opts.autofetch, opts.fetchHeaders);
 
     if (opts.autofetch) {
-      behaviorLog("Enable AutoFetcher");
+      behaviorLog("Using AutoFetcher");
       this.behaviors.push(this.autofetch);
     }
 
     if (opts.autoplay) {
-      behaviorLog("Enable Autoplay");
+      behaviorLog("Using Autoplay");
       this.behaviors.push(new Autoplay(this.autofetch));
     }
 
@@ -111,7 +111,7 @@ export class BehaviorManager {
       for (const name in this.loadedBehaviors) {
         const siteBehaviorClass = this.loadedBehaviors[name];
         if (siteBehaviorClass.isMatch()) {
-          behaviorLog("Starting Site-Specific Behavior: " + name);
+          behaviorLog("Using Site-Specific Behavior: " + name);
           this.mainBehaviorClass = siteBehaviorClass;
           const siteSpecificOpts = typeof opts.siteSpecific === "object" ?
             (opts.siteSpecific[name] || {}) : {};
@@ -127,7 +127,7 @@ export class BehaviorManager {
     }
 
     if (!siteMatch && opts.autoscroll) {
-      behaviorLog("Starting Autoscroll");
+      behaviorLog("Using Autoscroll");
       this.mainBehaviorClass = AutoScroll;
       this.mainBehavior = new AutoScroll(this.autofetch);
     }
@@ -192,16 +192,21 @@ export class BehaviorManager {
     }
 
     this.init(opts, restart);
-    this.selectMainBehavior();
+    if (!this.mainBehavior) {
+      this.selectMainBehavior();
+    }
 
     await awaitLoad();
 
-    if (this.mainBehavior) {
-      this.mainBehavior.start();
-    }
+    this.behaviors.forEach(x => {
+      behaviorLog("Starting behavior: " + x.constructor.id || "(Unnamed)");
+      x.start();
+    });
 
     this.started = true;
 
+    await sleep(500);
+
     let allBehaviors = Promise.allSettled(this.behaviors.map(x => x.done()));
 
     if (this.timeout) {
@@ -235,16 +240,12 @@ export class BehaviorManager {
 
   pause() {
     behaviorLog("Pausing Main Behavior" + this.mainBehaviorClass.name);
-    if (this.mainBehavior) {
-      this.mainBehavior.pause();
-    }
+    this.behaviors.forEach(x => x.pause());
   }
 
   unpause() {
     // behaviorLog("Unpausing Main Behavior: " + this.mainBehaviorClass.name);
-    if (this.mainBehavior) {
-      this.mainBehavior.unpause();
-    }
+    this.behaviors.forEach(x => x.unpause());
   }
 
   doAsyncFetch(url) {