FB video fix + UI tweaks + deps update (0.15.2)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webrecorder/archivewebpage",
   "productName": "ArchiveWeb.page",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "main": "index.js",
   "description": "Create Web Archives directly in your browser",
   "repository": {
@@ -14,7 +14,7 @@
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@ipld/car": "^5.3.2",
     "@ipld/unixfs": "^3.0.0",
-    "@webrecorder/wabac": "^2.22.17",
+    "@webrecorder/wabac": "^2.23.2",
     "auto-js-ipfs": "^2.3.0",
     "browsertrix-behaviors": "^0.8.5",
     "btoa": "^1.2.1",
@@ -28,21 +28,23 @@
     "p-queue": "^8.0.1",
     "pdfjs-dist": "2.2.228",
     "pretty-bytes": "^5.6.0",
-    "replaywebpage": "^2.3.8",
+    "replaywebpage": "^2.3.12",
     "stream-browserify": "^3.0.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "unused-filename": "^4.0.1",
     "uuid": "^9.0.0",
     "warcio": "^2.4.4"
   },
   "devDependencies": {
+    "@types/mime-types": "^3.0.0",
+    "@types/minimist": "^1.2.5",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
-    "electron": "^32.2.0",
-    "electron-builder": "^24.13.3",
+    "electron": "^36.3.2",
+    "electron-builder": "^26.0.12",
     "electron-notarize": "^1.2.2",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^9.1.0",
@@ -67,7 +69,7 @@
     "webpack-extension-reloader": "^1.1.4"
   },
   "resolutions": {
-    "@webrecorder/wabac": "^2.22.17"
+    "@webrecorder/wabac": "^2.23.2"
   },
   "files": [
     "src/",

src/electron/electron-recorder.ts

@@ -4,7 +4,6 @@ import { Recorder } from "../recorder";
 
 import path from "path";
 import fs from "fs";
-// @ts-expect-error - TS7016 - Could not find a declaration file for module 'mime-types'. '/Users/emma/Work/Webrecorder/archiveweb.page/node_modules/mime-types/index.js' implicitly has an 'any' type.
 import mime from "mime-types";
 
 const DEBUG = false;

src/recorder.ts

@@ -5,6 +5,7 @@ import {
   rewriteDASH,
   rewriteHLS,
   removeRangeAsQuery,
+  DISABLE_MEDIASOURCE_SCRIPT,
 } from "@webrecorder/wabac";
 
 import { Buffer } from "buffer";
@@ -60,6 +61,7 @@ class Recorder {
   archiveFlash = false;
   archiveScreenshots = false;
   archivePDF = false;
+  disableMSE = false;
 
   _fetchQueue: FetchEntry[] = [];
 
@@ -160,8 +162,10 @@ class Recorder {
     this.archiveCookies = (await getLocalOption("archiveCookies")) === "1";
     this.archiveStorage = (await getLocalOption("archiveStorage")) === "1";
     this.archiveFlash = (await getLocalOption("archiveFlash")) === "1";
-    this.archiveScreenshots = (await getLocalOption("archiveScreenshots")) === "1";
+    this.archiveScreenshots =
+      (await getLocalOption("archiveScreenshots")) === "1";
     this.archivePDF = (await getLocalOption("archivePDF")) === "1";
+    this.disableMSE = (await getLocalOption("disableMSE")) === "1";
   }
 
   // @ts-expect-error - TS7006 - Parameter 'autorun' implicitly has an 'any' type.
@@ -196,7 +200,8 @@ class Recorder {
     });
 
     window.addEventListener("beforeunload", () => {});\n` +
-      (this.archiveFlash ? this.getFlashInjectScript() : "")
+      (this.archiveFlash ? this.getFlashInjectScript() : "") +
+      (this.disableMSE ? DISABLE_MEDIASOURCE_SCRIPT : "")
     );
   }
 
@@ -937,13 +942,13 @@ class Recorder {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   async savePDF(pageInfo: any) {
     // @ts-expect-error: ignore param
-    await this.send("Emulation.setEmulatedMedia", {type: "screen"});
+    await this.send("Emulation.setEmulatedMedia", { type: "screen" });
 
     // @ts-expect-error: ignore param
-    const resp = await this.send("Page.printToPDF", {printBackground: true});
+    const resp = await this.send("Page.printToPDF", { printBackground: true });
 
     // @ts-expect-error: ignore param
-    await this.send("Emulation.setEmulatedMedia", {type: ""});
+    await this.send("Emulation.setEmulatedMedia", { type: "" });
 
     const payload = Buffer.from(resp.data, "base64");
     const mime = "application/pdf";
@@ -955,35 +960,40 @@ class Recorder {
       statusText: "OK",
       pageId: pageInfo.id,
       mime,
-      respHeaders: {"Content-Type": mime, "Content-Length": payload.length + ""},
+      respHeaders: {
+        "Content-Type": mime,
+        "Content-Length": payload.length + "",
+      },
       reqHeaders: {},
       payload,
-      extraOpts: {resource: true},
+      extraOpts: { resource: true },
     };
 
-    console.log("pdf", payload.length);
-
     // @ts-expect-error - TS2339 - Property '_doAddResource' does not exist on type 'Recorder'.
     await this._doAddResource(fullData);
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   async saveScreenshot(pageInfo: any) {
-
     // View Screenshot
     const width = 1920;
     const height = 1080;
 
     // @ts-expect-error: ignore param
-    await this.send("Emulation.setDeviceMetricsOverride", {width, height, deviceScaleFactor: 0, mobile: false});
+    await this.send("Emulation.setDeviceMetricsOverride", {
+      width,
+      height,
+      deviceScaleFactor: 0,
+      mobile: false,
+    });
     // @ts-expect-error: ignore param
-    const resp = await this.send("Page.captureScreenshot", {format: "png"});
+    const resp = await this.send("Page.captureScreenshot", { format: "png" });
 
     const payload = Buffer.from(resp.data, "base64");
-    const blob = new Blob([payload], {type: "image/png"});
+    const blob = new Blob([payload], { type: "image/png" });
 
     await this.send("Emulation.clearDeviceMetricsOverride");
-    
+
     const mime = "image/png";
 
     const fullData = {
@@ -993,35 +1003,44 @@ class Recorder {
       statusText: "OK",
       pageId: pageInfo.id,
       mime,
-      respHeaders: {"Content-Type": mime, "Content-Length": payload.length + ""},
+      respHeaders: {
+        "Content-Type": mime,
+        "Content-Length": payload.length + "",
+      },
       reqHeaders: {},
       payload,
-      extraOpts: {resource: true},
+      extraOpts: { resource: true },
     };
 
     const thumbWidth = 640;
     const thumbHeight = 360;
 
-    const bitmap = await self.createImageBitmap(blob, {resizeWidth: thumbWidth, resizeHeight: thumbHeight});
-
+    const bitmap = await self.createImageBitmap(blob, {
+      resizeWidth: thumbWidth,
+      resizeHeight: thumbHeight,
+    });
+
     const canvas = new OffscreenCanvas(thumbWidth, thumbWidth);
     const context = canvas.getContext("bitmaprenderer")!;
     context.transferFromImageBitmap(bitmap);
 
-    const resizedBlob = await canvas.convertToBlob({type: "image/png"});
+    const resizedBlob = await canvas.convertToBlob({ type: "image/png" });
 
     const thumbPayload = new Uint8Array(await resizedBlob.arrayBuffer());
 
-    const thumbData = {...fullData,
+    const thumbData = {
+      ...fullData,
       url: "urn:thumbnail:" + pageInfo.url,
-      respHeaders: {"Content-Type": mime, "Content-Length": thumbPayload.length + ""},
-      payload: thumbPayload
+      respHeaders: {
+        "Content-Type": mime,
+        "Content-Length": thumbPayload.length + "",
+      },
+      payload: thumbPayload,
     };
-    
+
     // @ts-expect-error - TS2339 - Property '_doAddResource' does not exist on type 'Recorder'.
     await this._doAddResource(fullData);
 
-
     // @ts-expect-error - TS2339 - Property '_doAddResource' does not exist on type 'Recorder'.
     await this._doAddResource(thumbData);
   }
@@ -1470,12 +1489,19 @@ class Recorder {
       case "text/javascript":
       case "application/javascript":
       case "application/x-javascript": {
-        const rw = getCustomRewriter(url, ct === "text/html");
+        const rw = getCustomRewriter(
+          url,
+          ct === "text/html" && this.disableMSE,
+        );
 
         if (rw) {
           string = payload.toString();
           newString = rw.rewrite(string, { save: extraOpts });
         }
+
+        if (this.disableMSE) {
+          extraOpts.disableMSE = 1;
+        }
       }
     }
 

src/requestresponseinfo.ts

@@ -1,4 +1,5 @@
 import { getCustomRewriter, getStatusText } from "@webrecorder/wabac";
+import { type ExtraOpts } from "@webrecorder/wabac/swlib";
 
 import { postToGetUrl } from "warcio";
 
@@ -16,7 +17,7 @@ const encoder = new TextEncoder();
 
 // ===========================================================================
 class RequestResponseInfo {
-  extraOpts: Record<string, string>;
+  extraOpts: ExtraOpts;
 
   // @ts-expect-error - TS7006 - Parameter 'requestId' implicitly has an 'any' type.
   constructor(requestId) {
@@ -197,7 +198,6 @@ class RequestResponseInfo {
         "compliant"
           ? "1"
           : "0";
-      // @ts-expect-error - TS2339 - Property 'extraOpts' does not exist on type 'RequestResponseInfo'.
       this.extraOpts.cert = { issuer, ctc };
     }
   }