Archive verification info + Embed improvements + Embed Receipts UI (#125)

info panel verification/integrity additions, (fixes on #113)
- info panel: display number of hashes verified valid (and invalid), observer domain (if any), and certificate fingerprint, creation software, and package digest
- info: ensure replayTS is updated, not just replayUrl, to ensure correct stats

404 page: improved formatting on 404 page (via wabac.js)

embeds:
- new embed 'replay-with-info mode, displays replay-only with dropdown showing archival 'receipt, which includes condensed info and verification (hashes valid/invalid, observer domain, cert fingerprint)
- support 'newWindowBase' attribute for specifying base replay URL for opening new window. default: use current url if deepLink enabled, otherwise use https://replayweb.page/
use transparent for embeds
- embed dropdown/receipt styling from @Shrinks99 
- automatically setting noCache and noWebWorker for older browsers (eg. safari < 16)
- add 'hideOffscreen' attribute to enable unloading embed when offscreen

dependencies: update to wabac.js 2.13.0-beta.0

bump version to 1.7.0-beta.0

Embed receipt styling co-authored-by: @Shrinks99

src/coll.js

@@ -24,6 +24,7 @@ import fasMenuV from "@fortawesome/fontawesome-free/svgs/solid/ellipsis-v.svg";
 import fasAngleLeft from "@fortawesome/fontawesome-free/svgs/solid/angle-left.svg";
 import fasAngleRight from "@fortawesome/fontawesome-free/svgs/solid/angle-right.svg";
 
+import { RWPEmbedReceipt } from "./embed-receipt.js";
 import Split from "split.js";
 
 
@@ -61,6 +62,7 @@ class Coll extends LitElement
     };
 
     this.menuActive = false;
+    this.embedDropdownActive = false;
 
     this.hasStory = false;
 
@@ -107,6 +109,8 @@ class Coll extends LitElement
       menuActive: { type: Boolean },
 
       embed: { type: String },
+      embedDropdownActive: { type: Boolean },
+
       editable: { type: Boolean },
       browsable: { type: Boolean },
       clearable: { type: Boolean },
@@ -131,7 +135,7 @@ class Coll extends LitElement
       this.isFullscreen = !!document.fullscreenElement;
     });
 
-    if (this.embed) {
+    if (this.embed && this.loadInfo && this.loadInfo.hideOffscreen) {
       this.observer = new IntersectionObserver((entries/*, observer*/) => {
         this.isVisible = entries[0].isIntersecting;
       });
@@ -289,7 +293,7 @@ class Coll extends LitElement
       this.collInfo.title = this.collInfo.filename;
     }
 
-    if (this.embed === "replayonly") {
+    if (this.embed === "replayonly" || this.embed === "replay-with-info") {
       this.showSidebar = false;
     }
 
@@ -475,6 +479,13 @@ class Coll extends LitElement
       flex: auto;
     }
 
+    rwp-embed-receipt {
+      flex-direction: column;
+      display: flex;
+    }
+
+    ${RWPEmbedReceipt.embedStyles}
+
     ${Coll.replayBarStyles}`;
   }
 
@@ -657,6 +668,7 @@ class Coll extends LitElement
     } else if (this.collInfo) {
       return html`
       ${this.renderLocationBar()}
+      ${this.renderVerifyInfo()}
       <div id="tabContents">
         <div id="contents" class="is-light ${isSidebar ? "sidebar" : (isReplay ? "is-hidden" : "full-pages")}"
              role="${isSidebar ? "complementary" : ""}" aria-label="${isSidebar ? "Browse Contents" : ""}">
@@ -744,7 +756,7 @@ class Coll extends LitElement
   }
 
   renderLocationBar() {
-    if (this.embed === "replayonly") {
+    if (this.embed === "replayonly" || this.embed == "replay-with-info") {
       return "";
     }
 
@@ -880,6 +892,20 @@ class Coll extends LitElement
     </nav><p id="skip-replay-target" tabindex="-1" class="is-sr-only">Skipped</p>`;
   }
 
+  renderVerifyInfo() {
+    if (this.embed !== "replay-with-info") {
+      return "";
+    }
+
+    return html`<rwp-embed-receipt
+            .collInfo=${this.collInfo}
+            url=${this.url}
+            ts=${this.ts}
+            .appLogo=${this.appLogo}
+            >
+            </rwp-embed-receipt>`;
+  }
+
   dragStart() {
     const replay = this.renderRoot.querySelector("wr-coll-replay");
     if (replay) {