@cesarvenzac/closeup 0.0.0-stage → 0.1.0

package/dist/settings.d.ts

@@ -0,0 +1,61 @@
+/** Every choice a take makes, their defaults, and keeping them between visits. */
+import type { Shape } from "./frame.ts";
+export declare const GRADIENTS: readonly [{
+    readonly name: "Dawn";
+    readonly from: "#f9d9e8";
+    readonly to: "#fdebd3";
+    readonly angle: 135;
+}, {
+    readonly name: "Mist";
+    readonly from: "#e3ecfb";
+    readonly to: "#cfdcf1";
+    readonly angle: 160;
+}, {
+    readonly name: "Sage";
+    readonly from: "#e6efe2";
+    readonly to: "#cfe0d3";
+    readonly angle: 135;
+}, {
+    readonly name: "Sand";
+    readonly from: "#f6f0e6";
+    readonly to: "#e6dcc8";
+    readonly angle: 120;
+}, {
+    readonly name: "Dusk";
+    readonly from: "#3b2a6b";
+    readonly to: "#c76b7c";
+    readonly angle: 135;
+}, {
+    readonly name: "Ink";
+    readonly from: "#1d1f24";
+    readonly to: "#3a3e47";
+    readonly angle: 160;
+}];
+export type BackgroundKind = "none" | "color" | "gradient" | "image";
+export type Settings = {
+    mode: "photo" | "video";
+    pick: "element" | "region";
+    shape: Shape;
+    /** Room round what's picked, a share of its size on each side. */
+    padding: number;
+    background: BackgroundKind;
+    color: string;
+    gradient: number;
+    /** Room between the take's edge and the page, on a background. */
+    inset: number;
+    radius: number;
+    shadow: boolean;
+    cursor: boolean;
+    cursorSize: number;
+    /** A ring spreading from the cursor's tip on each click. */
+    ring: boolean;
+    /** Who moves the cursor in a video: your mouse, or the page's saved script. */
+    moves: "yours" | "script";
+    clicks: boolean;
+    tabAudio: boolean;
+    quality: "standard" | "high";
+};
+export declare const DEFAULTS: Settings;
+/** The saved settings over the defaults, anything unknown or of the wrong type left out. */
+export declare function loadSettings(): Settings;
+export declare function saveSettings(settings: Settings): void;

package/dist/settings.js

@@ -0,0 +1,59 @@
+/** Every choice a take makes, their defaults, and keeping them between visits. */
+import { SHAPES } from "./frame.js";
+export const GRADIENTS = [
+    { name: "Dawn", from: "#f9d9e8", to: "#fdebd3", angle: 135 },
+    { name: "Mist", from: "#e3ecfb", to: "#cfdcf1", angle: 160 },
+    { name: "Sage", from: "#e6efe2", to: "#cfe0d3", angle: 135 },
+    { name: "Sand", from: "#f6f0e6", to: "#e6dcc8", angle: 120 },
+    { name: "Dusk", from: "#3b2a6b", to: "#c76b7c", angle: 135 },
+    { name: "Ink", from: "#1d1f24", to: "#3a3e47", angle: 160 },
+];
+export const DEFAULTS = {
+    mode: "video",
+    pick: "element",
+    shape: "16:9",
+    padding: 0.3,
+    background: "none",
+    color: "#f2f1ee",
+    gradient: 0,
+    inset: 0.08,
+    radius: 18,
+    shadow: true,
+    cursor: true,
+    cursorSize: 48,
+    ring: true,
+    moves: "yours",
+    clicks: true,
+    tabAudio: false,
+    quality: "high",
+};
+const KEY = "closeup:settings";
+/** The saved settings over the defaults, anything unknown or of the wrong type left out. */
+export function loadSettings() {
+    try {
+        const saved = JSON.parse(localStorage.getItem(KEY) ?? "{}");
+        const settings = { ...DEFAULTS };
+        for (const key of Object.keys(DEFAULTS)) {
+            if (typeof saved[key] === typeof DEFAULTS[key])
+                settings[key] = saved[key];
+        }
+        if (!(settings.shape in SHAPES))
+            settings.shape = DEFAULTS.shape;
+        if (!(settings.gradient in GRADIENTS))
+            settings.gradient = 0;
+        if (settings.moves !== "script")
+            settings.moves = "yours";
+        return settings;
+    }
+    catch {
+        return { ...DEFAULTS };
+    }
+}
+export function saveSettings(settings) {
+    try {
+        localStorage.setItem(KEY, JSON.stringify(settings));
+    }
+    catch {
+        // Private windows and blocked storage: the settings last as long as the page.
+    }
+}

package/dist/shortcut.d.ts

@@ -0,0 +1,23 @@
+/** Keyboard shortcuts as people write them ("Alt+Shift+C"), matched by key position so ⌥ letters still match on a Mac. */
+export type Shortcut = {
+    alt: boolean;
+    shift: boolean;
+    meta: boolean;
+    ctrl: boolean;
+    code: string;
+};
+/** "Alt+Shift+C" → the modifiers and the key's code ("KeyC"); a digit is "Digit1". Every shortcut needs a modifier. */
+export declare function parseShortcut(text: string): Shortcut;
+type KeyLike = {
+    code: string;
+    altKey: boolean;
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+};
+export declare const matches: (event: KeyLike, shortcut: Shortcut) => boolean;
+/** For showing: "⌥⇧C". */
+export declare function shortcutLabel(shortcut: Shortcut): string;
+/** Typing in a field isn't reaching for a shortcut: there ⌥⇧C types a letter. */
+export declare const typing: (target: EventTarget | null) => boolean;
+export {};

package/dist/shortcut.js

@@ -0,0 +1,48 @@
+/** Keyboard shortcuts as people write them ("Alt+Shift+C"), matched by key position so ⌥ letters still match on a Mac. */
+const MODIFIERS = {
+    alt: "alt",
+    option: "alt",
+    "⌥": "alt",
+    shift: "shift",
+    "⇧": "shift",
+    meta: "meta",
+    cmd: "meta",
+    command: "meta",
+    "⌘": "meta",
+    ctrl: "ctrl",
+    control: "ctrl",
+    "⌃": "ctrl",
+};
+/** "Alt+Shift+C" → the modifiers and the key's code ("KeyC"); a digit is "Digit1". Every shortcut needs a modifier. */
+export function parseShortcut(text) {
+    const parts = text.split("+").map((part) => part.trim()).filter(Boolean);
+    const shortcut = { alt: false, shift: false, meta: false, ctrl: false, code: "" };
+    for (const part of parts) {
+        const modifier = MODIFIERS[part.toLowerCase()];
+        if (modifier)
+            shortcut[modifier] = true;
+        else if (/^[a-z]$/i.test(part))
+            shortcut.code = `Key${part.toUpperCase()}`;
+        else if (/^[0-9]$/.test(part))
+            shortcut.code = `Digit${part}`;
+        else
+            shortcut.code = part;
+    }
+    if (!shortcut.code)
+        throw new Error(`No key in shortcut "${text}"`);
+    if (!shortcut.alt && !shortcut.meta && !shortcut.ctrl)
+        throw new Error(`Shortcut "${text}" needs ⌥, ⌘ or Ctrl: a bare key would fire while typing`);
+    return shortcut;
+}
+export const matches = (event, shortcut) => event.code === shortcut.code &&
+    event.altKey === shortcut.alt &&
+    event.shiftKey === shortcut.shift &&
+    event.metaKey === shortcut.meta &&
+    event.ctrlKey === shortcut.ctrl;
+/** For showing: "⌥⇧C". */
+export function shortcutLabel(shortcut) {
+    const key = shortcut.code.replace(/^Key|^Digit/, "");
+    return `${shortcut.ctrl ? "⌃" : ""}${shortcut.alt ? "⌥" : ""}${shortcut.shift ? "⇧" : ""}${shortcut.meta ? "⌘" : ""}${key}`;
+}
+/** Typing in a field isn't reaching for a shortcut: there ⌥⇧C types a letter. */
+export const typing = (target) => target instanceof HTMLElement && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));

package/dist/sounds.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The take's sound: the tab's own, if it was shared, a click for each press of the drawn cursor
+ * and a softer tick for each key a script types, synthesised (nothing downloaded) and played to
+ * the speakers too, so the person recording hears what the video will. All of it mixed into one
+ * audio track for the recorder.
+ */
+export declare class Mixer {
+    readonly context: AudioContext;
+    private readonly destination;
+    private readonly monitor;
+    private readonly noise;
+    private sources;
+    constructor();
+    get track(): MediaStreamTrack;
+    /** The tab's own sound, into the recording only: the tab already plays it aloud. */
+    add(track: MediaStreamTrack): void;
+    /** A trackpad's click: a firmer tick going down, a lighter one coming up. */
+    click(down: boolean): void;
+    /** A key going down: a short, soft tick, lighter than a click, each a little different. */
+    key(): void;
+    close(): void;
+}

package/dist/sounds.js

@@ -0,0 +1,94 @@
+/**
+ * The take's sound: the tab's own, if it was shared, a click for each press of the drawn cursor
+ * and a softer tick for each key a script types, synthesised (nothing downloaded) and played to
+ * the speakers too, so the person recording hears what the video will. All of it mixed into one
+ * audio track for the recorder.
+ */
+export class Mixer {
+    context = new AudioContext();
+    destination = this.context.createMediaStreamDestination();
+    monitor = this.context.createGain();
+    noise;
+    sources = [];
+    constructor() {
+        this.monitor.gain.value = 0.6;
+        this.monitor.connect(this.context.destination);
+        // Half a second of white noise, the body of every click.
+        const length = Math.round(this.context.sampleRate * 0.5);
+        this.noise = this.context.createBuffer(1, length, this.context.sampleRate);
+        const data = this.noise.getChannelData(0);
+        for (let k = 0; k < length; k++)
+            data[k] = Math.random() * 2 - 1;
+    }
+    get track() {
+        return this.destination.stream.getAudioTracks()[0];
+    }
+    /** The tab's own sound, into the recording only: the tab already plays it aloud. */
+    add(track) {
+        const source = this.context.createMediaStreamSource(new MediaStream([track]));
+        source.connect(this.destination);
+        this.sources.push(source);
+    }
+    /** A trackpad's click: a firmer tick going down, a lighter one coming up. */
+    click(down) {
+        const c = this.context;
+        if (c.state === "suspended")
+            void c.resume();
+        const now = c.currentTime;
+        const out = c.createGain();
+        out.connect(this.destination);
+        out.connect(this.monitor);
+        const tick = c.createBufferSource();
+        tick.buffer = this.noise;
+        const band = c.createBiquadFilter();
+        band.type = "bandpass";
+        band.frequency.value = down ? 3000 : 4200;
+        band.Q.value = 1.1;
+        const tickGain = c.createGain();
+        const peak = down ? 0.5 : 0.22;
+        const length = down ? 0.028 : 0.018;
+        tickGain.gain.setValueAtTime(0.0001, now);
+        tickGain.gain.exponentialRampToValueAtTime(peak, now + 0.001);
+        tickGain.gain.exponentialRampToValueAtTime(0.0001, now + length);
+        tick.connect(band).connect(tickGain).connect(out);
+        tick.start(now, Math.random() * 0.4, length + 0.01);
+        if (down) {
+            // A low knock under the tick, felt more than heard.
+            const knock = c.createOscillator();
+            knock.frequency.setValueAtTime(190, now);
+            knock.frequency.exponentialRampToValueAtTime(90, now + 0.04);
+            const knockGain = c.createGain();
+            knockGain.gain.setValueAtTime(0.0001, now);
+            knockGain.gain.exponentialRampToValueAtTime(0.3, now + 0.002);
+            knockGain.gain.exponentialRampToValueAtTime(0.0001, now + 0.045);
+            knock.connect(knockGain).connect(out);
+            knock.start(now);
+            knock.stop(now + 0.06);
+        }
+    }
+    /** A key going down: a short, soft tick, lighter than a click, each a little different. */
+    key() {
+        const c = this.context;
+        if (c.state === "suspended")
+            void c.resume();
+        const now = c.currentTime;
+        const tick = c.createBufferSource();
+        tick.buffer = this.noise;
+        const band = c.createBiquadFilter();
+        band.type = "bandpass";
+        band.frequency.value = 2200 + Math.random() * 900;
+        band.Q.value = 1.4;
+        const gain = c.createGain();
+        gain.gain.setValueAtTime(0.0001, now);
+        gain.gain.exponentialRampToValueAtTime(0.16, now + 0.001);
+        gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.022);
+        tick.connect(band).connect(gain);
+        gain.connect(this.destination);
+        gain.connect(this.monitor);
+        tick.start(now, Math.random() * 0.4, 0.03);
+    }
+    close() {
+        this.sources.forEach((source) => source.disconnect());
+        void this.context.close();
+    }
+}

package/dist/stage.d.ts

@@ -0,0 +1,12 @@
+import type { Stage } from "./frame.ts";
+/**
+ * Puts the page on stage: <body> scaled and moved so the frame fills the middle of the window,
+ * the browser drawing it at that size (sharp, not an enlarged capture), scrolling locked. The
+ * layout doesn't change, only how big it's drawn. Everything Closeup adds lives outside <body>,
+ * so it stays put. Resolves once the zoom has settled; the returned function puts it all back.
+ */
+export declare function enterStage(stage: Stage, { animate }?: {
+    animate?: boolean | undefined;
+}): Promise<() => Promise<void>>;
+export declare const nextFrame: () => Promise<void>;
+export declare const wait: (ms: number) => Promise<void>;

package/dist/stage.js

@@ -0,0 +1,53 @@
+/** The zoom into the stage and back out: entering eases out over a moment, leaving is quicker. */
+const ENTER_MS = 420;
+const LEAVE_MS = 260;
+const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+/**
+ * Puts the page on stage: <body> scaled and moved so the frame fills the middle of the window,
+ * the browser drawing it at that size (sharp, not an enlarged capture), scrolling locked. The
+ * layout doesn't change, only how big it's drawn. Everything Closeup adds lives outside <body>,
+ * so it stays put. Resolves once the zoom has settled; the returned function puts it all back.
+ */
+export async function enterStage(stage, { animate = true } = {}) {
+    const root = document.documentElement;
+    const body = document.body;
+    const saved = {
+        overflow: root.style.overflow,
+        transform: body.style.transform,
+        origin: body.style.transformOrigin,
+        transition: body.style.transition,
+        willChange: body.style.willChange,
+    };
+    root.style.overflow = "hidden";
+    body.style.transformOrigin = "0 0";
+    const target = `translate(${stage.tx}px, ${stage.ty}px) scale(${stage.scale})`;
+    const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (animate && !reduced) {
+        body.style.transition = `transform ${ENTER_MS}ms ${EASE}`;
+        body.style.transform = "translate(0px, 0px) scale(1)";
+        // One frame at the start, so the transition has somewhere to come from.
+        await nextFrame();
+        body.style.transform = target;
+        await wait(ENTER_MS + 30);
+        body.style.transition = saved.transition;
+    }
+    else
+        body.style.transform = target;
+    // No will-change: with it Chrome may keep drawing at the old scale, and the point is drawing at the new one.
+    await nextFrame();
+    await nextFrame();
+    return async () => {
+        if (animate && !reduced) {
+            body.style.transition = `transform ${LEAVE_MS}ms ${EASE}`;
+            body.style.transform = "translate(0px, 0px) scale(1)";
+            await wait(LEAVE_MS + 30);
+        }
+        root.style.overflow = saved.overflow;
+        body.style.transform = saved.transform;
+        body.style.transformOrigin = saved.origin;
+        body.style.transition = saved.transition;
+        body.style.willChange = saved.willChange;
+    };
+}
+export const nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+export const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

package/dist/store.d.ts

@@ -0,0 +1,4 @@
+/** Each page's script, kept in the browser by its path, so the scene is there the next time. */
+import { type Script } from "./script.ts";
+export declare function loadScript(path?: string): Script | null;
+export declare function saveScript(script: Script | null, path?: string): void;

package/dist/store.js

@@ -0,0 +1,22 @@
+/** Each page's script, kept in the browser by its path, so the scene is there the next time. */
+import { parseScript } from "./script.js";
+const keyOf = (path) => `closeup:script:${path}`;
+export function loadScript(path = location.pathname) {
+    try {
+        return parseScript(JSON.parse(localStorage.getItem(keyOf(path)) ?? "null"));
+    }
+    catch {
+        return null;
+    }
+}
+export function saveScript(script, path = location.pathname) {
+    try {
+        if (script)
+            localStorage.setItem(keyOf(path), JSON.stringify(script));
+        else
+            localStorage.removeItem(keyOf(path));
+    }
+    catch {
+        // Private windows and blocked storage: the script lasts as long as the page.
+    }
+}

package/dist/take.d.ts

@@ -0,0 +1,69 @@
+/**
+ * A take, start to end: share this tab, put the picked area on stage, crop the capture to it,
+ * draw the cursor (following your mouse, or played from a script), compose the frames on their
+ * background, and record them (with the clicks and the tab's sound) or keep one as a photo.
+ * Everything is put back afterwards, in order.
+ */
+import { DrawnCursor } from "./cursor.ts";
+import { type Rect } from "./frame.ts";
+import { SyntheticPointer } from "./pointer.ts";
+import { type Script } from "./script.ts";
+import { type Settings } from "./settings.ts";
+export type Picked = {
+    element: Element | null;
+    rect: Rect;
+};
+export type Result = {
+    kind: "photo" | "video";
+    blob: Blob;
+    type: string;
+    width: number;
+    height: number;
+    seconds?: number;
+    /** The script a video's cursor played, so the take can be filmed again. */
+    script?: Script;
+};
+export type Running = {
+    /** The staged frame on screen, for placing the controls round it. */
+    screen: Rect;
+    started: number;
+    /** For a scripted take: settles once the script has played and the cursor has lingered. */
+    finished?: Promise<void>;
+    stop(): Promise<Result>;
+};
+export declare const toRect: ({ x, y, width, height }: DOMRectReadOnly) => Rect;
+/** What a take films: an element with room round it, a drawn region as drawn, either one to the chosen shape. */
+export declare const frameOf: (rect: Rect, element: Element | null, settings: Settings) => Rect;
+/** The box the capture is cropped to, and a dim veil round it that shows what's filmed (outside the box, so never in it). */
+export declare function frameBox(screen: Rect, host: Element): HTMLDivElement;
+/** Where a take's own layers go (the crop box, the cursor, the hidden video), and which events are Closeup's own. */
+export type Layers = {
+    host: HTMLElement;
+    ignore: (target: EventTarget | null) => boolean;
+};
+/** The page's element at a point, Closeup's own layers left out. */
+export declare const pageHit: ({ host, ignore }: Layers) => (x: number, y: number) => Element | null;
+/** What plays a script: the drawn cursor, and the pointer the page is told about. */
+export type Actor = {
+    cursor: DrawnCursor;
+    pointer: SyntheticPointer;
+    dispose(): void;
+};
+/**
+ * What plays a script, set up over the page: a clear sheet that keeps the real mouse off it (so
+ * nothing under it hovers) with the real cursor hidden, the page's hover rules copied for the
+ * drawn cursor, the pointer the page is told about, and the cursor. `dispose()` takes it all away,
+ * telling the page the pointer left so what it hovers lets go.
+ */
+export declare function createActor(layers: Layers, { size, onPress, ring }: {
+    size: number;
+    onPress?: (down: boolean) => void;
+    ring?: boolean;
+}): Actor;
+/** A photo of the picked area, on its background, at the stage's resolution. */
+export declare function takePhoto(picked: Picked, settings: Settings, layers: Layers, image: ImageBitmap | null): Promise<Result>;
+/**
+ * Starts recording the picked area, the cursor following your mouse or, given a `script`,
+ * playing it; `stop()` ends the take and puts the page back.
+ */
+export declare function startVideo(picked: Picked, settings: Settings, layers: Layers, image: ImageBitmap | null, script?: Script | null): Promise<Running>;