contour-deck 0.2.0 → 0.2.2

package/README.md

@@ -186,7 +186,7 @@ The laser dot eases towards its target and fades when released; with `prefers-re
 #### The relay
 
 The relay is a WebSocket forwarder, one room per talk, specified in [docs/PROTOCOL.md](docs/PROTOCOL.md): rooms, the pairing messages, close codes, and limits (2 KB frames, 60 messages a second, 4 guests).
-`relay(url, { room, role, key })` and `broadcast(room)` are the two `Transport`s (`send`, `subscribe`, `watch`, `reconnect`, `close`, `status`); the relay one reconnects with backoff, except after `4003` (removed by the host) and `4009` (another tab of the session took the host seat).
+`relay(url, { room, role, key })` and `broadcast(room)` are the two `Transport`s (`send`, `subscribe`, `watch`, `reconnect`, `close`, `status`); the relay one reconnects with backoff (up to 15 s between tries, 60 s after `4004`, no host), except after `4003` (removed by the host), `4009` (another tab of the session took the host seat), and, for a guest, `4029` (room full).
 The demo takes a relay from the query string, the deployed one or one on this machine: `https://wayne930242.github.io/contour-deck/?relay=wss://contour-relay.wayne930242.workers.dev&view=deck`, or `?relay=ws://localhost:8787`; it ignores any other.
 The phone must be able to open the page's URL, so a deck on `localhost` needs a tunnel or the LAN address for the phone part.
 

package/dist/remote/guest.d.ts

@@ -3,7 +3,7 @@ import type { Transport } from "./transport.js";
 /**
  * `connecting`: no answer from the room yet. `pairing`: showing a code, waiting for the presenter.
  * `granted`: in control. `denied`, `revoked`: the presenter said no; the connection is closed until `retry()`.
- * `offline`: the connection ended and is being retried.
+ * `offline`: the connection ended and is being retried, except after 4029 (room full), where it waits for `retry()`.
  */
 export type GuestPhase = "connecting" | "pairing" | "granted" | "denied" | "revoked" | "offline";
 export interface Stroke {
@@ -25,7 +25,7 @@ export interface Guest {
     /** Starts an ink stroke; its points go out in batches. */
     stroke(): Stroke;
     clearInk(): void;
-    /** After `denied` or `revoked`: connects again and asks anew. */
+    /** After `denied` or `revoked`, or offline after 4029 (room full): connects again and asks anew. */
     retry(): void;
     /** Calls `listener` after every change of phase, code, or state. */
     subscribe(listener: () => void): () => void;

package/dist/remote/guest.js

@@ -202,10 +202,16 @@ export function createGuest({ room, open, trusted = false }) {
         },
         clearInk: () => send({ t: "ink-clear" }),
         retry() {
-            if (closed || (phase !== "denied" && phase !== "revoked"))
+            if (closed)
+                return;
+            const full = phase === "offline" && transport.code === 4029;
+            if (!full && phase !== "denied" && phase !== "revoked")
                 return;
             phase = "connecting";
-            connect();
+            if (full)
+                transport.reconnect();
+            else
+                connect();
             emit();
         },
         subscribe(listener) {

package/dist/remote/labels.d.ts

@@ -6,12 +6,18 @@ export interface RemoteLabels {
     remoteQr: string;
     remoteHint: string;
     notesQr: string;
+    /** Names the switch between the two QR codes. */
+    qrMode: string;
     notesHint: string;
     noRelay: string;
     relayConnecting: string;
     relayOpen: string;
     relayClosed: string;
     roomTaken: string;
+    /** Name of the bar button while another tab holds the room. */
+    roomTakenBar: string;
+    /** Takes the room back for this tab. */
+    useThisWindow: string;
     request: string;
     /** Name of the bar button while phones wait for an answer. */
     waiting(count: number): string;

package/dist/remote/labels.js

@@ -4,12 +4,15 @@ export const defaultRemoteLabels = {
     remoteQr: "手機遙控",
     remoteHint: "掃描後手機會顯示確認碼，在這裡按允許才能控制。",
     notesQr: "講稿",
+    qrMode: "QR 碼用途",
     notesHint: "手機自己翻頁的講稿，不需要連線。",
     noRelay: "這個頁面沒有設定中繼服務，手機無法遙控；講稿與講者視窗仍可使用。",
     relayConnecting: "中繼連線中",
     relayOpen: "中繼已連線",
     relayClosed: "中繼離線，重試中",
     roomTaken: "房間已被另一個視窗使用",
+    roomTakenBar: "遙控：房間已被另一個視窗使用",
+    useThisWindow: "改用這個視窗",
     request: "有手機要求控制",
     waiting: count => `遙控：${count} 支手機等待允許`,
     code: "確認碼",
@@ -30,7 +33,7 @@ export const defaultRemoteLabels = {
     revoked: "電腦收回了控制權。",
     retry: "重新要求控制",
     noHost: "找不到簡報：電腦還沒開啟遙控，或已經關閉。重試中…",
-    full: "已有太多裝置連上這場簡報。重試中…",
+    full: "已有太多裝置連上這場簡報。等有人離開後再試一次。",
     badLink: "這個連結無法遙控，請重新掃描電腦上的 QR。",
     notesOnly: "只看講稿",
     leave: "離開",

package/dist/remote/panel.d.ts

@@ -24,6 +24,8 @@ export interface PanelOptions {
     allow(id: string): void;
     deny(id: string): void;
     revoke(): void;
+    /** After 4009: takes the host seat back for this tab. */
+    retake(): void;
     presenter(): void;
     resetTimer(): void;
     end(): void;

package/dist/remote/panel.js

@@ -16,12 +16,20 @@ export function createPanel(options) {
     const closeButton = button("close", "✕");
     closeButton.setAttribute("aria-label", labels.close);
     head.append(h("h2", "", labels.title), status, closeButton);
+    // Another tab with the same key holds the seat (4009); this tab takes it back only when asked.
+    const retake = el.appendChild(h("div", "ct-rp-row"));
+    retake.append(h("p", "", labels.roomTaken), button("retake", labels.useThisWindow, true));
+    retake.hidden = true;
     /** Requests and the paired phone: the part that changes. */
     const live = el.appendChild(h("div", "ct-rp-live", "", { "aria-live": "polite" }));
     live.style.display = "contents";
+    // One QR at a time: the phone remote or the notes, chosen with a switch above it.
+    const modes = el.appendChild(h("div", "ct-rp-modes", "", { role: "group", "aria-label": labels.qrMode }));
     const codes = el.appendChild(h("div", "ct-rp-qrs"));
-    function tile(title, hint, link) {
-        const figure = codes.appendChild(h("figure", "ct-rp-qr"));
+    const tiles = {};
+    function tile(mode, title, hint, link) {
+        const figure = codes.appendChild(h("figure", "ct-rp-qr", "", { "data-ct-qr": mode }));
+        tiles[mode] = { figure, switch: modes.appendChild(button(`qr:${mode}`, title)) };
         const image = h("div", "ct-rp-img");
         image.hidden = true;
         figure.append(image, h("h3", "", title), h("p", "", hint), h("a", "ct-rp-url", link, { href: link, target: "_blank", rel: "noopener" }));
@@ -37,10 +45,19 @@ export function createPanel(options) {
             .catch(() => { });
     }
     if (options.remoteLink)
-        tile(labels.remoteQr, labels.remoteHint, options.remoteLink);
+        tile("remote", labels.remoteQr, labels.remoteHint, options.remoteLink);
     else
         codes.before(h("p", "", labels.noRelay));
-    tile(labels.notesQr, labels.notesHint, options.notesLink);
+    tile("notes", labels.notesQr, labels.notesHint, options.notesLink);
+    // Without a relay there is only the notes QR, and nothing to switch.
+    modes.hidden = Object.keys(tiles).length < 2;
+    function showQr(mode) {
+        for (const [name, { figure, switch: control }] of Object.entries(tiles)) {
+            figure.hidden = name !== mode;
+            control.setAttribute("aria-pressed", String(name === mode));
+        }
+    }
+    showQr(options.remoteLink ? "remote" : "notes");
     const tools = el.appendChild(h("div", "ct-rp-row"));
     const time = h("b", "ct-rp-time", "0:00");
     const timer = h("span", "ct-rp-row");
@@ -52,12 +69,16 @@ export function createPanel(options) {
         allow: options.allow,
         deny: options.deny,
         revoke: options.revoke,
+        retake: options.retake,
         presenter: options.presenter,
         reset: options.resetTimer,
         end: options.end,
     };
     el.addEventListener("click", event => {
         const control = event.target.closest("[data-ct-rp]");
+        const action = control?.dataset.ctRp ?? "";
+        if (action.startsWith("qr:"))
+            return showQr(action.slice(3));
         if (control)
             actions[control.dataset.ctRp ?? ""]?.(control.dataset.ctId ?? "");
     });
@@ -101,6 +122,7 @@ export function createPanel(options) {
                         : view.relay === "closed"
                             ? labels.relayClosed
                             : labels.relayConnecting;
+            retake.hidden = !(view.relay === "closed" && view.code === 4009);
             status.textContent = relayText;
             status.hidden = !relayText;
             status.dataset.st = view.relay ?? "";

package/dist/remote/phone.js

@@ -139,7 +139,8 @@ export function remoteView(root, options = {}) {
         const { phase, closeCode } = guest;
         cardCode.hidden = phase !== "pairing";
         cardCode.textContent = guest.code;
-        retry.hidden = phase !== "denied" && phase !== "revoked";
+        // A full room is not retried by itself: each try counts against the relay's limit for this network.
+        retry.hidden = phase !== "denied" && phase !== "revoked" && !(phase === "offline" && closeCode === 4029);
         cardBadge.textContent = phase === "pairing" ? labels.code : phase === "offline" ? labels.offline : labels.title;
         cardText.textContent =
             phase === "pairing"

package/dist/remote/session.js

@@ -182,6 +182,7 @@ function start(deck, root, options, { app, stage, viewport }, { key, room, befor
         allow: id => pairing.allow(id),
         deny: id => pairing.deny(id),
         revoke: () => pairing.revoke(),
+        retake: () => wan?.reconnect(),
         presenter: () => void window.open(pageLink("presenter", room), "contour-deck-presenter", "popup,width=1180,height=760"),
         resetTimer() {
             clock.reset();
@@ -204,15 +205,19 @@ function start(deck, root, options, { app, stage, viewport }, { key, room, befor
             paired: pairing.controller ? "online" : pairing.token ? "offline" : "no",
             elapsed: clock.read(Date.now()).elapsed,
         });
-        // With the panel closed, a waiting phone shows as a count on the bar button; nothing opens by itself.
-        if (requests.length) {
+        // With the panel closed, a waiting phone shows as a count on the bar button, and a seat lost to another tab
+        // as a mark on it; nothing opens by itself.
+        const taken = wan?.status === "closed" && wan.code === 4009;
+        barButton?.toggleAttribute("data-ct-taken", taken);
+        if (requests.length)
             barButton?.setAttribute("data-ct-count", String(requests.length));
-            barButton?.setAttribute("aria-label", labels.waiting(requests.length));
-        }
-        else {
+        else
             barButton?.removeAttribute("data-ct-count");
+        const name = taken ? labels.roomTakenBar : requests.length ? labels.waiting(requests.length) : null;
+        if (name)
+            barButton?.setAttribute("aria-label", name);
+        else
             barButton?.removeAttribute("aria-label");
-        }
         barButton?.setAttribute("aria-pressed", String(panel.open));
     }
     const stops = [
@@ -275,7 +280,7 @@ function start(deck, root, options, { app, stage, viewport }, { key, room, befor
             wan?.close();
             overlay.destroy();
             panel.destroy();
-            for (const name of ["data-ct-count", "aria-label", "aria-pressed"])
+            for (const name of ["data-ct-count", "data-ct-taken", "aria-label", "aria-pressed"])
                 barButton?.removeAttribute(name);
             hosts.delete(deck);
         },

package/dist/remote/style.js

@@ -4,7 +4,8 @@
  * and go first in <head>, so a host's own rules win a tie.
  */
 const css = `
-.ct-btn[data-ct-act="remote"][data-ct-count]::after { content: attr(data-ct-count); content: attr(data-ct-count) / ""; margin-left: .4em; padding: .1em .4em; background: var(--ct-accent); color: var(--ct-accent-fg); }
+.ct-btn[data-ct-act="remote"]:is([data-ct-count], [data-ct-taken])::after { content: attr(data-ct-count); content: attr(data-ct-count) / ""; margin-left: .4em; padding: .1em .4em; background: var(--ct-accent); color: var(--ct-accent-fg); }
+.ct-btn[data-ct-act="remote"][data-ct-taken]::after { content: "!"; content: "!" / ""; }
 
 /* ---- over the stage: laser dot and ink ---- */
 .ct-ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; color: var(--ct-accent); }
@@ -25,8 +26,10 @@ const css = `
 .ct-rp-code { font: 800 1.9rem/1 var(--ct-mono); letter-spacing: .14em; margin-right: auto; }
 .ct-rp-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
 .ct-rp-row > :last-child { margin-left: auto; }
-.ct-rp-qrs { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
-.ct-rp-qr { margin: 0; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
+.ct-rp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
+.ct-rp-modes[hidden], .ct-rp-qr[hidden] { display: none; }
+.ct-rp-qrs { display: grid; justify-items: center; }
+.ct-rp-qr { margin: 0; display: flex; flex-direction: column; gap: .35rem; min-width: 0; width: min(100%, 15rem); }
 .ct-rp-img { aspect-ratio: 1; background: #fff; border: 1px solid var(--ct-border); }
 .ct-rp-img svg { display: block; width: 100%; height: 100%; }
 .ct-rp-url { font: .62rem/1.35 var(--ct-mono); color: var(--ct-muted); overflow-wrap: anywhere; }
@@ -39,6 +42,8 @@ const css = `
 .ct-pv { position: relative; overflow: hidden; aspect-ratio: var(--ct-ratio, 16 / 9); background: var(--ct-bg); border: 1px solid var(--ct-border); }
 .ct-app .ct-pv > .ct-stage { inset: auto; left: 0; top: 0; width: 1280px; height: calc(1280px / var(--ct-ratio, 16 / 9)); transform: scale(var(--ct-k, .25)); transform-origin: 0 0; border: 0; z-index: 0; visibility: visible; pointer-events: none; }
 .ct-pvw { height: 100%; overflow: hidden; }
+/* The copy shows the page as it stands, revealed: a host's entrance motion would hold it at its first frame (often transparent), since the copy is never the current page. */
+.ct-pv.ct-pv > .ct-stage *, .ct-pv.ct-pv > .ct-stage *::before, .ct-pv.ct-pv > .ct-stage *::after { animation: none !important; transition: none !important; }
 
 /* ---- the phone ---- */
 .ct-app.ct-rmt { display: flex; flex-direction: column; grid-template-rows: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); font-size: 1rem; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

package/dist/remote/transport.d.ts

@@ -30,6 +30,7 @@ export interface RelayOptions {
 export declare function relayUrl(base: string, { room, role, key }: RelayOptions): string;
 /**
  * A WebSocket to the relay. A connection that ends is opened again with exponential backoff
- * (0.5 s doubling to 15 s, with jitter), and at once when the page comes back or the network returns.
+ * (0.5 s doubling to 15 s, 60 s after 4004, with jitter), and at once when the page comes back or the network
+ * returns. After a final close it waits for `reconnect()`.
  */
 export declare function relay(base: string, options: RelayOptions): Transport;

package/dist/remote/transport.js

@@ -46,18 +46,25 @@ export function broadcast(room) {
 }
 const FIRST_RETRY = 500;
 const LAST_RETRY = 15_000;
+/**
+ * The longest wait after `4004` (no host): a phone left open after the talk tries about once a minute, so the
+ * phones of one venue network do not spend the relay's per-address budget, which the presenter's phone shares.
+ */
+const LAST_RETRY_NO_HOST = 60_000;
 /** `https://relay.example` or `wss://relay.example` to the room endpoint. */
 export function relayUrl(base, { room, role, key }) {
     return `${base.replace(/^http/, "ws").replace(/\/+$/, "")}/v1/room/${room}?role=${role}${key ? `&key=${key}` : ""}`;
 }
 /**
  * Closes after which the connection is not opened again by itself: 4009, a newer connection with the same key
- * took the host seat (the same session in another tab); 4003, the host removed this guest.
+ * took the host seat (the same session in another tab); 4003, the host removed this guest; 4029, a guest found
+ * the room full (the audience behind one address would otherwise keep spending its request budget).
  */
-const FINAL = [4003, 4009];
+const FINAL = { host: [4003, 4009], guest: [4003, 4009, 4029] };
 /**
  * A WebSocket to the relay. A connection that ends is opened again with exponential backoff
- * (0.5 s doubling to 15 s, with jitter), and at once when the page comes back or the network returns.
+ * (0.5 s doubling to 15 s, 60 s after 4004, with jitter), and at once when the page comes back or the network
+ * returns. After a final close it waits for `reconnect()`.
  */
 export function relay(base, options) {
     const messages = emitter();
@@ -108,10 +115,11 @@ export function relay(base, options) {
             if (ended)
                 return;
             set("closed");
-            parked = FINAL.includes(code);
+            parked = FINAL[options.role].includes(code);
             if (parked)
                 return;
-            const delay = Math.min(LAST_RETRY, FIRST_RETRY * 2 ** attempt++) * (0.5 + Math.random() / 2);
+            const last = code === 4004 ? LAST_RETRY_NO_HOST : LAST_RETRY;
+            const delay = Math.min(last, FIRST_RETRY * 2 ** attempt++) * (0.5 + Math.random() / 2);
             timer = window.setTimeout(open, delay);
         };
     }

package/docs/PROTOCOL.md

@@ -37,7 +37,8 @@ One Durable Object per room (`idFromName(room)`).
 | no message in the room for 2 hours | closes everyone with `4000` |
 | a socket exceeds 60 messages/s (burst 120) | extra messages are dropped; above 10 s of sustained excess, closes with `1008` |
 | request `Origin` not in `ALLOWED_ORIGINS` | HTTP 403 before the upgrade |
-| more than 60 requests to room paths a minute from one client address | HTTP 429 before anything else is checked |
+| more than 60 requests to room paths a minute from one client address, not counting host requests with the room's key | HTTP 429 before anything else is checked |
+| more than 30 host requests with the room's key a minute from one client address | HTTP 429 before anything else is checked |
 
 `ALLOWED_ORIGINS` is a comma-separated Worker variable (e.g. `https://www.wayneh.tw,https://wayne930242.github.io,http://localhost:4321`). Guests never reach other guests.
 
@@ -92,8 +93,8 @@ The presenter window on the same computer uses `BroadcastChannel("contour-deck:<
 | --- | --- |
 | `4000` | room closed (host left or idle, or a new host took the seat) |
 | `4003` | removed by the host (after `deny` or `revoke`); the client does not reconnect by itself |
-| `4004` | no host in this room |
+| `4004` | no host in this room; the client retries with a longer backoff (up to 60 s between tries) |
 | `4009` | host replaced: a newer connection with the same key holds the host seat; the client does not reconnect by itself |
-| `4029` | room full |
+| `4029` | room full; the client does not reconnect by itself (each retry would count against the address's limit) |
 | `1008` | rate limit |
 | `1009` | message too large |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contour-deck",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Outline-first slide decks on real DOM: blocks, slides, pages.",
   "keywords": [
     "slides",