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

- add 'replayNotFoundError' field to 'urlchange' (propagating
'archive-not-found' postMessage message 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. (URL not available here)
- Only send one urlchange event per URL change (keep track of change).
- Also ensure multi timestamp change uses replaceHistory to avoid an extra
navigation.
- replay-web-page embed: send rwp-url-change and rwp-page-loading custom events from webcomponent

Fixes #333

src/embed.ts

@@ -11,15 +11,14 @@ import { wrapCss, updateFaviconLinks } from "./misc";
 import { SWManager } from "./swmanager";
 import { property } from "lit/decorators.js";
 import type { FavIconEventDetail } from "./types";
-import type { EmbedReplayData } from "./item";
+import type { EmbedReplayData, EmbedReplayEvent } from "./item";
 
 type IframeMessage = MessageEvent<
-  | ({
-      type: "urlchange";
-    } & EmbedReplayData)
+  | EmbedReplayEvent
   | ({
       type: "favicons";
     } & FavIconEventDetail)
+  | { loading: boolean; type: "page-loading" }
 >;
 
 const scriptSrc =
@@ -136,6 +135,19 @@ class Embed extends LitElement {
           if (this.deepLink) {
             this.handleUrlChangeMessage(event.data);
           }
+          this.dispatchEvent(
+            new CustomEvent<EmbedReplayEvent>("rwp-url-change", {
+              detail: event.data,
+            }),
+          );
+          break;
+
+        case "page-loading":
+          this.dispatchEvent(
+            new CustomEvent<{ loading: boolean }>("rwp-page-loading", {
+              detail: event.data,
+            }),
+          );
           break;
 
         case "favicons":