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

CHANGES.md

@@ -1,5 +1,14 @@
 ## CHANGES
 
+v1.7.0 Beta 0
+- UI: Support showing WACZ verification stats on info tab, showing hashes verified, observer domain (or creation software), and certificate fingerprint, and WACZ package digest
+- Embed UI: Add `replay-with-info` embed mode which provides an information dropdown above replay, including verification info and link to download.
+- Embed UI: Add `hideOffscreen` attribute to enable hiding embed when offscreen (previously always enabled).
+- Embeds: add `newWindowBase" for configuring base replay for loading pages in new windows (default: https://replayweb.page/ or current page with deep links)
+- Embeds: Set `noCache` and `noWebWorker` automatically if needed based on browser features (eg. Safari)
+- UI: improved formatting on 404 not found page.
+- Dependencies: update to wabac.js 2.13.0 to support verification, latest wombat
+
 v1.6.5
 - Loading: Don't ignore hashtag, eg. #.wacz to specify file type when loading (via wabac.js)
 - Documentation: Update embedding guide to mention self-hosting of embed scripts

Gemfile.lock

@@ -1,67 +1,74 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.0)
+    addressable (2.8.1)
-      public_suffix (>= 2.0.2, < 5.0)
+      public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.6)
+    concurrent-ruby (1.1.10)
-    em-websocket (0.5.1)
+    em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
+      http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.13.1)
+    ffi (1.15.5)
     forwardable-extended (2.6.0)
-    http_parser.rb (0.6.0)
+    http_parser.rb (0.8.0)
-    i18n (0.9.5)
+    i18n (1.12.0)
       concurrent-ruby (~> 1.0)
-    jekyll (3.8.7)
+    jekyll (4.2.2)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
-      i18n (~> 0.7)
+      i18n (~> 1.0)
-      jekyll-sass-converter (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 1.14)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (~> 0.3.3)
+      mercenary (~> 0.4.0)
       pathutil (~> 0.9)
-      rouge (>= 1.7, < 4)
+      rouge (~> 3.0)
       safe_yaml (~> 1.0)
-    jekyll-remote-theme (0.4.1)
+      terminal-table (~> 2.0)
+    jekyll-remote-theme (0.4.3)
       addressable (~> 2.0)
       jekyll (>= 3.5, < 5.0)
-      rubyzip (>= 1.3.0)
+      jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
-    jekyll-sass-converter (1.5.2)
+      rubyzip (>= 1.3.0, < 3.0)
-      sass (~> 3.4)
+    jekyll-sass-converter (2.2.0)
-    jekyll-seo-tag (2.6.1)
+      sassc (> 2.0.1, < 3.0)
-      jekyll (>= 3.3, < 5.0)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    just-the-docs (0.2.7)
+    just-the-docs (0.3.3)
-      jekyll (~> 3.8.5)
+      jekyll (>= 3.8.5)
       jekyll-seo-tag (~> 2.0)
-      rake (~> 12.3.1)
+      rake (>= 12.3.1, < 13.1.0)
-    kramdown (1.17.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
     liquid (4.0.3)
-    listen (3.2.1)
+    listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.3.6)
+    mercenary (0.4.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (4.0.6)
+    public_suffix (5.0.0)
-    rake (12.3.3)
+    rake (13.0.6)
-    rb-fsevent (0.10.4)
+    rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rouge (3.19.0)
+    rexml (3.2.5)
-    rubyzip (2.3.0)
+    rouge (3.30.0)
+    rubyzip (2.3.2)
     safe_yaml (1.0.5)
-    sass (3.7.4)
+    sassc (2.4.0)
-      sass-listen (~> 4.0.0)
+      ffi (~> 1.9)
-    sass-listen (4.0.0)
+    terminal-table (2.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
+      unicode-display_width (~> 1.1, >= 1.1.1)
-      rb-inotify (~> 0.9, >= 0.9.7)
+    unicode-display_width (1.8.0)
 
 PLATFORMS
   ruby
@@ -71,4 +78,4 @@ DEPENDENCIES
   just-the-docs
 
 BUNDLED WITH
-   2.1.4
+   2.2.27

_data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.6.5",
+  "version": "1.7.0-beta.0",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -9,7 +9,7 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
-    "@webrecorder/wabac": "^2.12.5",
+    "@webrecorder/wabac": "^2.13.0-beta.0",
     "bulma": "^0.9.3",
     "electron-log": "^4.4.1",
     "electron-updater": "^4.3.9",

assets/chevron-double-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+  <path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+</svg>

assets/chevron-double-up.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z"/>
+  <path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
+</svg>

assets/globe.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
+  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
+</svg>

assets/main.scss

@@ -113,7 +113,7 @@ a:focus {
 
 // Add html and body styles to :host for webcomponents
 :host {
-  background-color: $body-background-color;
+  //background-color: $body-background-color;
   font-size: $body-size;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;

docs/embedding.md

@@ -101,6 +101,8 @@ The `<replay-web-page>` tag is a web component that supports a number of additio
 | `noSandbox`  | if set, don't wrap iframe in `sandbox`. Used as extra precaution to avoid escaping iframe, but prevents PDFs from loading in embed archive. Set for archives of known/trusted sites. |
 | `noWebWorker`| if set, will not use Web Worker for loading, only Service Worker. May be useful for certain loading edge cases. |
 | `noCache`    | if set, will not cache any loaded content HTTP responses locally, always loading from original source. |
+| `hideOffscreen` | if set, will unload the embed when it is not visible and reload when scrolled into view. Useful if multiple embeds per-page to avoid loading all at once. |
+| `newWindowBase` | set base replay URL loaded when a page opens a new window, defaults to `https://replayweb.page/` if `deepLink` not enabled, otherwise, to current page with new link. |
 
 
 ### Versioning

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.6.5",
+  "version": "1.7.0-beta.0",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -9,7 +9,7 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
-    "@webrecorder/wabac": "^2.12.5",
+    "@webrecorder/wabac": "^2.13.0-beta.0",
     "bulma": "^0.9.3",
     "electron-log": "^4.4.1",
     "electron-updater": "^4.3.9",

src/appmain.js

@@ -351,10 +351,13 @@ class ReplayWebApp extends LitElement
       this.showAbout = true;
     }
 
-    if (this.pageParams.get("config")) {
+    if (this.pageParams.has("embed")) {
       if (!this.loadInfo) {
         this.loadInfo = {};
       }
+    }
+
+    if (this.pageParams.get("config")) {
       try {
         this.loadInfo.extraConfig = JSON.parse(this.pageParams.get("config"));
       } catch (e) {
@@ -362,38 +365,33 @@ class ReplayWebApp extends LitElement
       }
     }
 
+    if (this.pageParams.get("baseUrlSourcePrefix")) {
+      this.loadInfo.extraConfig = this.loadInfo.extraConfig || {};
+      this.loadInfo.extraConfig.baseUrlSourcePrefix = this.pageParams.get("baseUrlSourcePrefix");
+    }
+
     if (this.pageParams.get("basePageUrl")) {
-      if (!this.loadInfo) {
+      this.loadInfo.extraConfig = this.loadInfo.extraConfig || {};
-        this.loadInfo = {extraConfig: {}};
-      }
-      if (!this.loadInfo.extraConfig) {
-        this.loadInfo.extraConfig = {};
-      }
       this.loadInfo.extraConfig.baseUrl = this.pageParams.get("basePageUrl");
     }
 
     if (this.pageParams.get("customColl")) {
-      if (!this.loadInfo) {
-        this.loadInfo = {};
-      }
       this.loadInfo.customColl = this.pageParams.get("customColl");
     }
 
     if (this.pageParams.get("noWebWorker") === "1") {
-      if (!this.loadInfo) {
-        this.loadInfo = {};
-      }
       this.loadInfo.noWebWorker = true;
     }
 
 
     if (this.pageParams.get("noCache") === "1") {
-      if (!this.loadInfo) {
-        this.loadInfo = {};
-      }
       this.loadInfo.noCache = true;
     }
 
+    if (this.pageParams.get("hideOffscreen") === "1") {
+      this.loadInfo.hideOffscreen = true;
+    }
+
     if (IS_APP && this.sourceUrl.startsWith("file://")) {
       // eslint-disable-next-line no-undef
       const url = new URL(__APP_FILE_SERVE_PREFIX__);

src/coll-index.js

@@ -404,26 +404,8 @@ class CollInfo extends LitElement
     `;
   }
 
-  render() {
+  renderSource(coll) {
-    const coll = this.coll;
-    const detailed = this.detailed;
-
     return html`
-      <div class="columns">
-        <div class="column col-title is-4">
-          <span class="subtitle has-text-weight-bold">
-            ${detailed ? html`
-            ${coll.title || coll.filename}
-            ` : html`
-            <a href="?source=${encodeURIComponent(coll.sourceUrl)}">${coll.title || coll.filename}</a>`}
-          </span>
-        </div>
-        ${detailed && coll.desc ? html`
-          <div class="column">
-            <p class="minihead">Description</p>
-            ${coll.desc}
-          </div>` : html`
-        `}
   <div class="column is-4">
     <span class="source-text"><p class="minihead">Source</p>
     ${coll.sourceUrl && (coll.sourceUrl.startsWith("http://") || coll.sourceUrl.startsWith("https://")) ? html`
@@ -435,13 +417,75 @@ class CollInfo extends LitElement
     ${coll.sourceUrl && coll.sourceUrl.startsWith("googledrive://") ? html`
       <p><i>(${coll.filename})</i></p>` : ""}
   </div>
-        ${detailed ? html`
-        <div class="column"><p class="minihead">Filename</p>${coll.filename}</div>` : html``}
-
   <div class="column is-2"><p class="minihead">Date Loaded</p>${coll.ctime ? new Date(coll.ctime).toLocaleString() : ""}</div>
   <div class="column is-2"><p class="minihead">Total Size</p>${prettyBytes(Number(coll.size || 0))}</div>
+  `;
+  }
+
+  renderSummaryView() {
+    const coll = this.coll;
+
+    return html`
+    <div class="columns">
+      <div class="column col-title is-4">
+        <span class="subtitle has-text-weight-bold">
+          <a href="?source=${encodeURIComponent(coll.sourceUrl)}">${coll.title || coll.filename}</a>
+        </span>
+      </div>
+      ${this.renderSource(coll)}
+    </div>`;
+  }
+
+  renderDetailed() {
+    const coll = this.coll;
+
+    let {numValid, numInvalid, domain, certFingerprint, datapackageHash, software} = this.coll.verify || {};
+    numValid = numValid || 0;
+    numInvalid = numInvalid || 0;
+
+    const certFingerprintUrl = certFingerprint ? `https://search.censys.io/certificates/${certFingerprint}` : "";
+
+    return html`
+      <div class="columns">
+        <div class="column col-title is-4">
+          <span class="subtitle has-text-weight-bold">
+            ${coll.title || coll.filename}
+          </span>
+        </div>
+        ${coll.desc ? html`
+          <div class="column">
+            <p class="minihead">Description</p>
+            ${coll.desc}
+          </div>` : html`
+        `}
+        <div class="column"><p class="minihead">Filename</p>${coll.filename}</div>
+        ${this.renderSource(coll)}
+
+        ${domain ? html`
+        <div class="column">
+          <p class="minihead">Observed By</p>
+          <p>${domain}</p>
+          ${certFingerprintUrl ? html`<span><a target="_blank" href="${certFingerprintUrl}">View Certificate</a></span>` : ""}
+        </div>
+        ` : software ? html`
+        <div class="column">
+          <p class="minihead">Created With</p>
+          ${software || "Unknown"}
+        </div>
+        ` : ""}
+
+        <div class="column">
+          <p class="minihead">Validation</p>
+          ${numValid > 0 || numInvalid > 0 ? html`
+          <p>${numValid} hashes verified${numInvalid ? html`, ${numInvalid} invalid` : ""}</p>` : html`
+          Not Available`}
+        </div>
+
+        <div class="column">
+          <p class="minihead">Package Hash</p>
+        ${datapackageHash || "Not Available"}
+        </div>
 
-        ${detailed ? html`
         <div class="column">
           <p class="minihead">Loading Mode</p>
           ${coll.onDemand ? "Download On-Demand" : "Fully Local"}
@@ -450,22 +494,12 @@ class CollInfo extends LitElement
           <p class="minihead">Collection id</p>
           ${coll.coll}
         </div>
-        ` : html``}
-
       </div>`;
   }
 
-  // purge + delete buttons
+  render() {
-  //
+    return this.detailed ? this.renderDetailed() : this.renderSummaryView();
-  // <div class="column">
+  }
-  //   <button @click="${(e) => this.onPurge(true)}" class="button">Purge Cache + Full Reload</button>
-  // </div>
-
-  // ${this.canDelete ? html`
-  // <div class="column">
-  //   <button @click="${(e) => this.onPurge(false)}" class="button is-outlined is-danger">Delete Archive</button>
-  // </div>` : html``}
-  //
 
   onCopy(event, sourceUrl) {
     event.preventDefault();

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) {

src/embed-receipt.js

@@ -0,0 +1,268 @@
+
+import btGlobe from "../assets/globe.svg";
+import btAngleDoubleDown from "../assets/chevron-double-down.svg";
+import btAngleDoubleUp from "../assets/chevron-double-up.svg";
+import fabGithub from "@fortawesome/fontawesome-free/svgs/brands/github.svg";
+import fasDownload from "@fortawesome/fontawesome-free/svgs/solid/download.svg";
+
+import {clickOnSpacebarPress} from "./misc";
+
+import { LitElement, html, css } from "lit";
+import { tsToDate } from "./pageutils";
+import prettyBytes from "pretty-bytes";
+
+
+// ===========================================================================
+export class RWPEmbedReceipt extends LitElement
+{
+  constructor() {
+    super();
+    this.collInfo = null;
+    this.appLogo = null;
+    this.ts = null;
+    this.url = null;
+    this.active = false;
+  }
+
+  get renderRoot() {
+    return this;
+  }
+
+  static get properties() {
+    return {
+      collInfo: {type: Object},
+      appLogo: {type: Object},
+      url: {type: String},
+      ts: {type: String},
+
+      active: {type: Boolean }
+    };
+  }
+
+  static get embedStyles() {
+    return css`
+    rwp-embed-receipt {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .icon {
+      vertical-align: text-top;
+    }
+
+    #embed-dropdown {
+      max-height: calc(100vh - 50px);
+      padding-top: 0;
+      margin-top: -0.5rem;
+      display: block;
+      z-index: 1;
+      pointer-events: none;
+      transition: all .3s linear;
+      transform-origin: left top;
+      transform: scaleY(0);
+      transition: all 300ms cubic-bezier(0.15, 0, 0.1, 1);
+      filter: drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.15));
+    }
+
+    .dropdown.is-active #embed-dropdown {
+      transform: scaleY(1);
+    }
+
+    .embed-info-container {
+      width: 100%;
+      display: flex !important;
+      justify-content: center;
+    }
+
+    button.embed-info {
+      padding: 0;
+      background-color: white;
+      justify-content: space-between;
+      max-width: 40rem;
+      width: calc(100% - 1rem);
+      height: 42px;
+      border-color: #D1D5DA;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 999px;
+      display: flex;
+      align-items: center;
+      text-overflow: ellipsis;
+      filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15));
+      transition-duration: 50ms;
+      transition-timing-function: ease-out;
+      cursor: pointer;
+      z-index: 2
+    }
+
+    button.embed-info:active {
+      color: initial;
+    }
+
+    button.embed-info:hover {
+      filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
+      transform: scale(1.01);
+    }
+
+    button.embed-info:hover:active {
+      transform: translateY(0.25rem);
+    }
+
+    .embed-info-buttontext {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;  
+      flex-grow: 1;
+      text-align: start;
+      font-size: 13px;
+    }
+
+    .embed-info-drop {
+      font-size: 14px;
+      padding: 1rem;
+      padding-top: 2rem;
+      max-width: 38rem;
+      max-height: 42rem;
+      width: calc(100% - 2rem);
+      border-top-right-radius: 0px;
+      border-top-left-radius: 0px;
+      pointer-events: auto;
+      overflow-y: auto;
+    }
+
+    .embed-info-drop > p {
+      font-size: 14px;
+      color: black;
+    }
+
+    .embed-info-drop > h2 {
+      margin-bottom: 0.25rem;
+      font-size: 16px;
+      font-weight: bold;
+      text-transform: none;
+      letter-spacing: 0;
+      color: #24292E;
+    }
+
+    .embed-info-drop-statscontainer > h3 {
+      font-size: 12px;
+      color: #394146;
+    }
+
+    .embed-info-drop-statscontainer > p {
+      font-size: 14px;
+      color: black;
+    }
+
+    .embed-info-drop a {
+      word-break: break-all;
+    }
+
+    .embed-info-drop .show-hash {
+      word-break: break-all;
+      font-family: monospace;
+    }
+
+    .embed-globe {
+      margin: 0.25rem;
+      padding: 7px;
+      background-color: #0366D6;
+      border-radius: 9999px;
+      color: white;
+      border-width: 1px;
+      border-color: #D1D5DA;
+      border-style: solid;
+      line-height: 0.5em;
+    }`;
+  }
+
+  render() {
+    let {numValid, numInvalid, domain, certFingerprint, datapackageHash, software} = this.collInfo.verify || {};
+    numValid = numValid || 0;
+    numInvalid = numInvalid || 0;
+
+    const sourceUrl = this.collInfo.sourceUrl;
+
+    const certFingerprintUrl = certFingerprint ? `https://search.censys.io/certificates/${certFingerprint}` : "";
+
+    const dateStr = tsToDate(this.ts).toLocaleString();
+
+    return html`
+    <div class="dropdown mb-4 ${this.active ? "is-active" : ""}">
+      <div class="dropdown-trigger embed-info-container">
+        <button class="embed-info is-small is-rounded mt-4" aria-haspopup="true" aria-controls="embed-dropdown" @click="${this.onEmbedDrop}">
+          <fa-icon class="menu-logo mr-2 embed-globe" size="1rem" aria-hidden="true" .svg=${btGlobe}></fa-icon>
+          <span class="embed-info-buttontext">
+            This embed is part of a web archive. Click here to learn more.
+          </span>
+          <span class="icon is-small mr-4 ml-2">
+            <fa-icon title="Toggle" .svg="${this.active ? btAngleDoubleUp : btAngleDoubleDown}" aria-hidden="true"></fa-icon>
+          </span>
+        </button>
+      </div>
+      <div class="dropdown-menu embed-info-container" id="embed-dropdown" role="menu">
+        <div class="dropdown-content embed-info-drop">
+          <p class="mb-4">
+          Even if the original page goes offline or is changed, the content below will remain unchanged as it is loaded from a web archive.
+          </p>
+          <hr class="dropdown-divider">
+          <h2 mt-4">Technical Information</h2>
+          <div class="embed-info-drop-statscontainer mb-4">
+            <h3>Original URL:</h3>
+            <p><a target="_blank" href="${this.url}">${this.url}</a></p>
+            <h3 class="mt-2">Archived On:</h3>
+            <p>${dateStr}</p>
+            ${domain ? html`
+            <h3 class="mt-2">Observed By:</h3>
+            <p>${domain}</p>
+            ${certFingerprintUrl ?
+    html`<p><a target="_blank" href="${certFingerprintUrl}">View Certificate</a></p>` : ""}
+            ` : software ? html`
+            <h3 class="mt-2">Created With:</h3>
+            <p>${software}</p>` : ""}
+            <h3 class="mt-2">Validation:</h3>
+            ${numValid > 0 || numInvalid > 0 ? html`
+            <p>${numValid} hashes verified${numInvalid ? html`, ${numInvalid} invalid` : ""}</p>` : html`
+            <p>Not Available</p>
+            `}
+            <h3 class="mt-2">Package Hash:</h3>
+            <p class="show-hash">${datapackageHash}</p>
+            <h3 class="mt-2">Size</h3>
+            <p>${prettyBytes(Number(this.collInfo.size || 0))}</p>
+          </div>
+          ${sourceUrl ? html`
+          <hr class="dropdown-divider">
+          <a href="${sourceUrl}" class="button" @keyup="${clickOnSpacebarPress}">
+            <span class="icon is-small">
+              <fa-icon size="1.0em" class="has-text-grey" aria-hidden="true" .svg="${fasDownload}"></fa-icon>
+            </span>
+            <span>Download Archive</span>
+          </a>
+          <p class="mt-2">This archive can then be viewed directly in your browser by loading it via <a target="_blank" href="https://replayweb.page">replayweb.page</a></p>
+          ` : ""}
+          <p class="is-size-7 is-flex is-justify-content-space-between" style="margin-top: 40px">
+            <span>
+              <a class="has-text-black" target="_blank" href="https://github.com/webrecorder/replayweb.page">
+                <fa-icon class="menu-logo mr-1" size="1.0rem" aria-hidden="true" .svg=${this.appLogo}></fa-icon>
+                Powered by ReplayWeb.page
+              </a>
+            </span>
+            <span>
+              <a class="has-text-black" target="_blank" href="https://github.com/webrecorder/replayweb.page">Source Code
+                <fa-icon class="menu-logo ml-1" size="1.0rem" aria-hidden="true" .svg=${fabGithub}></fa-icon>
+              </a>
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+    `;
+  }
+
+  onEmbedDrop(event) {
+    event.stopPropagation();
+    this.active = !this.active;
+  }
+}
+
+customElements.define("rwp-embed-receipt", RWPEmbedReceipt);

src/embed.js

@@ -10,6 +10,8 @@ var scriptSrc = document.currentScript && document.currentScript.src;
 
 var defaultReplayFile = "";
 
+const DEFAULT_REPLAY_BASE = "https://replayweb.page/";
+
 
 // ===========================================================================
 class Embed extends LitElement
@@ -30,6 +32,7 @@ class Embed extends LitElement
     this.coll = "";
     this.paramString = null;
     this.deepLink = false;
+    this.newWindowBase = "";
     this.swInited = false;
     this.embed = null;
     this.reloadCount = 0;
@@ -72,6 +75,9 @@ class Embed extends LitElement
       noSandbox: { type: Boolean },
       noWebWorker: { type: Boolean },
       noCache: { type: Boolean },
+      hideOffscreen: { type: Boolean },
+
+      newWindowBase: { type: String },
 
       errorMessage: { type: String }
     };
@@ -118,6 +124,23 @@ class Embed extends LitElement
       this.updateFromHash();
       window.addEventListener("hashchange", () => this.updateFromHash());
     }
+
+    this.loadBrowserDefaults();
+  }
+
+  loadBrowserDefaults() {
+    // set defaults for older browsers (eg. Safari < 16) based on recommendations from:
+    // https://lil.law.harvard.edu/blog/2022/09/15/opportunities-and-challenges-of-client-side-playback/
+
+    // likely safari < 16, don't use web workers due to issues with split storage state
+    if (window.GestureEvent !== undefined && window.SharedWorker === undefined ){
+      this.noWebWorker = true;
+    }
+
+    // if no storage manager or estimate, don't cache
+    if (!navigator.storage || !navigator.storage.estimate) {
+      this.noCache = true;
+    }
   }
 
   updateFromHash() {
@@ -173,9 +196,14 @@ class Embed extends LitElement
         customColl: this.coll,
         config,
         basePageUrl: window.location.href.split("#")[0],
+        baseUrlSourcePrefix: this.newWindowBase,
         embed: this.embed,
       };
 
+      if (!this.deepLink && !params.baseUrlSourcePrefix) {
+        params.baseUrlSourcePrefix = DEFAULT_REPLAY_BASE;
+      }
+
       if (this.noWebWorker) {
         params.noWebWorker = "1";
       }
@@ -184,6 +212,10 @@ class Embed extends LitElement
         params.noCache = "1";
       }
 
+      if (this.hideOffscreen) {
+        params.hideOffscreen = "1";
+      }
+
       this.paramString = new URLSearchParams(params).toString();
 
       this.hashString = new URLSearchParams({

src/replay.js

@@ -101,7 +101,8 @@ class Replay extends LitElement
       this.dispatchEvent(new CustomEvent("update-title", {bubbles: true, composed: true, detail}));
     }
 
-    if (this.replayUrl && changedProperties.has("replayUrl")) {
+    if ((this.replayUrl && changedProperties.has("replayUrl")) || 
+        (this.replayTS && changedProperties.has("replayTS"))) {
       const data = {
         url: this.replayUrl,
         ts: this.replayTS,

yarn.lock

@@ -476,6 +476,83 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
+"@peculiar/asn1-cms@^2.2.0", "@peculiar/asn1-cms@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@peculiar/asn1-cms/-/asn1-cms-2.3.1.tgz#8382e56b958770e00111d3c37bfa35a2bc30e236"
+  integrity sha512-zJ4YojOSerCMjU3oGsw8IVzSYcRODW42i5KNJVzQntQRgYPsqe8e3rt4rgymmB+0xreBWeH4X3zI/t8pyT4UJw==
+  dependencies:
+    "@peculiar/asn1-schema" "^2.3.0"
+    "@peculiar/asn1-x509" "^2.3.0"
+    "@peculiar/asn1-x509-attr" "^2.3.0"
+    asn1js "^3.0.5"
+    tslib "^2.4.0"
+
+"@peculiar/asn1-csr@^2.2.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@peculiar/asn1-csr/-/asn1-csr-2.3.0.tgz#d745f96ab2861d465b0fe447b1cd9a31d999c981"
+  integrity sha512-Ss5DibPLHkWgcVheohy6tS4KyWCmtP3dlkxg10ZSfz/3wDj2BCQ4F+fmik4kTUCXZFd6otogXFMn2zc8SlXynQ==
+  dependencies:
+    "@peculiar/asn1-schema" "^2.3.0"
+    "@peculiar/asn1-x509" "^2.3.0"
+    asn1js "^3.0.5"
+    tslib "^2.4.0"
+
+"@peculiar/asn1-ecc@^2.2.0", "@peculiar/asn1-ecc@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@peculiar/asn1-ecc/-/asn1-ecc-2.3.0.tgz#bd64ee2e579df1115ae8fa7fa5ef863cd07c3172"
+  integrity sha512-IUFZ5jyiduvSbXxnw5Y6QMAG1C5NHXqE5+kJePJXcFsEHh5NxdBYNa21kBGdz09Y4b1awCT2NP1YtZPBhFNYqw==
+  dependencies:
+    "@peculiar/asn1-schema" "^2.3.0"
+    "@peculiar/asn1-x509" "^2.3.0"
+    asn1js "^3.0.5"
+    tslib "^2.4.0"
+
+"@peculiar/asn1-pfx@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@peculiar/asn1-pfx/-/asn1-pfx-2.3.1.tgz#07904d27f041b1ba41fde02ab8537d94f7f10d87"
+  integrity sha512-LdlUYml+438C8yBQxMZm0CEvhG2Z0pZsGw8tKZxxSmKX6MdIpj4JQWuDE5ie3jwz7oaMDlUm1LsAwcpPwEUkyA==
+  dependencies:
+    "@peculiar/asn1-cms" "^2.3.1"
+    "@peculiar/asn1-pkcs8" "^2.3.0"
+    "@peculiar/asn1-rsa" "^2.3.0"
+    "@peculiar/asn1-schema" "^2.3.0"
+    asn1js "^3.0.5"
+    tslib "^2.4.0"
+
+"@peculiar/asn1-pkcs8@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@peculiar/asn1-pkcs8/-/asn1-pkcs8-2.3.0.tgz#879f57f4a50fee9ad05dcedd02d40e629d410a82"
+  integrity sha512-WpItuGy5OSVXqetgbekVvJbX0YE02pwhjesQrUkPBy5GamzTX2OeK2+Avxc4TeeiT2s7Y/VD9RZylowmb1ScnQ==
+  dependencies:
+    "@peculiar/asn1-schema" "^2.3.0"
+    "@peculiar/asn1-x509" "^2.3.0"
+    asn1js "^3.0.5"
+    tslib "^2.4.0"
+
+"@peculiar/asn1-pkcs9@^2.2.0":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@peculiar/asn1-pkcs9/-/asn1-pkcs9-2.3.1.tgz#2429dc4d2f17b9e8a34a1651ffb2b780ae8b3a6a"
+  integrity sha512-awUjcCHMCJ1A9LUWo1oxmGdvX2iDbSnm+tuafbf1Q8UrBzN/iIbBjc6V6BhvIF32Jja79xP/N8RyoOaVkoh20w==
+  dependencies:
+    "@peculiar/asn1-cms" "^2.3.1"
+    "@peculiar/asn1-pfx" "^2.3.1"
+    "@peculiar/asn1-pkcs8" "^2.3.0"
+    "@peculiar/asn1-schema" "^2.3.0"
+    "@peculiar/asn1-x509" "^2.3.0"
+    "@peculiar/asn1-x509-attr" "^2.3.0"
+    asn1js "^3.0.5"
+    tslib "^2.4.0"
+
+"@peculiar/asn1-rsa@^2.2.0", "@peculiar/asn1-rsa@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@peculiar/asn1-rsa/-/asn1-rsa-2.3.0.tgz#34f1a68416487fc9e50e9c71dbd057198e568499"
+  integrity sha512-v63dbd1dQnDp6EZYV0/Foi/H9N0j4nTeuXip8Oxy79OyEQ6Vll9bmk6cfhKQdDCxSBYNTdyZiJnwWirpKPrrUw==
+  dependencies:
+    "@peculiar/asn1-schema" "^2.3.0"
+    "@peculiar/asn1-x509" "^2.3.0"
+    asn1js "^3.0.5"
+    tslib "^2.4.0"
+
 "@peculiar/asn1-schema@^2.0.32", "@peculiar/asn1-schema@^2.0.38":
   version "2.0.38"
   resolved "https://registry.yarnpkg.com/@peculiar/asn1-schema/-/asn1-schema-2.0.38.tgz#98b6f12daad275ecd6774dfe31fb62f362900412"
@@ -486,6 +563,36 @@
     pvtsutils "^1.2.0"
     tslib "^2.3.0"
 
+"@peculiar/asn1-schema@^2.2.0", "@peculiar/asn1-schema@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@peculiar/asn1-schema/-/asn1-schema-2.3.0.tgz#5368416eb336138770c692ffc2bab119ee3ae917"
+  integrity sha512-DtNLAG4vmDrdSJFPe7rypkcj597chNQL7u+2dBtYo5mh7VW2+im6ke+O0NVr8W1f4re4C3F71LhoMb0Yxqa48Q==
+  dependencies:
+    asn1js "^3.0.5"
+    pvtsutils "^1.3.2"
+    tslib "^2.4.0"
+
+"@peculiar/asn1-x509-attr@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@peculiar/asn1-x509-attr/-/asn1-x509-attr-2.3.0.tgz#8ad1c09c1b9cd5664354376b9052424cfe4187e8"
+  integrity sha512-oViOaJaqhBM7cFnGAb/VJr8ljp6qOrh6X5WRa7USYcaVz9O4IxYKIaBA8ZbTH2NthRd6HkE++3+nerQguxctdw==
+  dependencies:
+    "@peculiar/asn1-schema" "^2.3.0"
+    "@peculiar/asn1-x509" "^2.3.0"
+    asn1js "^3.0.5"
+    tslib "^2.4.0"
+
+"@peculiar/asn1-x509@^2.2.0", "@peculiar/asn1-x509@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@peculiar/asn1-x509/-/asn1-x509-2.3.0.tgz#edb01b7b023f2cc3843a22ebebda4025ab5297d5"
+  integrity sha512-iDRNPHAx/HLwR9wN5xaHDPifpdSW/bquu+zo/kQXurnxg6KQ1jcZw+4a63uTvrzyGU/hHzDqjalG/sQvV02lAw==
+  dependencies:
+    "@peculiar/asn1-schema" "^2.3.0"
+    asn1js "^3.0.5"
+    ipaddr.js "^2.0.1"
+    pvtsutils "^1.3.2"
+    tslib "^2.4.0"
+
 "@peculiar/json-schema@^1.1.12":
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/@peculiar/json-schema/-/json-schema-1.1.12.tgz#fe61e85259e3b5ba5ad566cb62ca75b3d3cd5339"
@@ -504,6 +611,23 @@
     tslib "^2.2.0"
     webcrypto-core "^1.2.0"
 
+"@peculiar/x509@^1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@peculiar/x509/-/x509-1.8.3.tgz#718b7eff2872ead7407d4dbdf8db51aa0ea55e72"
+  integrity sha512-omZfI3n4eGLS5NLudURzbc0smQ4ePreOPUEk31n1MLaqd2GGb48b4Zw5xjHzHJ0hnPYmZ+NRjqqquXYUYKjMCw==
+  dependencies:
+    "@peculiar/asn1-cms" "^2.2.0"
+    "@peculiar/asn1-csr" "^2.2.0"
+    "@peculiar/asn1-ecc" "^2.2.0"
+    "@peculiar/asn1-pkcs9" "^2.2.0"
+    "@peculiar/asn1-rsa" "^2.2.0"
+    "@peculiar/asn1-schema" "^2.2.0"
+    "@peculiar/asn1-x509" "^2.2.0"
+    pvtsutils "^1.3.2"
+    reflect-metadata "^0.1.13"
+    tslib "^2.4.0"
+    tsyringe "^4.7.0"
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@@ -1000,16 +1124,21 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.5.2.tgz#ea584b637ff63c5a477f6f21604b5a205b72c9ec"
   integrity sha512-vgJ5OLWadI8aKjDlOH3rb+dYyPd2GTZuQC/Tihjct6F9GpXGZINo3Y/IVuZVTM1eDQB+/AOsjPUWH/WySDaXvw==
 
-"@webrecorder/wabac@^2.12.5":
+"@webrecorder/wabac@^2.13.0-beta.0":
-  version "2.12.5"
+  version "2.13.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.12.5.tgz#d876e1907ded4a4ea9ae9855a12a79a0ddd3c3da"
+  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.13.0-beta.0.tgz#79b6c884b74fe328cc48b9b4ff1948bf1b55309c"
-  integrity sha512-m/b7KZlWNYTl/va8Zjo+W26p5kWP0ZLnV04+6wmkAuD9LJLW4hU0LHGgQ3TBXsk3giYL6CHrTvKHCvnu4PeV/Q==
+  integrity sha512-2NwhrtJnFbyseErWplZQiJ/3HN3fWAJsM/aC+Znz3Bn+Z1gWkdVaKu2ah3OaS3sfQZuw2rWqTWvHJYTd/l+ZVA==
   dependencies:
-    "@webrecorder/wombat" "^3.3.7"
+    "@peculiar/asn1-ecc" "^2.3.0"
+    "@peculiar/asn1-schema" "^2.3.0"
+    "@peculiar/x509" "^1.8.3"
+    "@webrecorder/wombat" "^3.3.8"
+    base64-js "^1.5.1"
     brotli "github:foliojs/brotli.js"
     buffer "^6.0.3"
     fast-xml-parser "^3.19.0"
     format-link-header "^3.1.1"
+    hash-wasm "^4.9.0"
     http-status-codes "^2.1.4"
     idb "^6.1.2"
     js-levenshtein "^1.1.6"
@@ -1023,10 +1152,10 @@
     stream-browserify "^3.0.0"
     warcio "^1.5.1"
 
-"@webrecorder/wombat@^3.3.7":
+"@webrecorder/wombat@^3.3.8":
-  version "3.3.7"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@webrecorder/wombat/-/wombat-3.3.7.tgz#269e077efff63650787e12c8c1857c56f2d6ef97"
+  resolved "https://registry.yarnpkg.com/@webrecorder/wombat/-/wombat-3.3.8.tgz#de9d5de46bad8be208a260165c1204b6edf50c9b"
-  integrity sha512-bIghrT8wf+pMRJe88UTUw1rHMxZEK8jgB44SKbUz8Y5YhEgGj3J5ET2cwk9+eEWdlckIAZwITOjvZD+48AVvDQ==
+  integrity sha512-X876dIJTqqIpjf/uDQHFmZ2HzO3Vz2oyZ6XdDUqFSn30OHIMs5N9K8dx2+g1OCRDglpOKo4KnzCs7hTHYFm9RA==
   dependencies:
     warcio "^1.5.1"
 
@@ -1314,6 +1443,15 @@ asn1js@^2.1.1:
   dependencies:
     pvutils latest
 
+asn1js@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/asn1js/-/asn1js-3.0.5.tgz#5ea36820443dbefb51cc7f88a2ebb5b462114f38"
+  integrity sha512-FVnvrKJwpt9LP2lAMl8qZswRNm3T4q9CON+bxldk2iwk3FFpuwhx2FfinyitizWHsVYyaY+y5JzDR0rCMV5yTQ==
+  dependencies:
+    pvtsutils "^1.3.2"
+    pvutils "^1.1.3"
+    tslib "^2.4.0"
+
 assert-plus@1.0.0, assert-plus@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
@@ -3439,6 +3577,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hash-wasm@^4.9.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/hash-wasm/-/hash-wasm-4.9.0.tgz#7e9dcc9f7d6bd0cc802f2a58f24edce999744206"
+  integrity sha512-7SW7ejyfnRxuOc7ptQHSf4LDoZaWOivfzqw+5rpcQku0nHfmicPKE51ra9BiRLAmT8+gGLestr1XroUkqdjL6w==
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
@@ -6450,6 +6593,18 @@ pvtsutils@^1.1.6, pvtsutils@^1.2.0:
   dependencies:
     tslib "^2.2.0"
 
+pvtsutils@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/pvtsutils/-/pvtsutils-1.3.2.tgz#9f8570d132cdd3c27ab7d51a2799239bf8d8d5de"
+  integrity sha512-+Ipe2iNUyrZz+8K/2IOo+kKikdtfhRKzNpQbruF2URmqPtoqAs8g3xS7TJvFF2GcPXjh7DkqMnpVveRFq4PgEQ==
+  dependencies:
+    tslib "^2.4.0"
+
+pvutils@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/pvutils/-/pvutils-1.1.3.tgz#f35fc1d27e7cd3dfbd39c0826d173e806a03f5a3"
+  integrity sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==
+
 pvutils@latest:
   version "1.0.17"
   resolved "https://registry.yarnpkg.com/pvutils/-/pvutils-1.0.17.tgz#ade3c74dfe7178944fe44806626bd2e249d996bf"
@@ -6632,6 +6787,11 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+reflect-metadata@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
+  integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
+
 regexp.prototype.flags@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
@@ -7536,7 +7696,7 @@ truncate-utf8-bytes@^1.0.0:
   dependencies:
     utf8-byte-length "^1.0.1"
 
-tslib@^1.10.0:
+tslib@^1.10.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -7546,6 +7706,18 @@ tslib@^2.0.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
+tsyringe@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/tsyringe/-/tsyringe-4.7.0.tgz#aea0a9d565385deebb6def60cda342b15016f283"
+  integrity sha512-ncFDM1jTLsok4ejMvSW5jN1VGPQD48y2tfAR0pdptWRKYX4bkbqPt92k7KJ5RFJ1KV36JEs/+TMh7I6OUgj74g==
+  dependencies:
+    tslib "^1.9.3"
+
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"