additional fixes:

- embed: support configuring custom proxyPrefix
- electron app: fix opening links in new window
- electron app: fix preload page build

Author: ikreymer

package.json

@@ -23,7 +23,7 @@
     "node-fetch": "2.6.7",
     "pdfjs-dist": "2.2.228",
     "pretty-bytes": "^5.6.0",
-    "replaywebpage": "^2.2.0-beta.4",
+    "replaywebpage": "^2.2.0-beta.5",
     "stream-browserify": "^3.0.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "unused-filename": "^4.0.1",

src/electron/app-popup.ts

@@ -4,23 +4,14 @@ import { RecPopup } from "../popup";
 import { CollectionLoader } from "@webrecorder/wabac/swlib";
 import { listAllMsg } from "../utils";
 import { setLocalOption } from "../localstorage";
+import { type PropertyValues } from "lit";
 
 // ===========================================================================
 class AppRecPopup extends RecPopup {
-  constructor() {
-    super();
-
-    // @ts-expect-error - TS2339 - Property 'collLoader' does not exist on type 'AppRecPopup'.
-    this.collLoader = new CollectionLoader();
-
-    //this.tabId = 0;//window.location.hash && Number(window.location.hash.slice(1));
-
-    // @ts-expect-error - TS2339 - Property 'allowCreate' does not exist on type 'AppRecPopup'.
-    this.allowCreate = false;
-
-    // @ts-expect-error - TS2339 - Property 'msg' does not exist on type 'AppRecPopup'.
-    this.msg = null;
-  }
+  collLoader = new CollectionLoader();
+  allowCreated = false;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  msg: any = null;
 
   static get properties() {
     return {
@@ -29,22 +20,18 @@ class AppRecPopup extends RecPopup {
     };
   }
 
-  // @ts-expect-error - TS2416 - Property 'firstUpdated' in type 'AppRecPopup' is not assignable to the same property in base type 'RecPopup'.
-  firstUpdated() {
-    super.firstUpdated();
-
-    // @ts-expect-error - TS2339 - Property 'collLoader' does not exist on type 'AppRecPopup'.
+  firstUpdated() : Promise<void> {
     listAllMsg(this.collLoader).then((msg) => {
       this.onMessage(msg);
     });
+
+    return super.firstUpdated()
   }
 
-  // @ts-expect-error - TS7006 - Parameter 'changedProperties' implicitly has an 'any' type.
-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has("msg")) {
-      // @ts-expect-error - TS2339 - Property 'msg' does not exist on type 'AppRecPopup'.
+    if (changedProperties.has("msg") && this.msg) {
       this.onMessage(this.msg);
     }
   }
@@ -68,12 +55,10 @@ class AppRecPopup extends RecPopup {
 
   // @ts-expect-error - TS7006 - Parameter 'message' implicitly has an 'any' type.
   async makeNewColl(message) {
-    // @ts-expect-error - TS2339 - Property 'collLoader' does not exist on type 'AppRecPopup'.
     const newColl = await this.collLoader.initNewColl({ title: message.title });
 
     await setLocalOption("defaultCollId", newColl.name);
 
-    // @ts-expect-error - TS2339 - Property 'collLoader' does not exist on type 'AppRecPopup'.
     const respMsg = await listAllMsg(this.collLoader);
 
     this.onMessage(respMsg);

src/electron/electron-recorder-app.ts

@@ -1,6 +1,6 @@
 /*eslint-env node */
 
-import { app, session, BrowserWindow, ipcMain, dialog } from "electron";
+import { app, session, BrowserWindow, ipcMain, dialog, type HandlerDetails, WebContents, WindowOpenHandlerResponse } from "electron";
 import { ElectronRecorder } from "./electron-recorder";
 
 import {
@@ -176,14 +176,11 @@ class ElectronRecorderApp extends ElectronReplayApp {
   }
 
   createRecordWindow({
-    // @ts-expect-error - TS2525 - Initializer provides no value for this binding element and the binding element has no default value.
-    url,
+    url = "",
     collId = "",
     startRec = true,
     autorun = false,
   } = {}) {
-    console.log("start rec window: " + url);
-
     const recWindow = new BrowserWindow({
       width: this.screenSize.width,
       height: this.screenSize.height,
@@ -218,7 +215,7 @@ class ElectronRecorderApp extends ElectronReplayApp {
     startRec,
     // @ts-expect-error - TS7006 - Parameter 'autorun' implicitly has an 'any' type.
     autorun,
-    popupView = null,
+    //popupView = null,
   ) {
     const id = recWebContents.id;
 
@@ -229,7 +226,7 @@ class ElectronRecorderApp extends ElectronReplayApp {
       recWindow,
       collId,
       autorun,
-      popup: popupView,
+      popup: null,
       staticPrefix: this.staticContentPath,
       // @ts-expect-error - TS2339 - Property 'userAgent' does not exist on type 'ElectronRecorderApp'.
       userAgent: this.userAgent,
@@ -245,20 +242,17 @@ class ElectronRecorderApp extends ElectronReplayApp {
       });
     });
 
-    const newWinContents = popupView
-      ? // @ts-expect-error - TS2339 - Property 'webContents' does not exist on type 'never'.
-        popupView.webContents
-      : recWindow.webContents;
+    const newWinContents = recWindow.webContents;
 
-    // @ts-expect-error - TS7006 - Parameter 'event' implicitly has an 'any' type. | TS7006 - Parameter 'url' implicitly has an 'any' type.
-    newWinContents.on("new-window", (event, url) => {
-      event.preventDefault();
+    newWinContents.setWindowOpenHandler((details: HandlerDetails) => {
+      const { url } = details;
       if (url.startsWith(STATIC_PREFIX)) {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        this.mainWindow.loadURL(url);
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        this.mainWindow.show();
+        this.mainWindow!.loadURL(url);
+        this.mainWindow!.show();
+        return { action: 'deny' };
       }
+
+      return { action: 'allow' };
     });
 
     ipcMain.on("popup-msg-" + id, async (event, msg) => {
@@ -278,37 +272,17 @@ class ElectronRecorderApp extends ElectronReplayApp {
       }
     });
 
-    recWebContents.on(
-      "new-window",
-      (
-        // @ts-expect-error - TS7006 - Parameter 'event' implicitly has an 'any' type.
-        event,
-        // @ts-expect-error - TS7006 - Parameter 'url' implicitly has an 'any' type.
-        url,
-        // @ts-expect-error - TS7006 - Parameter 'frameName' implicitly has an 'any' type.
-        frameName,
-        // @ts-expect-error - TS7006 - Parameter 'disposition' implicitly has an 'any' type.
-        disposition,
-        // @ts-expect-error - TS7006 - Parameter 'options' implicitly has an 'any' type.
-        options,
-        // @ts-expect-error - TS7006 - Parameter 'additionalFeatures' implicitly has an 'any' type.
-        additionalFeatures,
-        // @ts-expect-error - TS7006 - Parameter 'referrer' implicitly has an 'any' type.
-        referrer,
-      ) => {
-        event.preventDefault();
-        event.newGuest = this.createRecordWindow({ url, collId, startRec });
-        console.log(
-          "new-window",
-          url,
-          frameName,
-          disposition,
-          options,
-          additionalFeatures,
-          referrer,
-        );
-      },
-    );
+    recWebContents.setWindowOpenHandler((details: HandlerDetails) : WindowOpenHandlerResponse => {
+      const { url } = details;
+      return {
+        action: "allow",
+        outlivesOpener: true,
+        createWindow: () => {
+          const win = this.createRecordWindow({ url, collId, startRec });
+          return win.webContents;
+        }
+      }
+    });
 
     recWebContents.on("destroyed", () => {
       // @ts-expect-error - TS2339 - Property 'recorders' does not exist on type 'ElectronRecorderApp'.

src/electron/rec-window.ts

@@ -86,6 +86,8 @@ class RecWindowUI extends LitElement {
       :host {
         width: 100%;
         height: 100%;
+        display: flex;
+        flex-direction: column;
       }
 
       webview {
@@ -333,6 +335,7 @@ class RecWindowUI extends LitElement {
 
   renderWebView() {
     return html` <webview
+      allowpopups=""
       partition="persist:wr"
       @did-start-loading="${
         // @ts-expect-error - TS2339 - Property 'isLoading' does not exist on type 'RecWindowUI'.

src/ui/recordembed.ts

@@ -1,4 +1,3 @@
-import { type PropertyValues } from "lit";
 import { property } from "lit/decorators.js";
 import { Embed, apiPrefix } from "replaywebpage";
 
@@ -77,6 +76,12 @@ export class RecordEmbed extends Embed {
     window.addEventListener("beforeunload", () => {
       this.deleteColl();
     });
+
+    this.customConfig!.archivePrefix = this.archivePrefix;
+    this.customConfig!.isLive = !this.archivePrefix;
+    this.customConfig!.prefix = this.proxyPrefix;
+    this.source = "proxy://" + this.proxyPrefix;
+
     super.firstUpdated();
   }
 
@@ -86,17 +91,6 @@ export class RecordEmbed extends Embed {
     }
   }
 
-  updated(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has("proxyPrefix") && this.customConfig) {
-      this.customConfig.proxyPrefix = this.proxyPrefix;
-    }
-    if (changedProperties.has("archivePrefix") && this.customConfig) {
-      this.customConfig.archivePrefix = this.archivePrefix;
-      this.customConfig.isLive = !this.archivePrefix;
-    }
-    super.updated(changedProperties);
-  }
-
   getDownloadUrl() {
     return `${apiPrefix}/c/${this.coll}/dl?format=wacz&pages=all`;
   }

webpack.config.js

@@ -68,7 +68,6 @@ const optimization = {
 const resolve = {
   extensions: [".ts", ".js"],
   plugins: [new TsconfigPathsPlugin()],
-  fallback: {"path": false, "fs": false}
 };
 
 // ===========================================================================
@@ -109,6 +108,7 @@ const electronPreloadConfig = (/*env, argv*/) => {
     mode: "production",
     entry: {
       preload: "./src/electron/electron-rec-preload.ts",
+      "rec-preload": "./src/electron/rec-preload.ts",
     },
     optimization,
     output: {
@@ -236,7 +236,6 @@ const extensionWebConfig = (env, argv) => {
 const electronWebConfig = (env, argv) => {
   const entry = {
     "rec-window": "./src/electron/rec-window.ts",
-    "rec-preload": "./src/electron/rec-preload.ts",
   };
 
   const copy = [
@@ -245,8 +244,6 @@ const electronWebConfig = (env, argv) => {
     { from: "src/electron/rec-window.html", to: "" },
   ];
 
-  const target = "web";
-
   return sharedBuild(DIST_ELECTRON, { copy, entry }, argv);
 };
 

yarn.lock

@@ -6786,10 +6786,10 @@ repeat-string@^1.6.1:
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
 
-replaywebpage@^2.2.0-beta.4:
-  version "2.2.0-beta.4"
-  resolved "https://registry.yarnpkg.com/replaywebpage/-/replaywebpage-2.2.0-beta.4.tgz#b01cd911ad3c3755637acaea37a9c0ba62cc5204"
-  integrity sha512-588xkIL2eu3eNWkQ4FymK3FeZ6um1wp3c05BKFvoUDuB7JmU2vpB3DFjsUKvMd6jeVG0ZVG+a4YH546iflas5A==
+replaywebpage@^2.2.0-beta.5:
+  version "2.2.0-beta.5"
+  resolved "https://registry.yarnpkg.com/replaywebpage/-/replaywebpage-2.2.0-beta.5.tgz#40feb2a383c843da02e88600820f1430c6817103"
+  integrity sha512-VlOvKwDUUzdAh29+pkweloWyUZTpLbasE+5cgiAWcO1sXDbOioGGEldPeacbp40/luNpYPSZA+IhIonEPQegDQ==
   dependencies:
     "@fortawesome/fontawesome-free" "^5.15.4"
     "@shoelace-style/shoelace" "~2.15.1"