@volter/world-console 3.0.6 → 3.0.8

package/client/console.tsx

@@ -1752,27 +1752,45 @@ function Thumb({ url, title }: { url: string; title: string }): React.JSX.Elemen
  *  was the moment before the first of them beside how it is now. "Before" is a read-only copy of the World as of then (a
  *  branch the World makes for an hour, removed when this closes), its site read at the copy's own address. */
 function Compare({ name, token, frame, onClose, reads }: { name: string; token: string; frame: BoardFrame; onClose: () => void; /** the board's reads so far: its changes are read again with each */ reads: number }): React.JSX.Element {
-  const [before, setBefore] = useState<{ state: 'opening' } | { state: 'ok'; url: string; at: string } | { state: 'none'; why: string }>({ state: 'opening' });
+  const [before, setBefore] = useState<{ state: 'opening' } | { state: 'ok'; url: string; at: string; /** a vendor's page: opened as a page of its own, never framed */ opens?: boolean } | { state: 'none'; why: string }>({ state: 'opening' });
   // its changes, read for this comparison alone
   const listed = useDoor<{ total: number; acts: BoardAct[] }>(token, `/-/${name}/board/changes?frame=${encodeURIComponent(frameKey(frame))}`, reads);
   useEffect(() => {
     if (!frame.since) { setBefore({ state: 'none', why: 'Nothing here has changed since the World was last cut.' }); return; }
-    if (!frame.at || !('site' in frame.at)) { setBefore({ state: 'none', why: `A ${vendorName(frame.vendor)} page as it was needs a signed-in copy of the World; its changes are listed below.` }); return; }
+    if (!frame.at) { setBefore({ state: 'none', why: `${vendorName(frame.vendor)}'s twin draws no page for this ${frame.kind} yet; its changes are listed below.` }); return; }
+    const shown = frame.at;
     const at = new Date(Date.parse(frame.since) - 1).toISOString();
     let made: string | null = null; let closed = false;
     // a copy is made once the comparison has stayed open a moment: one passed through on the way to another makes none
     const wait = setTimeout(() => void (async () => {
       const r = await door(token, `/-/${name}/branches`, { method: 'POST', body: JSON.stringify({ at: { instant: at }, ttl: 3600 }), signal: AbortSignal.timeout(60000) }).catch(() => null);
       if (!r?.ok) { setBefore({ state: 'none', why: `The World made no copy of itself as it was then${r ? `: ${await failure(r)}` : ''}.` }); return; }
-      const b = (await r.json()) as { name: string; origin?: string };
+      const b = (await r.json()) as { name: string; origin?: string; readToken?: string };
       made = b.name;
       if (closed) { void door(token, `/-/${name}/branches/${b.name}`, { method: 'DELETE' }).catch(() => null); return; }
       const o = httpOrigin(b.origin);
       if (!o) { setBefore({ state: 'none', why: 'This World shows sites only at its own local address.' }); return; }
-      const u = new URL(frame.url);
-      setBefore({ state: 'ok', url: `${o.protocol}//${u.hostname}.${o.host}${u.pathname}${u.search}`, at });
+      // a site at the copy's own address, framed; a vendor's page in the copy is behind the copy's session, which opens
+      // only on the copy's own pages (another site's frame is refused it): this World shows it instead, or, on a host
+      // that cannot, the copy's hand-off page (served-world, `session/hand-off`) opens it as a page of its own
+      if ('site' in shown) { const u = new URL(frame.url); setBefore({ state: 'ok', url: `${o.protocol}//${u.hostname}.${o.host}${u.pathname}${u.search}`, at }); return; }
+      // shown by this World beside its own page, as a branch of it (its `copies` door), where its host holds the copy;
+      // else opened at the copy's own address
+      const id = b.name.slice(b.name.indexOf('/') + 1);
+      const beside = `${WORLDS}/-/${name}/copies/${id}/${frame.vendor}${shown.screen}`;
+      // the copy's own answer may be a 404 page (an account not there yet); the door's refusals are not
+      const here = await fetch(beside, { method: 'HEAD', credentials: 'same-origin' }).then((r) => ![401, 403, 501, 503].includes(r.status), () => false);
+      if (closed) return;
+      if (here) { setBefore({ state: 'ok', url: beside, at }); return; }
+      if (!b.readToken) { setBefore({ state: 'none', why: 'The copy of the World gave no read token to open its pages with.' }); return; }
+      setBefore({ state: 'ok', url: `${o.origin}/-/${b.name}/session/hand-off#${new URLSearchParams({ token: b.readToken, land: `/${b.name}/${frame.vendor}${shown.screen}` }).toString()}`, at, opens: true });
     })(), 500);
-    return () => { closed = true; clearTimeout(wait); if (made) void door(token, `/-/${name}/branches/${made}`, { method: 'DELETE' }).catch(() => null); };
+    // the copy goes with the comparison, and with the page: a reload or a closed tab runs no cleanup of its own
+    const drop = (): void => { if (made) void door(token, `/-/${name}/branches/${made}`, { method: 'DELETE', keepalive: true }).catch(() => null); made = null; };
+    // a page kept for back and forward keeps its copy: it may be shown again
+    const left = (e: PageTransitionEvent): void => { if (!e.persisted) drop(); };
+    window.addEventListener('pagehide', left);
+    return () => { closed = true; clearTimeout(wait); window.removeEventListener('pagehide', left); drop(); };
   }, [name, token, frame.vendor, frame.id, frame.since]);
   const now = frameUrl(name, frame);
   return (
@@ -1785,7 +1803,9 @@ function Compare({ name, token, frame, onClose, reads }: { name: string; token:
       <div className="compare-sides">
         <figure>
           <figcaption>Before{before.state === 'ok' ? ` · as of ${when(before.at)}` : ''}</figcaption>
-          {before.state === 'ok' ? <Thumb url={before.url} title={`${frame.title} before`} /> : before.state === 'opening' ? <p className="mode compare-note" role="status">Opening the World as it was…</p> : <p className="mode compare-note">{before.why}</p>}
+          {before.state === 'ok' ? (before.opens
+            ? <p className="mode compare-note"><a href={before.url} target="_blank" rel="noopener noreferrer">Open {frame.title} as it was →</a><br />A read-only copy of the World, kept while this comparison is open.</p>
+            : <Thumb url={before.url} title={`${frame.title} before`} />) : before.state === 'opening' ? <p className="mode compare-note" role="status">Opening the World as it was…</p> : <p className="mode compare-note">{before.why}</p>}
         </figure>
         <figure>
           <figcaption>Now</figcaption>