postext-folio 0.5.3 → 0.6.1

package/dist/videos.js

@@ -0,0 +1,173 @@
+import { flowToPage, isHlsMimeType, resourceBlockToPage } from "postext";
+/** The video resources printed on a page, in the order they are painted:
+ *  each picture's place in fractions of the page as bound (trimmed), with
+ *  the turns the page and the block give it. A mirrored (right-to-left)
+ *  page sets its pictures unmirrored, as the renderers do. */
+export function pageVideoSpots(page, doc) {
+    const out = [];
+    const blocks = [...page.columns.flatMap((c) => c.blocks), ...(page.floats ?? [])];
+    const inset = Math.max(0, doc.trimOffset);
+    const tw = page.width - 2 * inset;
+    const th = page.height - 2 * inset;
+    if (!(tw > 0 && th > 0))
+        return out;
+    const seen = new Map();
+    for (const block of blocks) {
+        const rb = block.resourceBlock;
+        if (!rb || rb.kind !== "video" || !rb.video)
+            continue;
+        const bx = (rb.rotation ? 0 : block.bbox.x) + rb.bodyRect.x;
+        const by = (rb.rotation ? 0 : block.bbox.y) + rb.bodyRect.y;
+        const { width: bw, height: bh } = rb.bodyRect;
+        if (!(bw > 0 && bh > 0))
+            continue;
+        // The body's corners: in the block's frame, the page's flow frame,
+        // then on the sheet.
+        const onSheet = (x, y) => {
+            const f = resourceBlockToPage(rb, x, y);
+            const p = flowToPage(page, f.x, f.y);
+            return { x: (p.x - inset) / tw, y: (p.y - inset) / th };
+        };
+        let origin = onSheet(bx, by);
+        const right = onSheet(bx + bw, by);
+        const below = onSheet(bx, by + bh);
+        let across = { x: right.x - origin.x, y: right.y - origin.y };
+        let down = { x: below.x - origin.x, y: below.y - origin.y };
+        // A mirrored flow lays the box out mirrored but turns the picture back
+        // in it: the axis that runs across the sheet is reversed again.
+        if (page.flow?.writingMode === "horizontal-tb") {
+            if (Math.abs(across.x) >= Math.abs(down.x)) {
+                origin = { x: origin.x + across.x, y: origin.y + across.y };
+                across = { x: -across.x, y: -across.y };
+            }
+            else {
+                origin = { x: origin.x + down.x, y: origin.y + down.y };
+                down = { x: -down.x, y: -down.y };
+            }
+        }
+        const id = rb.resource.id;
+        const n = seen.get(id) ?? 0;
+        seen.set(id, n + 1);
+        out.push({
+            key: `${id}#${n}`,
+            resourceId: id,
+            video: rb.video,
+            origin,
+            across,
+            down,
+            heightPx: bh,
+            ...(rb.bodySource ? { crop: { ...rb.bodySource } } : {}),
+        });
+    }
+    return out;
+}
+/** Whether a point of the page (fractions from its top left corner) lies on
+ *  a spot's picture. */
+export function spotContains(spot, x, y) {
+    const px = x - spot.origin.x;
+    const py = y - spot.origin.y;
+    const s = (px * spot.across.x + py * spot.across.y) / (spot.across.x ** 2 + spot.across.y ** 2);
+    const t = (px * spot.down.x + py * spot.down.y) / (spot.down.x ** 2 + spot.down.y ** 2);
+    return s >= 0 && s <= 1 && t >= 0 && t <= 1;
+}
+/** The variant to cap a stream at: the tallest no taller than `maxHeight`
+ *  (with a quarter of slack), else the shortest there is. */
+export function hlsLevelCap(levels, maxHeight) {
+    let cap = -1;
+    let lowest = -1;
+    levels.forEach((l, i) => {
+        if (lowest < 0 || l.height < levels[lowest].height)
+            lowest = i;
+        if (l.height <= maxHeight * 1.25 && (cap < 0 || l.height > levels[cap].height))
+            cap = i;
+    });
+    return cap >= 0 ? cap : lowest;
+}
+/**
+ * Gives a `<video>` its source: a file's address as it is, or an HLS
+ * stream (`hls`, or an `.m3u8` address). A stream plays through hls.js
+ * (loaded on demand) wherever Media Source Extensions exist, its quality
+ * capped at the variant nearest `maxHeight` px tall, so a picture a few
+ * hundred pixels tall never pulls a 4K variant; the browser's own HLS
+ * (Safari on iOS) is the fallback, or the first choice with `native:
+ * 'prefer'` (a player shown at its size, which picks its own variant).
+ * A fatal network or media error is retried once each. `lazy` loads no
+ * segment before the first play. Resolves to a function that lets the
+ * source go; rejects when the stream cannot play.
+ */
+export async function attachVideoSource(element, url, options = {}) {
+    const hls = options.hls ?? /\.m3u8(?:$|[?#])/i.test(url);
+    const nativeHls = hls && !!element.canPlayType("application/vnd.apple.mpegurl");
+    const plain = () => {
+        element.src = url;
+        return () => {
+            element.removeAttribute("src");
+            element.load();
+        };
+    };
+    if (!hls || (nativeHls && options.native === "prefer"))
+        return plain();
+    let Hls = null;
+    try {
+        Hls = (await import("hls.js")).default;
+    }
+    catch {
+        Hls = null;
+    }
+    if (!Hls || !Hls.isSupported()) {
+        if (nativeHls)
+            return plain();
+        throw new Error("HLS is not supported");
+    }
+    const H = Hls;
+    const player = new H({
+        capLevelToPlayerSize: false,
+        startLevel: -1,
+        autoStartLoad: !options.lazy,
+        // `corsTag`: every playlist and segment is asked for with a query of its
+        // own, so the browser's cache never hands back a copy fetched without
+        // CORS by another player of the same stream (a plain <video> sends no
+        // Origin, and a server that answers it without `Vary: Origin` gets that
+        // copy reused for this cross-origin read, which then fails: playback
+        // stops at the first such segment).
+        ...(options.corsTag ? { xhrSetup: (xhr, u) => xhr.open("GET", corsTagged(u), true) } : {}),
+    });
+    if (options.lazy)
+        element.addEventListener("play", () => player.startLoad(), { once: true });
+    const maxHeight = options.maxHeight;
+    if (maxHeight) {
+        player.on(H.Events.MANIFEST_PARSED, (_e, data) => {
+            const cap = hlsLevelCap(data.levels ?? [], maxHeight);
+            if (cap >= 0)
+                player.autoLevelCapping = cap;
+        });
+    }
+    const retried = new Set();
+    player.on(H.Events.ERROR, (_e, data) => {
+        if (!data.fatal || !data.type || retried.has(data.type))
+            return;
+        retried.add(data.type);
+        if (data.type === H.ErrorTypes.NETWORK_ERROR)
+            player.startLoad();
+        else if (data.type === H.ErrorTypes.MEDIA_ERROR)
+            player.recoverMediaError();
+    });
+    player.loadSource(url);
+    player.attachMedia(element);
+    return () => player.destroy();
+}
+/** An address with the query that keeps its cache entry apart (see
+ *  `corsTag`). */
+export function corsTagged(url) {
+    if (/^(blob|data):/i.test(url) || /[?&]pt-cors(=|&|$)/.test(url))
+        return url;
+    const at = url.indexOf("#");
+    const base = at < 0 ? url : url.slice(0, at);
+    const hash = at < 0 ? "" : url.slice(at);
+    return `${base}${base.includes("?") ? "&" : "?"}pt-cors=1${hash}`;
+}
+/** Whether a video plays from an HLS address. */
+export function isHlsVideo(video, url) {
+    return isHlsMimeType(video.mimeType) || /\.m3u8(?:$|[?#])/i.test(url);
+}
+//# sourceMappingURL=videos.js.map

package/dist/videos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"videos.js","sourceRoot":"","sources":["../src/videos.ts"],"names":[],"mappings":"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"}

package/dist/viewer.d.ts

@@ -1,5 +1,5 @@
 import { type FolioConfig, type FolioPaperConfig } from "postext";
-import { type PageSource } from "./pageFlip";
+import { type PageSource, type PageVideoFrame } from "./pageFlip";
 /** A page of the book: its source, or its source with a text alternative
  *  and the paper it is printed on when that is not the book's (a plate
  *  section on gloss in a matte book). */
@@ -53,6 +53,12 @@ export interface FolioPagePoint {
     x: number;
     y: number;
 }
+/** A video drawn on a page of the book (#477): the element playing it and
+ *  where its picture lies on the page (see `PageVideoFrame`). */
+export interface FolioPageVideo extends PageVideoFrame {
+    page: number;
+    element: HTMLVideoElement;
+}
 export interface FolioLabels {
     /** The viewer's accessible name. */
     region: string;
@@ -99,6 +105,14 @@ export interface FolioOptions {
     /** Told as soon as the book is sent to another spread (a button, a key,
      *  a page let go past halfway), before its leaves have landed. */
     onTarget?: (state: FolioState) => void;
+    /** A click on a page, before it turns the page (hand mode) or reaches
+     *  the host (select mode): return true when the click did something else,
+     *  such as playing a video printed there. In orbit and select modes it is
+     *  asked only where `isPageAction` says a click acts. */
+    onPageClick?: (point: FolioPagePoint) => boolean;
+    /** Whether a click at this point of a page acts on it (`onPageClick`):
+     *  the pointer shows a hand there. */
+    isPageAction?: (point: FolioPagePoint) => boolean;
     /** Told when the page slots change size: a host painting pages for the
      *  viewer paints them at `deviceWidth` × `deviceHeight` pixels, so they
      *  are shown 1:1 both at rest and on a turning leaf. */
@@ -154,6 +168,9 @@ export interface FolioViewer {
     setInteraction(mode: FolioInteraction): void;
     /** A page's canvas was drawn again in place: shows it again. */
     refreshPage(src: PageSource): void;
+    /** Plays a video on a page (#477): drawn over the page's painting, on
+     *  the leaf that carries it as it lies or turns; `null` takes it off. */
+    setPageVideo(video: FolioPageVideo | null): void;
     /** The page under a pointer and where on it, as the book is seen (the
      *  tilted, orbited 3D book included); null off the open pages. */
     pageAt(event: {

package/dist/viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../src/viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AACtF,OAAO,EAA6C,KAAK,UAAU,EAAkB,MAAM,YAAY,CAAC;AAIxG;;yCAEyC;AACzC,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG;IAAE,GAAG,EAAE,UAAU,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAEjG,oCAAoC;AACpC,MAAM,WAAW,eAAe;IAC9B,uEAAuE;IACvE,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;qDACiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;wDAMoD;IACpD,UAAU,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C;4CACwC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;oCAEgC;IAChC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;IAC3C;;2CAEuC;IACvC,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;;6DAG6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3D;kEACkE;AAClE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,WAAW;IAC1B,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb;wCACoC;IACpC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACnD;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB;0CACsC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;2EACuE;IACvE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;0EACsE;IACtE,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACpC;wEACoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;4CACwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;6EACyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,kEAAkE;IAClE,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B;kBACc;IACd,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC;sEACkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC;;4DAEwD;IACxD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;uDACuD;AACvD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B;0EACsE;IACtE,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;IAC/D,2DAA2D;IAC3D,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;IACjE,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb;uDACmD;IACnD,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,GAAG,SAAS,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;IACzH,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,uDAAuD;IACvD,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC9C,4CAA4C;IAC5C,aAAa,CAAC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACjD;yCACqC;IACrC,SAAS,IAAI,IAAI,CAAC;IAClB;;iDAE6C;IAC7C,OAAO,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChD,yCAAyC;IACzC,cAAc,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC7C,gEAAgE;IAChE,WAAW,CAAC,GAAG,EAAE,UAAU,GAAG,IAAI,CAAC;IACnC;sEACkE;IAClE,MAAM,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,cAAc,GAAG,IAAI,CAAC;IAC3E;qCACiC;IACjC,aAAa,CAAC,KAAK,EAAE,cAAc,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACtE,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,OAAO,IAAI,IAAI,CAAC;CACjB;AAeD,qEAAqE;AACrE,eAAO,MAAM,YAAY,MAAM,CAAC;AAmChC;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,GAAG,WAAW,CAkqBtF"}
+{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../src/viewer.ts"],"names":[],"mappings":"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"}

package/dist/viewer.js

@@ -108,6 +108,10 @@ export function createFolio(container, options) {
     let swipe = null;
     let disposed = false;
     let slot = { width: 0, height: 0, deviceWidth: 0, deviceHeight: 0 };
+    let pageVideo = null;
+    /** Where a press on a page began, on the page (a click there may act on
+     *  it rather than turn it). */
+    let pressPoint = null;
     const rtl = () => binding === "right";
     const pagesOf = (s) => (s ?? [null, null]).filter((i) => i !== null);
     /** One page at a time on a WebGL book: the spine runs along the page's
@@ -245,6 +249,7 @@ export function createFolio(container, options) {
             slot = next;
             options.onLayout?.(slot);
         }
+        placeDomVideo();
         flipper?.redraw();
     }
     function pageEl(i, slot) {
@@ -288,6 +293,45 @@ export function createFolio(container, options) {
         }
         return el;
     }
+    /** Shows the page video: on the WebGL book, drawn by the leaf that
+     *  carries its page; on the DOM spread, laid over the page. */
+    function applyVideo() {
+        const v = pageVideo;
+        flipper?.setVideo(v ? { src: sourceOf(pages[v.page]), element: v.element, frame: v } : null);
+        placeDomVideo();
+    }
+    /** The DOM spread (no WebGL): the video element over its page, mapped
+     *  onto the picture's place by a transform (it may lie turned). */
+    function placeDomVideo() {
+        const v = pageVideo;
+        if (!v || flipper) {
+            if (v?.element.classList.contains("postext-folio-video")) {
+                v.element.classList.remove("postext-folio-video");
+                v.element.remove();
+            }
+            return;
+        }
+        const els = [...spreadEl.children];
+        const s = spreads[shown] ?? [null, null];
+        const slots = single && !singleGl() ? [s[0] ?? s[1]] : s;
+        const at = slots.indexOf(v.page);
+        const el = at >= 0 ? els[at] : undefined;
+        if (!el) {
+            v.element.remove();
+            return;
+        }
+        const w = el.clientWidth;
+        const h = el.clientHeight;
+        const unit = 100;
+        v.element.classList.add("postext-folio-video");
+        Object.assign(v.element.style, {
+            width: `${unit}px`,
+            height: `${unit}px`,
+            transform: `matrix(${(v.across.x * w) / unit}, ${(v.across.y * h) / unit}, ${(v.down.x * w) / unit}, ${(v.down.y * h) / unit}, ${v.origin.x * w}, ${v.origin.y * h})`,
+        });
+        if (v.element.parentElement !== el)
+            el.append(v.element);
+    }
     function render() {
         const s = spreads[shown] ?? [null, null];
         const slots = single && !singleGl() ? [s[0] ?? s[1]] : s;
@@ -301,6 +345,7 @@ export function createFolio(container, options) {
         count.textContent = on.length ? labels.count(on, pages.length) : "";
         prevBtn.disabled = current <= 0;
         nextBtn.disabled = current >= spreads.length - 1;
+        placeDomVideo();
         // The settled spread, drawn at rest.
         flipper?.clear();
     }
@@ -359,6 +404,8 @@ export function createFolio(container, options) {
         const rgb = rgbOf(paper);
         if (rgb)
             flipper.setPaper(...rgb);
+        if (pageVideo)
+            applyVideo();
     }
     /** Lays the book out again: spreads, mode, flipper. */
     function rebuild(atPage) {
@@ -445,10 +492,59 @@ export function createFolio(container, options) {
     });
     // Select mode: a text cursor over the pages as the book is seen.
     root.addEventListener("pointermove", (event) => {
-        if (interaction !== "select" || event.buttons)
+        if (event.buttons)
             return;
-        root.classList.toggle("is-over-page", !!pageAt(event));
+        const point = holding ? null : pageAt(event);
+        if (interaction === "select")
+            root.classList.toggle("is-over-page", !!point);
+        if (options.isPageAction)
+            root.classList.toggle("is-over-action", !!point && options.isPageAction(point));
+        // Hand mode: the hand shows only where a page can be taken, its
+        // outer half (#494).
+        root.classList.toggle("is-over-grip", interaction === "hand" && !holding && !!flipper && flipper.hit(event) !== 0);
     });
+    // Orbit and select modes: a click on something a click acts on (a video)
+    // acts on it, as in hand mode. The press is taken before the host hears
+    // it in select mode (no caret, no link followed); in orbit mode a drag
+    // from it still turns the view.
+    let actionPress = null;
+    let swallowClick = false;
+    root.addEventListener("pointerdown", (event) => {
+        actionPress = null;
+        if (interaction === "hand" || event.button !== 0 || !options.onPageClick || !options.isPageAction)
+            return;
+        if (event.target.closest(".postext-folio-nav"))
+            return;
+        const point = pageAt(event);
+        if (!point || !options.isPageAction(point))
+            return;
+        actionPress = { x: event.clientX, y: event.clientY, id: event.pointerId, point };
+        if (interaction === "select")
+            event.stopPropagation();
+    }, true);
+    root.addEventListener("pointermove", (event) => {
+        if (actionPress && interaction === "select" && event.pointerId === actionPress.id)
+            event.stopPropagation();
+    }, true);
+    root.addEventListener("pointerup", (event) => {
+        const press = actionPress;
+        if (!press || event.pointerId !== press.id)
+            return;
+        actionPress = null;
+        if (interaction === "select") {
+            event.stopPropagation();
+            swallowClick = true;
+        }
+        if (Math.hypot(event.clientX - press.x, event.clientY - press.y) < CLICK_SLOP)
+            options.onPageClick?.(press.point);
+    }, true);
+    root.addEventListener("click", (event) => {
+        if (!swallowClick)
+            return;
+        swallowClick = false;
+        event.stopPropagation();
+    }, true);
+    root.addEventListener("pointerleave", () => root.classList.remove("is-over-action", "is-over-grip"));
     root.addEventListener("pointerdown", (event) => {
         // Only the hand takes pages, swipes and clicks them over.
         if (interaction !== "hand")
@@ -479,6 +575,8 @@ export function createFolio(container, options) {
         if (flipper ? !flipper.hit(event) : !target.closest(".postext-folio-spread"))
             return false;
         press = { x: event.clientX, y: event.clientY };
+        // Where it was pressed, read before the hand lifts the leaf.
+        pressPoint = options.onPageClick ? pageAt(event) : null;
         if (singleGl()) {
             decide(event);
             return true;
@@ -528,8 +626,10 @@ export function createFolio(container, options) {
             press = null;
             const dx = e.clientX - start.x;
             const dy = e.clientY - start.y;
-            if (Math.hypot(dx, dy) < CLICK_SLOP)
-                go(current + 1);
+            if (Math.hypot(dx, dy) < CLICK_SLOP) {
+                if (!pageClick())
+                    go(current + 1);
+            }
             else if (Math.abs(dx) > SWIPE && Math.abs(dx) > Math.abs(dy) && Math.sign(dx) === -toSpine)
                 go(current - 1);
             e.stopPropagation();
@@ -573,7 +673,8 @@ export function createFolio(container, options) {
             spreadEl.classList.remove("is-held");
             holding = null;
             press = null;
-            flipper?.release(click);
+            // A click that acts on the page (a video) lets the leaf fall back.
+            flipper?.release(click && !pageClick());
         };
         window.addEventListener("pointermove", onMove);
         // Captured, so the stage's swipe does not hear the hold's release.
@@ -598,6 +699,10 @@ export function createFolio(container, options) {
         const click = !!start && Math.hypot(event.clientX - start.x, event.clientY - start.y) < CLICK_SLOP;
         if (!click)
             return;
+        if (pageClick()) {
+            swipe = null;
+            return;
+        }
         // A click on the recto turns forward, on the verso back (pages already
         // in the air: it joins them).
         if (flipper) {
@@ -616,6 +721,13 @@ export function createFolio(container, options) {
         else
             go(current + ((event.clientX > rect.left + rect.width / 2) !== rtl() ? 1 : -1));
     });
+    /** A click at the point pressed: the host's to act on (true), or the
+     *  page's to turn. */
+    function pageClick() {
+        const point = pressPoint;
+        pressPoint = null;
+        return !!point && !!options.onPageClick?.(point);
+    }
     /** The page index in slot `side` (0 the verso, 1 the recto) of the
      *  spread on show. */
     const pageInSlot = (side) => {
@@ -670,6 +782,8 @@ export function createFolio(container, options) {
         root.classList.toggle("is-select", interaction === "select");
         if (interaction !== "select")
             root.classList.remove("is-over-page");
+        if (interaction !== "hand")
+            root.classList.remove("is-over-grip");
     }
     let lastWidth = -1;
     const observer = new ResizeObserver(() => {
@@ -719,6 +833,14 @@ export function createFolio(container, options) {
         refreshPage(src) {
             flipper?.touch(src);
         },
+        setPageVideo(video) {
+            if (pageVideo && pageVideo.element !== video?.element && pageVideo.element.classList.contains("postext-folio-video")) {
+                pageVideo.element.classList.remove("postext-folio-video");
+                pageVideo.element.remove();
+            }
+            pageVideo = video;
+            applyVideo();
+        },
         setAppearance(next) {
             appearance = { ...appearance, ...next };
             const flip = flipAppearance();
@@ -758,11 +880,16 @@ export function createFolio(container, options) {
             papersKey = papers;
             if (opts.at !== undefined)
                 current = shown = spreadOfPage(spreads, opts.at);
+            // The video's page may be painted on another canvas now.
+            if (pageVideo)
+                flipper?.setVideo({ src: sourceOf(pages[pageVideo.page]), element: pageVideo.element, frame: pageVideo });
             fit();
             render();
         },
         dispose() {
             disposed = true;
+            pageVideo?.element.remove();
+            pageVideo = null;
             observer.disconnect();
             holding?.(false);
             flipper?.dispose();