contour-deck 0.0.0-stage → 0.2.0

package/dist/remote/guest.d.ts

@@ -0,0 +1,41 @@
+import type { Command, StateMessage } from "./protocol.js";
+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.
+ */
+export type GuestPhase = "connecting" | "pairing" | "granted" | "denied" | "revoked" | "offline";
+export interface Stroke {
+    add(x: number, y: number): void;
+    end(): void;
+}
+export interface Guest {
+    readonly phase: GuestPhase;
+    /** The pairing code to show, while `phase` is `pairing`. */
+    readonly code: string;
+    /** Close code of the last connection (4004: no host, 4029: room full), 0 when none ended. */
+    readonly closeCode: number;
+    /** The last `state` from the host, and when it arrived on `performance.now()`. */
+    readonly state: StateMessage | null;
+    readonly stateAt: number;
+    command(c: Command, at?: string): void;
+    /** The laser pointer; at most one message every 33 ms, the last position always goes out. */
+    point(x: number, y: number, on: boolean): void;
+    /** Starts an ink stroke; its points go out in batches. */
+    stroke(): Stroke;
+    clearInk(): void;
+    /** After `denied` or `revoked`: connects again and asks anew. */
+    retry(): void;
+    /** Calls `listener` after every change of phase, code, or state. */
+    subscribe(listener: () => void): () => void;
+    close(): void;
+}
+export interface GuestOptions {
+    room: string;
+    /** Opens the transport; called again by `retry()`. */
+    open(): Transport;
+    /** Same browser as the host (BroadcastChannel): no pairing, control from the start. */
+    trusted?: boolean;
+}
+export declare function createGuest({ room, open, trusted }: GuestOptions): Guest;

package/dist/remote/guest.js

@@ -0,0 +1,223 @@
+/**
+ * The guest side: a phone through the relay, or the presenter window on the room's BroadcastChannel.
+ * It follows the pairing of docs/PROTOCOL.md, keeps the resume token, and paces what it sends.
+ */
+import { MAX_POINTS, stateMessage } from "./protocol.js";
+import { guestKey, load, save } from "./store.js";
+const POINT_EVERY = 33;
+const INK_EVERY = 50;
+const PING_EVERY = 10_000;
+/** A granted guest that hears nothing for this long reconnects: a phone's socket can die without closing. */
+const SILENCE = 25_000;
+/** With a token in hand, the code stays hidden this long: the grant usually arrives first. */
+const RESUME_WAIT = 1200;
+const round = (value) => Math.round(Math.min(1, Math.max(0, value)) * 1e4) / 1e4;
+export function createGuest({ room, open, trusted = false }) {
+    const listeners = new Set();
+    const emit = () => listeners.forEach(listener => listener());
+    let transport;
+    let stops = [];
+    let phase = "connecting";
+    let code = "";
+    let state = null;
+    let stateAt = 0;
+    let heard = performance.now();
+    let reveal = 0;
+    let strokes = 0;
+    let pointTimer = 0;
+    let pointAt = 0;
+    let pending = null;
+    let closed = false;
+    const token = () => {
+        const value = load(guestKey(room));
+        return typeof value === "string" ? value : null;
+    };
+    const send = (message) => {
+        if (phase === "granted")
+            transport.send(message);
+    };
+    function set(next) {
+        clearTimeout(reveal);
+        phase = next;
+        emit();
+    }
+    function receive(message) {
+        heard = performance.now();
+        switch (message.t) {
+            case "hello": {
+                // A fresh connection: present the token, if this tab was granted before.
+                const kept = token();
+                if (kept)
+                    transport.send({ t: "resume", token: kept });
+                if (phase !== "granted")
+                    set("connecting");
+                return;
+            }
+            case "pair":
+                if (typeof message.code !== "string" || !/^\d{4}$/.test(message.code))
+                    return;
+                code = message.code;
+                clearTimeout(reveal);
+                if (token() && phase !== "pairing")
+                    reveal = window.setTimeout(() => set("pairing"), RESUME_WAIT);
+                else
+                    set("pairing");
+                return;
+            case "grant":
+                if (typeof message.token !== "string" || message.token.length > 64)
+                    return;
+                save(guestKey(room), message.token);
+                return set("granted");
+            case "deny":
+            case "revoke":
+                if (message.t === "revoke")
+                    save(guestKey(room), null);
+                state = null;
+                // Leave the room: a guest without control has nothing to wait for, and frees one of its places.
+                hangUp();
+                return set(message.t === "deny" ? "denied" : "revoked");
+            case "state": {
+                const next = stateMessage(message);
+                if (!next)
+                    return;
+                state = next;
+                stateAt = performance.now();
+                return emit();
+            }
+        }
+    }
+    function hangUp() {
+        stops.forEach(stop => stop());
+        stops = [];
+        transport.close();
+    }
+    function connect() {
+        transport = open();
+        if (trusted)
+            phase = "granted";
+        stops = [
+            transport.subscribe(receive),
+            transport.watch(status => {
+                if (status === "closed")
+                    set("offline");
+                else if (status === "connecting" && phase === "offline")
+                    emit();
+            }),
+        ];
+        // The presenter window asks for the state; the host answers a ping on the channel with pong and state.
+        if (trusted)
+            transport.send({ t: "ping" });
+    }
+    connect();
+    const beat = window.setInterval(() => {
+        if (phase !== "granted")
+            return;
+        if (trusted) {
+            // Until the deck answers, ask every beat: the presenter window may open before the remote is on.
+            if (!state)
+                transport.send({ t: "ping" });
+            return;
+        }
+        if (performance.now() - heard > SILENCE) {
+            heard = performance.now();
+            transport.reconnect();
+        }
+        else
+            transport.send({ t: "ping" });
+    }, trusted ? 1500 : PING_EVERY);
+    function flushPoint() {
+        pointTimer = 0;
+        if (!pending)
+            return;
+        send(pending);
+        pending = null;
+        pointAt = performance.now();
+    }
+    return {
+        get phase() {
+            return phase;
+        },
+        get code() {
+            return code;
+        },
+        get closeCode() {
+            return transport.code;
+        },
+        get state() {
+            return state;
+        },
+        get stateAt() {
+            return stateAt;
+        },
+        command(c, at) {
+            send(at === undefined ? { t: "cmd", c } : { t: "cmd", c, at });
+        },
+        point(x, y, on) {
+            pending = { t: "ptr", x: round(x), y: round(y), on };
+            const wait = POINT_EVERY - (performance.now() - pointAt);
+            // Switching off is never held back; a position waits for its slot, and the newest one wins it.
+            if (!on || wait <= 0) {
+                clearTimeout(pointTimer);
+                flushPoint();
+            }
+            else
+                pointTimer ||= window.setTimeout(flushPoint, wait);
+        },
+        stroke() {
+            const s = ++strokes;
+            let points = [];
+            let last = [];
+            let timer = 0;
+            let ended = false;
+            const flush = (end = false) => {
+                clearTimeout(timer);
+                timer = 0;
+                while (points.length > MAX_POINTS * 2)
+                    send({ t: "ink", s, pts: points.splice(0, MAX_POINTS * 2) });
+                // The closing message carries `end`; when every point has gone out already, it repeats the last one.
+                if (end && !points.length)
+                    points = last;
+                if (points.length)
+                    send({ t: "ink", s, pts: points, ...(end ? { end: true } : {}) });
+                points = [];
+            };
+            return {
+                add(x, y) {
+                    if (ended)
+                        return;
+                    last = [round(x), round(y)];
+                    points.push(...last);
+                    if (points.length >= MAX_POINTS * 2)
+                        flush();
+                    else
+                        timer ||= window.setTimeout(flush, INK_EVERY);
+                },
+                end() {
+                    if (ended)
+                        return;
+                    ended = true;
+                    flush(true);
+                },
+            };
+        },
+        clearInk: () => send({ t: "ink-clear" }),
+        retry() {
+            if (closed || (phase !== "denied" && phase !== "revoked"))
+                return;
+            phase = "connecting";
+            connect();
+            emit();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => void listeners.delete(listener);
+        },
+        close() {
+            closed = true;
+            clearInterval(beat);
+            clearTimeout(reveal);
+            clearTimeout(pointTimer);
+            hangUp();
+        },
+    };
+}

package/dist/remote/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * contour-deck/remote: the phone remote, the laser pointer, ink, tilt pointing, and the presenter window.
+ * Load it on demand: the deck calls its `remote` option on the R key, and a page opened with
+ * `?view=remote` or `?view=presenter` calls `remoteView` or `presenterView`.
+ */
+export { remoteHost } from "./session.js";
+export type { RemoteHost, RemoteOptions } from "./session.js";
+export { remoteView } from "./phone.js";
+export type { RemoteView, RemoteViewOptions } from "./phone.js";
+export { presenterView } from "./presenter.js";
+export { broadcast, relay, relayUrl } from "./transport.js";
+export type { Incoming, RelayOptions, Transport, TransportStatus } from "./transport.js";
+export type { Command, GuestMessage, HostMessage, Message, RelayMessage, StateMessage } from "./protocol.js";
+export { defaultRemoteLabels } from "./labels.js";
+export type { RemoteLabels } from "./labels.js";
+export type { QrEncoder } from "./panel.js";
+export { aimOf, calibrate, createPointer, defaultCalibration, project, recentre } from "./tilt.js";
+export type { Aim, Calibration, CalibrationTarget, Pointer, TiltSample } from "./tilt.js";

package/dist/remote/index.js

@@ -0,0 +1,11 @@
+/**
+ * contour-deck/remote: the phone remote, the laser pointer, ink, tilt pointing, and the presenter window.
+ * Load it on demand: the deck calls its `remote` option on the R key, and a page opened with
+ * `?view=remote` or `?view=presenter` calls `remoteView` or `presenterView`.
+ */
+export { remoteHost } from "./session.js";
+export { remoteView } from "./phone.js";
+export { presenterView } from "./presenter.js";
+export { broadcast, relay, relayUrl } from "./transport.js";
+export { defaultRemoteLabels } from "./labels.js";
+export { aimOf, calibrate, createPointer, defaultCalibration, project, recentre } from "./tilt.js";

package/dist/remote/ink.d.ts

@@ -0,0 +1,11 @@
+/** Freehand strokes on a canvas, kept in normalised coordinates so a resize redraws them in place. */
+export interface Ink {
+    /** Adds points (`[x, y, x, y, …]` in [0, 1]) to the stroke named `key`, starting it when new. */
+    add(key: string, points: number[]): void;
+    clear(): void;
+    /** Call when the canvas element changed size. */
+    resize(): void;
+    /** Number of strokes on the canvas. */
+    readonly count: number;
+}
+export declare function createInk(canvas: HTMLCanvasElement): Ink;

package/dist/remote/ink.js

@@ -0,0 +1,74 @@
+/** Freehand strokes on a canvas, kept in normalised coordinates so a resize redraws them in place. */
+/** Above this many points the oldest strokes go, so a guest cannot grow the page without bound. */
+const MAX_POINTS = 20_000;
+export function createInk(canvas) {
+    const strokes = new Map();
+    const context = canvas.getContext("2d");
+    let total = 0;
+    let frame = 0;
+    function draw() {
+        frame = 0;
+        if (!context)
+            return;
+        const { width, height } = canvas;
+        context.clearRect(0, 0, width, height);
+        context.strokeStyle = context.fillStyle = getComputedStyle(canvas).color;
+        context.lineWidth = Math.max(2, Math.min(width, height) * 0.006);
+        context.lineCap = context.lineJoin = "round";
+        for (const points of strokes.values()) {
+            context.beginPath();
+            if (points.length === 2) {
+                context.arc(points[0] * width, points[1] * height, context.lineWidth / 2, 0, Math.PI * 2);
+                context.fill();
+                continue;
+            }
+            context.moveTo(points[0] * width, points[1] * height);
+            // Through the midpoints, with each sample as a control point: corners of the sampling turn into curves.
+            for (let i = 2; i < points.length - 2; i += 2) {
+                const [x, y, nextX, nextY] = [points[i] * width, points[i + 1] * height, points[i + 2] * width, points[i + 3] * height];
+                context.quadraticCurveTo(x, y, (x + nextX) / 2, (y + nextY) / 2);
+            }
+            context.lineTo(points.at(-2) * width, points.at(-1) * height);
+            context.stroke();
+        }
+    }
+    const schedule = () => void (frame ||= requestAnimationFrame(draw));
+    function resize() {
+        const ratio = window.devicePixelRatio || 1;
+        const width = Math.round(canvas.clientWidth * ratio);
+        const height = Math.round(canvas.clientHeight * ratio);
+        if (canvas.width === width && canvas.height === height)
+            return;
+        canvas.width = width;
+        canvas.height = height;
+        cancelAnimationFrame(frame);
+        draw();
+    }
+    resize();
+    return {
+        add(key, points) {
+            const stroke = strokes.get(key);
+            if (stroke)
+                stroke.push(...points);
+            else
+                strokes.set(key, [...points]);
+            total += points.length / 2;
+            for (const [oldest, old] of strokes) {
+                if (total <= MAX_POINTS || oldest === key)
+                    break;
+                strokes.delete(oldest);
+                total -= old.length / 2;
+            }
+            schedule();
+        },
+        clear() {
+            strokes.clear();
+            total = 0;
+            schedule();
+        },
+        resize,
+        get count() {
+            return strokes.size;
+        },
+    };
+}

package/dist/remote/labels.d.ts

@@ -0,0 +1,72 @@
+/** Interface text of the remote: the panel on the deck, the phone, and the presenter window. Traditional Chinese by default. */
+import type { CalibrationTarget } from "./tilt.js";
+export interface RemoteLabels {
+    title: string;
+    close: string;
+    remoteQr: string;
+    remoteHint: string;
+    notesQr: string;
+    notesHint: string;
+    noRelay: string;
+    relayConnecting: string;
+    relayOpen: string;
+    relayClosed: string;
+    roomTaken: string;
+    request: string;
+    /** Name of the bar button while phones wait for an answer. */
+    waiting(count: number): string;
+    code: string;
+    allow: string;
+    deny: string;
+    paired: string;
+    pairedOffline: string;
+    revoke: string;
+    presenter: string;
+    timer: string;
+    resetTimer: string;
+    end: string;
+    connecting: string;
+    connected: string;
+    offline: string;
+    pairHint: string;
+    denied: string;
+    revoked: string;
+    retry: string;
+    noHost: string;
+    full: string;
+    badLink: string;
+    notesOnly: string;
+    leave: string;
+    slidePrev: string;
+    slideNext: string;
+    tabNotes: string;
+    tabPointer: string;
+    tabInk: string;
+    tabTilt: string;
+    upNext: string;
+    nextStep: string;
+    nextPage: string;
+    nextSlide: string;
+    theEnd: string;
+    inOverview: string;
+    block: string;
+    pointerHint: string;
+    inkHint: string;
+    clearInk: string;
+    tiltEnable: string;
+    tiltDenied: string;
+    tiltUnsupported: string;
+    tiltHold: string;
+    tiltRecentre: string;
+    tiltCalibrate: string;
+    tiltUncalibrated: string;
+    tiltCalibrated: string;
+    tiltAim(target: string, index: number, count: number): string;
+    tiltAimed: string;
+    tiltCancel: string;
+    tiltBad: string;
+    tiltTargets: Record<CalibrationTarget, string>;
+    now: string;
+    noDeck: string;
+}
+export declare const defaultRemoteLabels: RemoteLabels;

package/dist/remote/labels.js

@@ -0,0 +1,68 @@
+export const defaultRemoteLabels = {
+    title: "遙控",
+    close: "關閉",
+    remoteQr: "手機遙控",
+    remoteHint: "掃描後手機會顯示確認碼，在這裡按允許才能控制。",
+    notesQr: "講稿",
+    notesHint: "手機自己翻頁的講稿，不需要連線。",
+    noRelay: "這個頁面沒有設定中繼服務，手機無法遙控；講稿與講者視窗仍可使用。",
+    relayConnecting: "中繼連線中",
+    relayOpen: "中繼已連線",
+    relayClosed: "中繼離線，重試中",
+    roomTaken: "房間已被另一個視窗使用",
+    request: "有手機要求控制",
+    waiting: count => `遙控：${count} 支手機等待允許`,
+    code: "確認碼",
+    allow: "允許",
+    deny: "拒絕",
+    paired: "手機已配對",
+    pairedOffline: "手機已配對，目前離線",
+    revoke: "收回控制",
+    presenter: "開啟講者視窗",
+    timer: "計時",
+    resetTimer: "重設",
+    end: "結束遙控",
+    connecting: "連線中…",
+    connected: "已連線",
+    offline: "離線，重試中",
+    pairHint: "請在電腦上核對這組數字，再按「允許」。",
+    denied: "電腦沒有允許這支手機。",
+    revoked: "電腦收回了控制權。",
+    retry: "重新要求控制",
+    noHost: "找不到簡報：電腦還沒開啟遙控，或已經關閉。重試中…",
+    full: "已有太多裝置連上這場簡報。重試中…",
+    badLink: "這個連結無法遙控，請重新掃描電腦上的 QR。",
+    notesOnly: "只看講稿",
+    leave: "離開",
+    slidePrev: "上一張",
+    slideNext: "下一張",
+    tabNotes: "講稿",
+    tabPointer: "紅點",
+    tabInk: "畫筆",
+    tabTilt: "傾斜",
+    upNext: "接下來",
+    nextStep: "要點",
+    nextPage: "往下",
+    nextSlide: "下一張",
+    theEnd: "結尾",
+    inOverview: "輪廓",
+    block: "區塊",
+    pointerHint: "在縮圖上拖曳，螢幕上會出現紅點。",
+    inkHint: "在縮圖上畫線；換頁時會清除。",
+    clearInk: "清除筆跡",
+    tiltEnable: "啟用傾斜感測",
+    tiltDenied: "沒有取得動作感測的權限，請到瀏覽器設定允許後再試。",
+    tiltUnsupported: "這個裝置或瀏覽器沒有提供方向感測。",
+    tiltHold: "按住指向",
+    tiltRecentre: "重新置中",
+    tiltCalibrate: "校正",
+    tiltUncalibrated: "尚未校正：按住時手機的方向當作螢幕中央。",
+    tiltCalibrated: "已校正。指標偏掉時，對準螢幕中央按「重新置中」。",
+    tiltAim: (target, index, count) => `${index}/${count}　把手機頂端對準螢幕的${target}`,
+    tiltAimed: "對準了",
+    tiltCancel: "取消",
+    tiltBad: "範圍太小或方向不一致，請重新校正。",
+    tiltTargets: { centre: "中央", topLeft: "左上角", topRight: "右上角", bottomRight: "右下角", bottomLeft: "左下角" },
+    now: "目前",
+    noDeck: "等待簡報視窗…",
+};

package/dist/remote/links.d.ts

@@ -0,0 +1,2 @@
+/** Links to the other views of this page: the same URL with its own `view` (and `room`), without position or fragment. */
+export declare function pageLink(view: "remote" | "presenter" | "notes" | null, room?: string): string;

package/dist/remote/links.js

@@ -0,0 +1,12 @@
+/** Links to the other views of this page: the same URL with its own `view` (and `room`), without position or fragment. */
+export function pageLink(view, room) {
+    const url = new URL(location.href);
+    for (const name of ["view", "at", "room"])
+        url.searchParams.delete(name);
+    url.hash = "";
+    if (view)
+        url.searchParams.set("view", view);
+    if (room)
+        url.searchParams.set("room", room);
+    return url.href;
+}

package/dist/remote/overlay.d.ts

@@ -0,0 +1,11 @@
+export interface Overlay {
+    /** Shows the dot at a point of the stage ([0, 1], origin top left), or lets it fade. */
+    point(x: number, y: number, on: boolean): void;
+    /** Lets the dot fade where it is. */
+    hide(): void;
+    /** Adds points to a stroke; `key` names the stroke across messages. */
+    ink(key: string, points: number[]): void;
+    clear(): void;
+    destroy(): void;
+}
+export declare function createOverlay(stage: HTMLElement): Overlay;

package/dist/remote/overlay.js

@@ -0,0 +1,63 @@
+/** What a remote draws over the stage: the laser dot and the ink canvas. */
+import { h } from "../core/dom.js";
+import { createInk } from "./ink.js";
+/** The dot covers this share of the remaining distance in 16 ms: quick, without the jitter of a hand. */
+const EASE = 0.35;
+export function createOverlay(stage) {
+    const canvas = h("canvas", "ct-ink", "", { "aria-hidden": "true" });
+    const dot = h("div", "ct-laser", "", { "aria-hidden": "true" });
+    stage.append(canvas, dot);
+    const ink = createInk(canvas);
+    const motion = matchMedia("(prefers-reduced-motion: reduce)");
+    const observer = new ResizeObserver(() => {
+        ink.resize();
+        place();
+    });
+    observer.observe(stage);
+    let target = { x: 0.5, y: 0.5 };
+    let shown = { ...target };
+    let on = false;
+    let frame = 0;
+    let last = 0;
+    function place() {
+        dot.style.transform = `translate(${shown.x * stage.clientWidth}px,${shown.y * stage.clientHeight}px)`;
+    }
+    // One step per animation frame, however many `ptr` messages came in since the last one.
+    function step(now) {
+        frame = 0;
+        const share = motion.matches ? 1 : 1 - (1 - EASE) ** Math.max(1, (now - last) / 16);
+        last = now;
+        shown = { x: shown.x + (target.x - shown.x) * share, y: shown.y + (target.y - shown.y) * share };
+        if (Math.abs(target.x - shown.x) + Math.abs(target.y - shown.y) < 0.0005)
+            shown = { ...target };
+        else
+            frame = requestAnimationFrame(step);
+        place();
+    }
+    return {
+        point(x, y, show) {
+            target = { x, y };
+            // Coming on, the dot appears where it is aimed; it does not sweep in from where it was last seen.
+            if (show && !on)
+                shown = { x, y };
+            on = show;
+            dot.toggleAttribute("data-on", show);
+            if (!frame) {
+                last = performance.now();
+                frame = requestAnimationFrame(step);
+            }
+        },
+        hide() {
+            on = false;
+            dot.removeAttribute("data-on");
+        },
+        ink: (key, points) => ink.add(key, points),
+        clear: () => ink.clear(),
+        destroy() {
+            cancelAnimationFrame(frame);
+            observer.disconnect();
+            canvas.remove();
+            dot.remove();
+        },
+    };
+}

package/dist/remote/pairing.d.ts

@@ -0,0 +1,40 @@
+import type { HostMessage } from "./protocol.js";
+export interface PairRequest {
+    id: string;
+    code: string;
+    /** When the guest joined, on the host's clock. */
+    at: number;
+}
+/** A request the presenter has not answered after this long is denied. */
+export declare const REQUEST_TTL = 120000;
+export interface PairingOptions {
+    send(message: HostMessage): void;
+    /** Called after every change of `requests`, `controller`, or `token`. */
+    changed(): void;
+    /** The token granted before a reload of the host page, if any. */
+    token?: string | null;
+    now?: () => number;
+}
+export interface Pairing {
+    /** Guests waiting for the presenter's answer, oldest first. */
+    readonly requests: readonly PairRequest[];
+    /** Relay id of the connected guest that holds control, or `null`. */
+    readonly controller: string | null;
+    /** The one token that resumes control, or `null` when no guest is paired. */
+    readonly token: string | null;
+    join(id: string): void;
+    leave(id: string): void;
+    /** A guest presents a token; true when it now holds control. */
+    resume(id: string, token: string): boolean;
+    allow(id: string): void;
+    deny(id: string): void;
+    /** Takes control back and forgets the token, whether the guest is connected or not. */
+    revoke(): void;
+    /** Denies the requests older than `REQUEST_TTL`. */
+    expire(): void;
+    /** True when a message from this relay id may act on the deck. */
+    controls(id: unknown): boolean;
+    /** The relay connection ended: nobody is connected any more; the token stays. */
+    offline(): void;
+}
+export declare function createPairing({ send, changed, token: restored, now }: PairingOptions): Pairing;