add window message notifications for embeds: (fixes #333)

- propagate 'archive-not-found' (from wabac.js) to embed frame, with url/ts, for 404 pages
- propagate 'page-loading' with loading true/false, to indicate when a page started/finished loading

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@shoelace-style/shoelace": "~2.15.1",
-    "@webrecorder/wabac": "^2.18.3",
+    "@webrecorder/wabac": "github:webrecorder/wabac.js",
     "bulma": "^0.9.3",
     "electron-log": "^4.4.1",
     "electron-updater": "^5.3.0",

src/item.ts

@@ -961,8 +961,7 @@ class Item extends LitElement {
                   ts="${this.tabData.ts || ""}"
                   @coll-tab-nav="${this.onItemTabNav}"
                   id="replay"
-                  @replay-loading="${(e: CustomEvent<{ loading: boolean }>) =>
-                    (this.isLoading = e.detail.loading)}"
+                  @replay-loading="${this.onReplayLoading}"
                   @replay-favicons="${this.onFavIcons}"
                 >
                 </wr-coll-replay>
@@ -1653,6 +1652,19 @@ class Item extends LitElement {
     this.showSidebar = false;
   }
 
+  async onReplayLoading(
+    event: CustomEvent<{ loading: boolean; url: string; ts: string }>,
+  ) {
+    if (
+      this.embed &&
+      window.parent !== window &&
+      this.isLoading !== event.detail.loading
+    ) {
+      window.parent.postMessage({ type: "page-loading", ...event.detail }, "*");
+    }
+    this.isLoading = event.detail.loading;
+  }
+
   async onFavIcons(event: CustomEvent<FavIconEventDetail>) {
     if (this.embed && window.parent !== window) {
       window.parent.postMessage({ type: "favicons", ...event.detail }, "*");

src/replay.ts

@@ -200,6 +200,14 @@ class Replay extends LitElement {
         }
       } else if (event.data.wb_type === "title") {
         this.title = event.data.title;
+      } else if (event.data.wb_type === "archive-not-found") {
+        const { url, ts } = event.data;
+        if (window.parent !== window) {
+          window.parent.postMessage(
+            { type: "archive-not-found", url, ts },
+            "*",
+          );
+        }
       }
     }
   }

yarn.lock

@@ -1009,15 +1009,14 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
   integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
 
-"@webrecorder/wabac@^2.18.3":
-  version "2.18.3"
-  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.18.3.tgz#eda195452a9964e8216fb0676d5da6cc69239dae"
-  integrity sha512-qmNLXky9QHpljt0EyEmcO6L2qFGG63mZbMYKso0MZZLFY3NeUf/ANafq9pWWm1Bw10+zoV6KRtHUin8gropccA==
+"@webrecorder/wabac@github:webrecorder/wabac.js":
+  version "2.18.4"
+  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/977cc505776622cbe05c9f596bb1b5db78be242c"
   dependencies:
     "@peculiar/asn1-ecc" "^2.3.4"
     "@peculiar/asn1-schema" "^2.3.3"
     "@peculiar/x509" "^1.9.2"
-    "@webrecorder/wombat" "^3.7.6"
+    "@webrecorder/wombat" "^3.7.7"
     acorn "^8.10.0"
     auto-js-ipfs "^2.1.1"
     base64-js "^1.5.1"
@@ -1038,10 +1037,10 @@
     stream-browserify "^3.0.0"
     warcio "^2.2.1"
 
-"@webrecorder/wombat@^3.7.6":
-  version "3.7.6"
-  resolved "https://registry.yarnpkg.com/@webrecorder/wombat/-/wombat-3.7.6.tgz#e52a1bcfccd0150517989bc4310a03730a1f74e7"
-  integrity sha512-SA34StdLc+D60Aa8bZ2I+8PLjody1B/j9DmZ2zyXg/EZuPLSG4ec6XvMzq8QYuoGvD+hkjAf0YlUGxmI/viIcw==
+"@webrecorder/wombat@^3.7.7":
+  version "3.7.7"
+  resolved "https://registry.yarnpkg.com/@webrecorder/wombat/-/wombat-3.7.7.tgz#8659876c8ab93d0ce184dd6eb64c923f5662d290"
+  integrity sha512-3KgkhTNFTRnYuLOTiVWOFjMX5hGtJJTgscgqBLgXuIjKD7F0YJIVjZ3JLYVR15LiOz8flu4FZY3wtSf71hcNaA==
   dependencies:
     warcio "^2.2.0"