reload wait status: add message indicating that recording will start after reload, prevent double-starting recording by disabling start button after first press

ruffle/flash: add manual navigator.plugins overrides before ruffle runs to avoid pages not detecting flash
update to latest ruffle (03-25-2021 nightly)
autofetch: prevent injecting multiple times, wrap in iife
bump to 0.5.12

Author: ikreymer

package.json

@@ -1,14 +1,14 @@
 {
   "name": "ArchiveWeb.page",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "main": "index.js",
   "description": "Create Web Archives directly in your browser",
   "repository": "https://github.com/webrecorder/archiveweb.page",
   "author": "Webrecorder Software",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
-    "@webrecorder/wabac": "^2.6.4",
+    "@webrecorder/wabac": "^2.6.7",
     "bulma": "^0.9.1",
     "flexsearch": "^0.6.32",
     "hash-wasm": "^4.4.1",
@@ -20,13 +20,13 @@
     "lodash": "^4.17.20",
     "node-fetch": "^2.6.1",
     "pretty-bytes": "^5.3.0",
-    "replaywebpage": "^1.3.10",
+    "replaywebpage": "^1.3.12",
     "warcio": "^1.4.1"
   },
   "devDependencies": {
     "copy-webpack-plugin": "^6.4.0",
     "css-loader": "^3.5.3",
-    "electron": "^12.0.1",
+    "electron": "12.0.2",
     "electron-builder": "^22.9.1",
     "electron-notarize": "^1.0.0",
     "generate-json-webpack-plugin": "1.0.0",

src/autofetcher.js

@@ -1,4 +1,4 @@
-
+(() => {
 const SRC_SET_SELECTOR = 'img[srcset], img[data-srcset], img[data-src], ' +  
 'video[srcset], video[data-srcset], video[data-src], audio[srcset], audio[data-srcset], audio[data-src], ' +
 'picture > source[srcset], picture > source[data-srcset], picture > source[data-src], ' +
@@ -195,4 +195,9 @@ class AutoFetcher
   }
 }
 
-new AutoFetcher().init();
+if (!self.__awp_autofetch__) {
+  new AutoFetcher().init();
+  self.__awp_autofetch__ = true;
+}
+
+})();

src/popup.js

@@ -45,6 +45,8 @@ class RecPopup extends LitElement
     this.collDrop = "";
 
     this.allowCreate = true;
+
+    this.waitingForStart = false;
   }
 
   static get properties() {
@@ -56,6 +58,7 @@ class RecPopup extends LitElement
 
       recording: { type: Boolean },
       status: { type: Object },
+      waitingForStart: { type: Boolean },
 
       replayUrl: { type: String },
       pageUrl: { type: String },
@@ -104,6 +107,7 @@ class RecPopup extends LitElement
     switch (message.type) {
       case "status":
         this.recording = message.recording;
+        this.waitingForStart = !message.firstPageStarted;
         this.status = message;
         if (message.pageUrl) {
           this.pageUrl = message.pageUrl;
@@ -321,6 +325,10 @@ class RecPopup extends LitElement
       return html`<i>Can't record this page.</i>`;
     }
 
+    if (this.waitingForStart) {
+      return html`<i>Recording will start after the page reloads...</i>`;
+    }
+
     return html`<i>${this.notRecordingMessage}</i>`;
   }
 
@@ -399,7 +407,7 @@ class RecPopup extends LitElement
           ${this.canRecord ? html`
           ${this.renderDropdown()}
           <button
-           ?disabled=${this.collDrop === "create"}
+           ?disabled=${this.collDrop === "create" || (!this.recording && this.waitingForStart)}
            @click="${!this.recording ? this.onStart : this.onStop}" class="button">
             <span class="icon">
               ${!this.recording ? html`
@@ -436,10 +444,12 @@ class RecPopup extends LitElement
 
   onStart() {
     this.sendMessage({type: "startRecording", collId: this.collId, url: this.pageUrl});
+    this.waitingForStart = true;
   }
 
   onStop() {
     this.sendMessage({type: "stopRecording"});
+    this.waitingForStart = false;
   }
 
   onSelectColl(event) {

src/recorder.js

@@ -30,8 +30,8 @@ class Recorder {
     this.running = false;
 
     this.frameId = null;
-    this.pageCount = 0;
     this.pageInfo = {size: 0};
+    this.firstPageStarted = false;
 
     this.sizeNew = 0;
     this.sizeTotal = 0;
@@ -70,10 +70,26 @@ class Recorder {
   }
 
   getInjectScript() {
-    return autofetcher + `
-${this.addExternalInject("ruffle/ruffle.js")}
-window.addEventListener("beforeunload", () => {});
-`;
+    return autofetcher + `;window.addEventListener("beforeunload", () => {});` + this.getFlashInjectScript();
+  }
+
+  getFlashInjectScript() {
+    return `
+    (() => {
+      const description = "Shockwave Flash 32.0 r0";
+      const enabledPlugin = { description };
+      navigator.plugins["Shockwave Flash"] = { description };
+      function addPlugin(type, suffixes) {
+        const mime = { enabledPlugin, description: "", type, suffixes};
+        navigator.mimeTypes[type] = mime;
+        navigator.mimeTypes[navigator.mimeTypes.length] = mime;
+      }
+      addPlugin("application/futuresplash", "sp1");
+      addPlugin("application/x-shockwave-flash2-preview", "swf");
+      addPlugin("application/x-shockwave-flash", "swf");
+      addPlugin("application/vnd.adobe.flash-movie", "swf");
+    })();
+    ` + this.addExternalInject("ruffle/ruffle.js");
   }
 
   async detach() {
@@ -150,6 +166,7 @@ window.addEventListener("beforeunload", () => {});
   getStatusMsg() {
     return {
       recording: this.running,
+      firstPageStarted: this.firstPageStarted,
       sizeTotal: this.sizeTotal,
       sizeNew: this.sizeNew,
       numUrls: this.numUrls,
@@ -196,11 +213,14 @@ window.addEventListener("beforeunload", () => {});
   }
 
   async start() {
+    this.firstPageStarted = false;
+
     await this.send("Page.enable");
 
     await this._doInjectTopFrame();
 
     await this.sessionInit([]);
+
     this.failureMsg = null;
   }
 
@@ -533,9 +553,21 @@ window.addEventListener("beforeunload", () => {});
       this.fullCommit(reqresp, sessions);
     }
 
+    if (!this.firstPageStarted) {
+      this.initFirstPage();
+    }
+
     return true;
   }
 
+  async initFirstPage() {
+    // Enable unload pause only on first full page that is being recorded
+    await this.send("Debugger.enable");
+    await this.send("DOMDebugger.setEventListenerBreakpoint", {'eventName': 'beforeunload'});
+    this.updateStatus();
+    this.firstPageStarted = true;
+  }
+
   _initNewPage(url, mime) {
     this.pageInfo = {
       id: this.newPageId(),
@@ -594,13 +626,7 @@ window.addEventListener("beforeunload", () => {});
 
     await this.commitPage(this.pageInfo, results[0], false);
 
-    // Enable unload pause only on first full page that is being recorded
-    if (!this.pageCount++) {
-      await this.send("Debugger.enable");
-      await this.send("DOMDebugger.setEventListenerBreakpoint", {'eventName': 'beforeunload'});
-    }
-
-    await this.updateStatus();
+    this.updateStatus();
   }
 
   async updateHistory(sessions) {

wr-ext/bg.js

@@ -1,7 +1,7 @@
 {
   "name": "Webrecorder ArchiveWeb.page",
   "description": "Create high-fidelity web archives directly in your browser",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "permissions": [
     "debugger",