pixi-effects 0.28.2 → 0.29.0

package/dist/present.d.ts

@@ -0,0 +1,278 @@
+import { k as Movie, j as MotionBlurSpec } from './Movie-C2rZFkrO.js';
+import { S as SequenceSpec, J as Props, K as Keyframe, a0 as TransitionSpec, k as CompositionSpec, Z as Stop } from './types-BzIB65Vk.js';
+import 'pixi.js';
+
+interface PresenterOptions {
+    canvas: HTMLCanvasElement;
+    /** Keys on the page: arrows, Space, Enter, PageUp / PageDown, Home / End, page number + Enter, B / W, F, ?, Esc. Default true. */
+    keyboard?: boolean;
+    /** A click (or tap) on the picture is "next". Default true. */
+    clickToAdvance?: boolean;
+    /** A swipe to the left is "next", to the right "back" (touch screens). Default true. */
+    swipe?: boolean;
+    /** The page counter, the page name and a progress line (they fade out when nothing happens). Default true. */
+    indicator?: boolean;
+    /** Stops with `advance: seconds` move on by themselves. Default true. */
+    autoAdvance?: boolean;
+    /** Run off the end: go back to the start and play again (a kiosk, a looping demo). Default false. */
+    loop?: boolean;
+    /** The accent of the progress line (any CSS colour). */
+    accent?: string;
+    /** Called when the audience-facing session is over: Escape with nothing left to close, or fullscreen left. (`Controller`'s Present button uses it to bring its bar back.) */
+    onExit?: () => void;
+}
+/**
+ * A presentation player for a movie with `stops` (`composition.stops`): it stops where the stops are, and moves on with the keys,
+ * a click, a tap or a swipe, like slides with animation. It draws only a small page counter, the page name and a progress line (they
+ * fade out when idle), and a black / white screen, a list of keys (`?`) and fullscreen (`F`). Use it instead of `Controller` on the page.
+ */
+declare class Presenter {
+    readonly movie: Movie;
+    readonly options: Required<Omit<PresenterOptions, 'accent' | 'onExit'>> & {
+        accent?: string;
+        onExit?: () => void;
+    };
+    private box;
+    private wrappedHere;
+    private root;
+    private counterEl;
+    private titleEl;
+    private progressEl;
+    private coverEl;
+    private helpEl;
+    private jumpEl;
+    private idleTimer;
+    private digitsTimer;
+    private advanceTimer;
+    private loopTimer;
+    private overviewEl;
+    private gridEl;
+    private overviewSel;
+    /** A picture of every stop (by stop index), made once before the talk: for the overview and the presenter view's "next". */
+    private thumbs;
+    private thumbsPromise;
+    private waitEl;
+    private view;
+    private digits;
+    private downAt;
+    private swiped;
+    private canvasCursor;
+    private destroyed;
+    private wasWrapAttr;
+    private onKey;
+    private onStop;
+    private offStop;
+    private onSeeked;
+    private onFrame;
+    private onEnded;
+    private onPointerDown;
+    private onPointerUp;
+    private onPointerMove;
+    private onClick;
+    private wasFullscreen;
+    private onFullscreenChange;
+    constructor(movie: Movie, options: PresenterOptions);
+    /** Enter presentation: ask for fullscreen (a browser needs a click or key press for that) and play to the first stop. */
+    start(): Promise<void>;
+    /** Leave fullscreen. */
+    exit(): Promise<void>;
+    next(): Promise<void>;
+    prev(): Promise<void>;
+    /** Black out (`'black'`), white out (`'white'`) or bring the picture back (`'off'`). */
+    setCover(mode: 'black' | 'white' | 'off'): void;
+    destroy(): void;
+    private positioningBox;
+    private run;
+    private enterFullscreen;
+    private toggleFullscreen;
+    private cancelAdvance;
+    private handleStop;
+    private handleEnded;
+    private refresh;
+    private wake;
+    private showDigits;
+    /** Something that moves the presentation: if the screen is blacked out (or the key list is open) the first press only brings it back. */
+    private navigate;
+    private handleKey;
+    private togglePresenterView;
+    /** Open the speaker's window: what is on screen (live), the next picture, the notes of the page, a timer, and next / back. Returns it (null if the browser blocked the popup). */
+    openPresenterView(): Window | null;
+    closePresenterView(): void;
+    /** Copy what the movie has just drawn into the view (called from the `frame` event, right after the render, when the canvas can be read). */
+    private mirror;
+    private refreshView;
+    private pageStops;
+    private overviewOpen;
+    private toggleOverview;
+    /**
+     * Make a picture of every stop, once. Taking them moves the playhead through the stops and back, which the audience would see:
+     * `start()` does it before anything is shown (behind a "Preparing" cover), and an overview opened before that does it on the spot.
+     */
+    /** Make the page pictures now (the overview and the presenter view use them): `start()` does it before the audience sees anything. */
+    ensureThumbs(): Promise<void>;
+    /** A page's picture is its last stop's (the page fully built). */
+    private pageThumb;
+    private onThumb;
+    private buildOverview;
+    private fillThumb;
+    private select;
+    private handleOverviewKey;
+    private handleClick;
+    private handlePointerUp;
+}
+
+interface DeckPage {
+    /** The page's name: shown by the Presenter, and in the stops list. */
+    name?: string;
+    /** How long the page lasts, seconds (including any transition into the next page, see `DeckOptions.transition`). Required. */
+    duration: number;
+    /** The page's layers, written in the page's own time (`at: 0` is the start of the page). */
+    sequences: SequenceSpec[];
+    /** Where the page stops, in the page's own time: the first is the page settled, the rest are steps (a bullet appears, a chart grows). Default: where the transition into the next page begins (the end for the last page). */
+    stops?: Array<number | {
+        at: number;
+        pdf?: boolean;
+    }>;
+    /** Speaker notes (kept on the page's first stop). */
+    notes?: string;
+    /** Move on by itself this many seconds after the page's last stop (kiosk mode). */
+    advance?: number;
+    /** The page is itself a layer: it may carry `initial`, `keyframes`, `filters`, … (fade or slide the whole page, for instance). */
+    initial?: Props;
+    keyframes?: Keyframe[];
+}
+/** A transition spec without the parts `deck()` fills in (which two pages, and when). */
+type DeckTransition = TransitionSpec extends infer T ? (T extends TransitionSpec ? Omit<T, 'from' | 'to' | 'at'> : never) : never;
+interface DeckOptions {
+    pages: DeckPage[];
+    /**
+     * A transition between every two pages: `{ kind: 'crossfade' | 'slide' | 'wipe' | 'iris' | 'dip' | 'zoom' | 'dissolve' | 'luma', duration, …its own options }` (see Transitions). The next page starts
+     * `duration` seconds before the current one ends, and the transition plays across the overlap.
+     */
+    transition?: DeckTransition;
+}
+/** What `deck()` returns: spread it into `movie.init` (`{ duration, composition: { sequences, transitions?, stops } }` plus any movie option you passed). */
+interface DeckResult {
+    duration: number;
+    composition: CompositionSpec;
+    [movieOption: string]: unknown;
+}
+/**
+ * A deck of pages as one movie. Each page is a nested composition laid out after the one before (so its layers use the page's own
+ * time), the stops (where a `Presenter` pauses) come from the pages, and an optional `transition` joins the pages with the existing
+ * crossfade / slide / wipe / … transitions.
+ *
+ * ```js
+ * await movie.init({ canvas, width: 1280, height: 720, frameRate: 30, ...deck({
+ *   transition: { kind: 'slide', duration: 0.6, direction: 'left' },
+ *   pages: [
+ *     { name: 'Hello', duration: 5, stops: [1.2], sequences: [ …title, subtitle… ] },
+ *     { name: 'Why',   duration: 8, stops: [1.2, 3, 5], sequences: [ …three bullets, at 1.2, 3, 5… ] },
+ *   ],
+ * }) });
+ * movie.on('ready', …); new Presenter(movie, { canvas });
+ * ```
+ */
+declare function deck(options: DeckOptions): DeckResult;
+
+/** A presentation is now on a stop (`next()` played to it, or `prev()` / `goToStop()` / `goToPage()` jumped to it). */
+interface StopEvent {
+    index: number;
+    stop: Stop;
+    pageIndex: number;
+}
+/** Call `fn` every time a presentation lands on a stop. Returns the function that stops listening. */
+declare function onStop(movie: Movie, fn: (e: StopEvent) => void): () => void;
+/** Which stop the playhead is on or has passed (-1 before the first). */
+declare const stopIndex: (movie: Movie) => number;
+/** The stop the playhead is on or has passed, or null. */
+declare const currentStop: (movie: Movie) => Stop | null;
+/** Which page the playhead is in (0-based), -1 before the first stop. */
+declare const pageIndex: (movie: Movie) => number;
+/** How many pages the stops make. */
+declare const pageCount: (movie: Movie) => number;
+/**
+ * Play to the next stop and pause exactly there (a presentation's "next"). Pressed again while it is playing toward a stop, it skips the
+ * rest of the animation and lands on that stop at once. After the last stop it plays to the end. Resolves when it has landed (or
+ * stopped for another reason). An ordinary `movie.play()` ignores the stops.
+ */
+declare function next(movie: Movie): Promise<void>;
+/** Jump back to the previous stop at once (no reverse playback); from the first stop, to the start. */
+declare function prev(movie: Movie): Promise<void>;
+/** Jump to stop `index` (0-based). */
+declare function goToStop(movie: Movie, index: number): Promise<void>;
+/** Jump to the first stop of page `page` (0-based). */
+declare function goToPage(movie: Movie, page: number): Promise<void>;
+
+/** One picture of a stop (see `stopImages()`). */
+interface StopImage {
+    stop: Stop; /** The page it belongs to (0-based). */
+    page: number;
+    image: Blob | string;
+}
+interface StopImagesOptions {
+    /** One picture per page (default) or one per stop. */
+    which?: 'pages' | 'stops';
+    /** With `which: 'pages'`: the page's last stop (default: the page fully built) or its first. */
+    pick?: 'last' | 'first';
+    /** Output size relative to the canvas. Default 1. */
+    scale?: number;
+    /** `'image/png'` (default) or `'image/jpeg'`. */
+    type?: 'image/png' | 'image/jpeg';
+    /** JPEG quality, 0–1. */
+    quality?: number;
+    /** Return `data:` URLs instead of Blobs. */
+    as?: 'blob' | 'dataURL';
+    /** Motion blur for the pictures (off unless you ask: they are usually for looking at). */
+    motionBlur?: MotionBlurSpec;
+    /** Pictures for a PDF: stops flagged `pdf: false` are left out (a page whose stops are all flagged has no picture). `exportPDF` sets it. */
+    pdf?: boolean;
+    /** Called as each picture is ready, in order. */
+    onImage?: (image: StopImage) => void;
+}
+interface InspectStopsReport {
+    stops: Array<{
+        index: number;
+        page: string | null;
+        at: number;
+        frame: number;
+        moving: number;
+        settled: boolean;
+    }>;
+    issues: string[];
+}
+/**
+ * A picture of the settled state of each page (default: the page's last stop, fully built) or of every stop, for a page list, an
+ * overview, an export. Pauses the movie, and leaves the playhead where it was. `onImage` is called as each picture is ready.
+ */
+declare function stopImages(movie: Movie, opts: StopImagesOptions & {
+    as: 'dataURL';
+}): Promise<Array<StopImage & {
+    image: string;
+}>>;
+declare function stopImages(movie: Movie, opts?: StopImagesOptions): Promise<StopImage[]>;
+/**
+ * Look at every stop: is the picture there still changing? A stop is compared with the picture `lookback` frames before it (default 3):
+ * when more than `tolerance` (default 0.4 %) of the picture differs, the audience, a page overview and a PDF all see a half-finished
+ * animation. `issues` says which stop, which page and what to do; leaves the playhead where it was.
+ */
+declare function inspectStops(movie: Movie, opts?: {
+    lookback?: number;
+    tolerance?: number;
+}): Promise<InspectStopsReport>;
+/**
+ * The deck as a PDF: one page per page of the talk (the page's last stop, fully built, unless a stop says `pdf: true` or `pdf: false`;
+ * `which: 'stops'` makes a page of every stop that is not `pdf: false`), each a
+ * JPEG at the canvas size. Needs `composition.stops`. A transparent background comes out black: give the movie a `background`.
+ */
+declare function exportPDF(movie: Movie, opts?: {
+    which?: 'pages' | 'stops';
+    pick?: 'last' | 'first';
+    scale?: number;
+    quality?: number;
+    title?: string;
+    motionBlur?: MotionBlurSpec;
+    onImage?: (image: StopImage) => void;
+}): Promise<Blob>;
+
+export { type DeckOptions, type DeckPage, type DeckResult, type DeckTransition, type InspectStopsReport, Presenter, type PresenterOptions, type StopEvent, type StopImage, type StopImagesOptions, currentStop, deck, exportPDF, goToPage, goToStop, inspectStops, next, onStop, pageCount, pageIndex, prev, stopImages, stopIndex };