Support for dynamic page loading for Multi-WACZs (#399)

Support querying pages dynamically via pages endpoint:
- If loaded pages < total pages, load additional pages via /pages
endpoint if canQueryPages is set to true on item
- If query provided, do `/pages?search=...` to search for pages. Use
pagination of 25 pages for now.

WACZ hash:
- if provided, store waczhash per page, and use for thumbnail, favicon
and top-level replay loading.

Embed: better support for force reloading, call delete with reload
directly in embed

Depends on webrecorder/wabac.js#220

src/pageentry.ts

@@ -5,7 +5,7 @@ import { property, state } from "lit/decorators.js";
 
 import "keyword-mark-element/lib/keyword-mark.js";
 
-import { getReplayLink } from "./pageutils";
+import { getPageDateTS, getReplayLink } from "./pageutils";
 
 import { wrapCss } from "./misc";
 import type { URLResource } from "./types";
@@ -192,7 +192,7 @@ class PageEntry extends LitElement {
 
   render() {
     const p = this.page!;
-    const date = this.page!.date;
+    const { date } = getPageDateTS(p);
 
     const hasSize = typeof p.size === "number";
 
@@ -245,6 +245,7 @@ class PageEntry extends LitElement {
                     "pages",
                     this.page!.url,
                     this.page!.timestamp!,
+                    this.page!.waczhash,
                   )}"
                 >
                   <p class="is-size-6 has-text-weight-bold has-text-link text">
@@ -298,6 +299,12 @@ class PageEntry extends LitElement {
     `;
   }
 
+  private getReplayPrefix() {
+    const waczhash = this.page!.waczhash ? `:${this.page!.waczhash}/` : "";
+    const ts = this.page!.timestamp || "";
+    return this.replayPrefix + "/" + waczhash + ts + "id_";
+  }
+
   private renderPageIcon() {
     if (!this.thumbnailValid) {
       return this.renderFavicon();
@@ -305,9 +312,7 @@ class PageEntry extends LitElement {
     return html`<img
       class="thumbnail"
       @error=${() => (this.thumbnailValid = false)}
-      src=${`${this.replayPrefix}/${this.page!.timestamp}id_/urn:thumbnail:${
-        this.page!.url
-      }`}
+      src=${`${this.getReplayPrefix()}/urn:thumbnail:${this.page!.url}`}
       loading="lazy"
     />`;
   }
@@ -319,9 +324,7 @@ class PageEntry extends LitElement {
     return html`<img
       class="favicon"
       @error=${() => (this.iconValid = false)}
-      src=${`${this.replayPrefix}/${this.page!.timestamp}id_/${
-        this.page!.favIconUrl
-      }`}
+      src=${`${this.getReplayPrefix()}/${this.page!.favIconUrl}`}
       loading="lazy"
     />`;
   }
@@ -377,6 +380,7 @@ class PageEntry extends LitElement {
     const data = {
       url: this.page!.url,
       ts: this.page!.timestamp,
+      waczhash: this.page!.waczhash,
     };
     this.sendChangeEvent(data, reload);
     return false;