@mattebox/player 0.1.0

package/dist/controls/options.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The bar's knobs. Every one has a default, every one can come from
+ * JavaScript through `define({ controls })` or the constructor, and every
+ * one has an attribute in kebab-case that wins over both, so a page that
+ * writes only markup still gets to set them.
+ */
+export interface ControlsOptions {
+    /** Milliseconds of pointer stillness before the bar hides while playing. */
+    readonly idleMs?: number;
+    /** Seconds an arrow key moves the playhead. */
+    readonly seekStep?: number;
+    /** Seconds Page Up and Page Down move it. */
+    readonly seekPage?: number;
+    /** Seconds the skip-back button moves it. Zero leaves that button out. */
+    readonly skipBack?: number;
+    /** Seconds the skip-forward button moves it. Zero leaves that button out. */
+    readonly skipForward?: number;
+    /** Whether the large play sits over the picture while paused. Zero leaves it out. */
+    readonly start?: number;
+    /**
+     * How many forward buffer goals long the availability window must be for
+     * a live stream to be seekable. Below it the bar shows no seek bar: a
+     * window barely wider than the buffer is nowhere to go. Zero makes every
+     * live stream seekable.
+     */
+    readonly liveWindow?: number;
+    /**
+     * Which controls the buttons row carries, in order, by name, with `|`
+     * between the left and the right cluster. A name left out is a control
+     * left out. See LAYOUT for the default and the names.
+     */
+    readonly layout?: string;
+}
+export type Controls = Required<ControlsOptions>;
+/** The buttons row by default. `drm`, the lock, is a control the row can carry and does not by default. */
+export declare const LAYOUT = "skip-back play skip-forward volume | speed subtitles audio quality pip fullscreen";
+export declare const DEFAULTS: Controls;
+/** Each option's attribute. */
+export declare const ATTRIBUTES: Readonly<Record<keyof Controls, string>>;
+/** The attribute where it is a non-negative number, else the option, else the default; the layout as given. */
+export declare function resolve(options: ControlsOptions | undefined, attribute: (name: string) => string | null): Controls;
+/** A layout as two lists of names, left and right of the `|`. Unknown names are the caller's to drop. */
+export declare function clusters(layout: string): [string[], string[]];
+//# sourceMappingURL=options.d.ts.map

package/dist/controls/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/controls/options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,WAAW,eAAe;IAC9B,4EAA4E;IAC5E,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,6EAA6E;IAC7E,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,qFAAqF;IACrF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEjD,2GAA2G;AAC3G,eAAO,MAAM,MAAM,sFACkE,CAAC;AAEtF,eAAO,MAAM,QAAQ,EAAE,QAStB,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,QAAQ,EAAE,MAAM,CAAC,CAS/D,CAAC;AAOF,+GAA+G;AAC/G,wBAAgB,OAAO,CACrB,OAAO,EAAE,eAAe,GAAG,SAAS,EACpC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GACzC,QAAQ,CAeV;AAED,yGAAyG;AACzG,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAI7D"}

package/dist/controls/options.js

@@ -0,0 +1,54 @@
+/**
+ * The bar's knobs. Every one has a default, every one can come from
+ * JavaScript through `define({ controls })` or the constructor, and every
+ * one has an attribute in kebab-case that wins over both, so a page that
+ * writes only markup still gets to set them.
+ */
+/** The buttons row by default. `drm`, the lock, is a control the row can carry and does not by default. */
+export const LAYOUT = 'skip-back play skip-forward volume | speed subtitles audio quality pip fullscreen';
+export const DEFAULTS = {
+    idleMs: 3000,
+    seekStep: 5,
+    seekPage: 30,
+    skipBack: 10,
+    skipForward: 10,
+    start: 1,
+    liveWindow: 3,
+    layout: LAYOUT,
+};
+/** Each option's attribute. */
+export const ATTRIBUTES = {
+    idleMs: 'idle-ms',
+    seekStep: 'seek-step',
+    seekPage: 'seek-page',
+    skipBack: 'skip-back',
+    skipForward: 'skip-forward',
+    start: 'start',
+    liveWindow: 'live-window',
+    layout: 'layout',
+};
+const NUMERIC = Object.keys(DEFAULTS).filter((key) => key !== 'layout');
+/** The attribute where it is a non-negative number, else the option, else the default; the layout as given. */
+export function resolve(options, attribute) {
+    const out = {};
+    for (const key of NUMERIC) {
+        const raw = attribute(ATTRIBUTES[key]);
+        const set = raw === null ? Number.NaN : Number(raw);
+        const given = options?.[key];
+        out[key] =
+            Number.isFinite(set) && set >= 0
+                ? set
+                : given !== undefined && Number.isFinite(given) && given >= 0
+                    ? given
+                    : DEFAULTS[key];
+    }
+    out.layout = attribute(ATTRIBUTES.layout) ?? options?.layout ?? DEFAULTS.layout;
+    return out;
+}
+/** A layout as two lists of names, left and right of the `|`. Unknown names are the caller's to drop. */
+export function clusters(layout) {
+    const [left = '', right = ''] = layout.split('|');
+    const names = (part) => part.split(/\s+/).filter((name) => name !== '');
+    return [names(left), names(right)];
+}
+//# sourceMappingURL=options.js.map

package/dist/controls/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","sourceRoot":"","sources":["../../src/controls/options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAgCH,2GAA2G;AAC3G,MAAM,CAAC,MAAM,MAAM,GACjB,mFAAmF,CAAC;AAEtF,MAAM,CAAC,MAAM,QAAQ,GAAa;IAChC,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;IACZ,WAAW,EAAE,EAAE;IACf,KAAK,EAAE,CAAC;IACR,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,MAAM;CACf,CAAC;AAEF,+BAA+B;AAC/B,MAAM,CAAC,MAAM,UAAU,GAA6C;IAClE,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,cAAc;IAC3B,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,aAAa;IACzB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAGF,MAAM,OAAO,GAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAmC,CAAC,MAAM,CAC7E,CAAC,GAAG,EAAkB,EAAE,CAAC,GAAG,KAAK,QAAQ,CAC1C,CAAC;AAEF,+GAA+G;AAC/G,MAAM,UAAU,OAAO,CACrB,OAAoC,EACpC,SAA0C;IAE1C,MAAM,GAAG,GAAoC,EAAE,CAAC;IAChD,KAAK,MAAM,GAAG,IAAI,OAAO,EAAE,CAAC;QAC1B,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACpD,MAAM,KAAK,GAAG,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC;QAC7B,GAAG,CAAC,GAAG,CAAC;YACN,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC;gBAC9B,CAAC,CAAC,GAAG;gBACL,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;oBAC3D,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IACD,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,OAAO,EAAE,MAAM,IAAI,QAAQ,CAAC,MAAM,CAAC;IAChF,OAAO,GAA0B,CAAC;AACpC,CAAC;AAED,yGAAyG;AACzG,MAAM,UAAU,QAAQ,CAAC,MAAc;IACrC,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAClD,MAAM,KAAK,GAAG,CAAC,IAAY,EAAY,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;IAC1F,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACrC,CAAC"}

package/dist/controls/pip.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Picture-in-Picture on the video, through whichever API the browser has:
+ * the standard one, or Safari's presentation mode. Neither means no
+ * button. Both live on the video itself, which is where the browser draws
+ * the floating window from.
+ */
+export interface PictureInPicture {
+    /** Whether any API exists. Without one the button is hidden. */
+    readonly supported: boolean;
+    active(): boolean;
+    toggle(): void;
+    /** Runs `fn` on every change. Returns the unsubscribe. */
+    watch(fn: () => void): () => void;
+}
+export declare function pictureInPicture(video: HTMLVideoElement): PictureInPicture;
+//# sourceMappingURL=pip.d.ts.map

package/dist/controls/pip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pip.d.ts","sourceRoot":"","sources":["../../src/controls/pip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,MAAM,WAAW,gBAAgB;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,MAAM,IAAI,OAAO,CAAC;IAClB,MAAM,IAAI,IAAI,CAAC;IACf,0DAA0D;IAC1D,KAAK,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CACnC;AAWD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CA0C1E"}

package/dist/controls/pip.js

@@ -0,0 +1,53 @@
+/**
+ * Picture-in-Picture on the video, through whichever API the browser has:
+ * the standard one, or Safari's presentation mode. Neither means no
+ * button. Both live on the video itself, which is where the browser draws
+ * the floating window from.
+ */
+function watching(target, names) {
+    return (fn) => {
+        for (const name of names)
+            target.addEventListener(name, fn);
+        return () => {
+            for (const name of names)
+                target.removeEventListener(name, fn);
+        };
+    };
+}
+export function pictureInPicture(video) {
+    const safari = video;
+    if (typeof video.requestPictureInPicture === 'function' && document.pictureInPictureEnabled) {
+        return {
+            supported: true,
+            active: () => document.pictureInPictureElement === video,
+            toggle() {
+                // Rejected outside a user gesture, or before the video has metadata;
+                // nothing to do with that but drop it.
+                const request = document.pictureInPictureElement === video
+                    ? document.exitPictureInPicture()
+                    : video.requestPictureInPicture();
+                request.catch(() => undefined);
+            },
+            watch: watching(video, ['enterpictureinpicture', 'leavepictureinpicture']),
+        };
+    }
+    if (typeof safari.webkitSetPresentationMode === 'function' &&
+        safari.webkitSupportsPresentationMode?.('picture-in-picture') === true) {
+        return {
+            supported: true,
+            active: () => safari.webkitPresentationMode === 'picture-in-picture',
+            toggle() {
+                const next = safari.webkitPresentationMode === 'picture-in-picture' ? 'inline' : 'picture-in-picture';
+                safari.webkitSetPresentationMode?.(next);
+            },
+            watch: watching(video, ['webkitpresentationmodechanged']),
+        };
+    }
+    return {
+        supported: false,
+        active: () => false,
+        toggle() { },
+        watch: () => () => { },
+    };
+}
+//# sourceMappingURL=pip.js.map

package/dist/controls/pip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pip.js","sourceRoot":"","sources":["../../src/controls/pip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAiBH,SAAS,QAAQ,CAAC,MAAmB,EAAE,KAAwB;IAC7D,OAAO,CAAC,EAAc,EAAgB,EAAE;QACtC,KAAK,MAAM,IAAI,IAAI,KAAK;YAAE,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC5D,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,IAAI,IAAI,KAAK;gBAAE,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAuB;IACtD,MAAM,MAAM,GAAG,KAA6C,CAAC;IAE7D,IAAI,OAAO,KAAK,CAAC,uBAAuB,KAAK,UAAU,IAAI,QAAQ,CAAC,uBAAuB,EAAE,CAAC;QAC5F,OAAO;YACL,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,uBAAuB,KAAK,KAAK;YACxD,MAAM;gBACJ,qEAAqE;gBACrE,uCAAuC;gBACvC,MAAM,OAAO,GACX,QAAQ,CAAC,uBAAuB,KAAK,KAAK;oBACxC,CAAC,CAAC,QAAQ,CAAC,oBAAoB,EAAE;oBACjC,CAAC,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC;gBACtC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;YACjC,CAAC;YACD,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,uBAAuB,EAAE,uBAAuB,CAAC,CAAC;SAC3E,CAAC;IACJ,CAAC;IAED,IACE,OAAO,MAAM,CAAC,yBAAyB,KAAK,UAAU;QACtD,MAAM,CAAC,8BAA8B,EAAE,CAAC,oBAAoB,CAAC,KAAK,IAAI,EACtE,CAAC;QACD,OAAO;YACL,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,sBAAsB,KAAK,oBAAoB;YACpE,MAAM;gBACJ,MAAM,IAAI,GACR,MAAM,CAAC,sBAAsB,KAAK,oBAAoB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC;gBAC3F,MAAM,CAAC,yBAAyB,EAAE,CAAC,IAAI,CAAC,CAAC;YAC3C,CAAC;YACD,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,+BAA+B,CAAC,CAAC;SAC1D,CAAC;IACJ,CAAC;IAED,OAAO;QACL,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;QACnB,MAAM,KAAU,CAAC;QACjB,KAAK,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC;KACtB,CAAC;AACJ,CAAC"}

package/dist/controls/ranges.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The seek bar's arithmetic, pure and node-tested: which span of time the
+ * bar maps, and where a time or a range lands on it as a fraction.
+ */
+export interface Span {
+    readonly start: number;
+    readonly end: number;
+}
+export declare const EMPTY: Span;
+/** A `TimeRanges` as spans. */
+export declare function spans(ranges: TimeRanges): Span[];
+/**
+ * The span the bar maps: the last seekable range for live, which is the
+ * availability window the engine sets on the MediaSource; zero to the
+ * duration for VOD; empty while neither is known.
+ */
+export declare function window(duration: number, seekable: readonly Span[], live: boolean): Span;
+/** Where a time sits on a span, clamped to it. Zero on an empty span. */
+export declare function fraction(time: number, span: Span): number;
+/** The time at a fraction of a span. */
+export declare function at(part: number, span: Span): number;
+/** Ranges clipped to a span, as fraction pairs, dropping what falls outside or collapses. */
+export declare function clip(ranges: readonly Span[], span: Span): Array<readonly [number, number]>;
+//# sourceMappingURL=ranges.d.ts.map

package/dist/controls/ranges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ranges.d.ts","sourceRoot":"","sources":["../../src/controls/ranges.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,IAA2B,CAAC;AAEhD,+BAA+B;AAC/B,wBAAgB,KAAK,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,EAAE,CAKhD;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,CAMvF;AAED,yEAAyE;AACzE,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAIzD;AAED,wCAAwC;AACxC,wBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAEnD;AAED,6FAA6F;AAC7F,wBAAgB,IAAI,CAAC,MAAM,EAAE,SAAS,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAQ1F"}

package/dist/controls/ranges.js

@@ -0,0 +1,48 @@
+/**
+ * The seek bar's arithmetic, pure and node-tested: which span of time the
+ * bar maps, and where a time or a range lands on it as a fraction.
+ */
+export const EMPTY = { start: 0, end: 0 };
+/** A `TimeRanges` as spans. */
+export function spans(ranges) {
+    const out = [];
+    for (let i = 0; i < ranges.length; i += 1)
+        out.push({ start: ranges.start(i), end: ranges.end(i) });
+    return out;
+}
+/**
+ * The span the bar maps: the last seekable range for live, which is the
+ * availability window the engine sets on the MediaSource; zero to the
+ * duration for VOD; empty while neither is known.
+ */
+export function window(duration, seekable, live) {
+    if (live) {
+        const last = seekable[seekable.length - 1];
+        if (last !== undefined && last.end > last.start)
+            return last;
+    }
+    return Number.isFinite(duration) && duration > 0 ? { start: 0, end: duration } : EMPTY;
+}
+/** Where a time sits on a span, clamped to it. Zero on an empty span. */
+export function fraction(time, span) {
+    const length = span.end - span.start;
+    if (length <= 0)
+        return 0;
+    return Math.min(1, Math.max(0, (time - span.start) / length));
+}
+/** The time at a fraction of a span. */
+export function at(part, span) {
+    return span.start + Math.min(1, Math.max(0, part)) * (span.end - span.start);
+}
+/** Ranges clipped to a span, as fraction pairs, dropping what falls outside or collapses. */
+export function clip(ranges, span) {
+    const out = [];
+    for (const range of ranges) {
+        const start = fraction(range.start, span);
+        const end = fraction(range.end, span);
+        if (end > start)
+            out.push([start, end]);
+    }
+    return out;
+}
+//# sourceMappingURL=ranges.js.map

package/dist/controls/ranges.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ranges.js","sourceRoot":"","sources":["../../src/controls/ranges.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,CAAC,MAAM,KAAK,GAAS,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;AAEhD,+BAA+B;AAC/B,MAAM,UAAU,KAAK,CAAC,MAAkB;IACtC,MAAM,GAAG,GAAW,EAAE,CAAC;IACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC;QACvC,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC3D,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,MAAM,CAAC,QAAgB,EAAE,QAAyB,EAAE,IAAa;IAC/E,IAAI,IAAI,EAAE,CAAC;QACT,MAAM,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC3C,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;IAC/D,CAAC;IACD,OAAO,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;AACzF,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,QAAQ,CAAC,IAAY,EAAE,IAAU;IAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;IACrC,IAAI,MAAM,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC;IAC1B,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;AAChE,CAAC;AAED,wCAAwC;AACxC,MAAM,UAAU,EAAE,CAAC,IAAY,EAAE,IAAU;IACzC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;AAC/E,CAAC;AAED,6FAA6F;AAC7F,MAAM,UAAU,IAAI,CAAC,MAAuB,EAAE,IAAU;IACtD,MAAM,GAAG,GAAqC,EAAE,CAAC;IACjD,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC1C,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACtC,IAAI,GAAG,GAAG,KAAK;YAAE,GAAG,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;IAC1C,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/controls/screens.d.ts

@@ -0,0 +1,22 @@
+/**
+ * What sits over the picture, apart from the bar: the start button and the
+ * error screen. Both live in the stage, so they are inside fullscreen and
+ * over the poster, and both are the bar's, mounted and dropped with it.
+ *
+ * The start button is the large play in the middle of the picture: shown
+ * while the video is paused, a replay once it has ended, gone while it
+ * plays. The error screen replaces the row under the video: the category
+ * and the code, and a retry.
+ */
+import type { PlayerError } from '@mattebox/player-core';
+import type { Control, Flag } from './control.js';
+/** `shown` false keeps it out entirely, which is what the `start` knob at zero asks. */
+export declare function startButton(video: HTMLVideoElement, flag: Flag, shown?: boolean): Control;
+export interface ErrorScreen extends Control {
+    show(error: PlayerError): void;
+    clear(): void;
+    /** Whether an error is on screen, so the start button stays out of its way. */
+    shown(): boolean;
+}
+export declare function errorScreen(retry: () => void): ErrorScreen;
+//# sourceMappingURL=screens.d.ts.map

package/dist/controls/screens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../src/controls/screens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIlD,wFAAwF;AACxF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,UAAO,GAAG,OAAO,CAgCtF;AAED,MAAM,WAAW,WAAY,SAAQ,OAAO;IAC1C,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,IAAI,IAAI,CAAC;IACd,+EAA+E;IAC/E,KAAK,IAAI,OAAO,CAAC;CAClB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,WAAW,CAkC1D"}

package/dist/controls/screens.js

@@ -0,0 +1,69 @@
+import { el } from '../dom.js';
+import { glyph, icon } from './icons.js';
+/** `shown` false keeps it out entirely, which is what the `start` knob at zero asks. */
+export function startButton(video, flag, shown = true) {
+    const root = el('button', 'control start-button');
+    root.type = 'button';
+    const svg = icon('play');
+    root.append(svg);
+    function render() {
+        const paused = video.paused;
+        const name = video.ended ? 'replay' : 'play';
+        glyph(svg, name);
+        root.setAttribute('aria-label', video.ended ? 'Replay' : 'Play');
+        root.hidden = !shown || !paused;
+        flag('paused', paused);
+    }
+    function click() {
+        video.play().catch(() => undefined);
+    }
+    const names = ['play', 'pause', 'ended', 'emptied'];
+    root.addEventListener('click', click);
+    for (const name of names)
+        video.addEventListener(name, render);
+    render();
+    return {
+        root,
+        dispose() {
+            root.removeEventListener('click', click);
+            for (const name of names)
+                video.removeEventListener(name, render);
+            root.remove();
+        },
+    };
+}
+export function errorScreen(retry) {
+    const root = el('div', 'error-screen');
+    root.setAttribute('role', 'alert');
+    const box = el('div', 'error-box');
+    const title = el('div', 'error-title', 'Playback failed');
+    const category = el('span', 'value error-category');
+    const code = el('span', 'value error-code');
+    const detail = el('div', 'error-detail');
+    detail.append(category, el('span', 'error-separator', ' · '), code);
+    const button = el('button', 'control error-retry', 'Retry');
+    button.type = 'button';
+    button.addEventListener('click', retry);
+    box.append(title, detail, button);
+    root.append(box);
+    root.hidden = true;
+    return {
+        root,
+        show(error) {
+            category.textContent = error.category;
+            code.textContent = error.code;
+            root.hidden = false;
+        },
+        clear() {
+            root.hidden = true;
+        },
+        shown() {
+            return !root.hidden;
+        },
+        dispose() {
+            button.removeEventListener('click', retry);
+            root.remove();
+        },
+    };
+}
+//# sourceMappingURL=screens.js.map

package/dist/controls/screens.js.map

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

package/dist/controls/seek.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The seek row: the time on the left, the bar, and the duration on the
+ * right, with the live button appended by the bar. Four layers on the
+ * track, every one a part: the buffered ranges from `video.buffered`, the
+ * played span, the hover position, and for live the edge from
+ * `engine.live`. The span it maps is the availability window for live,
+ * read from `video.seekable`, and the duration for VOD.
+ *
+ * A live stream is seekable only when the window is worth it: at least
+ * `liveWindow` forward buffer goals long, the goal read from the engine.
+ * Below that the bar and the time stay hidden and the row is the live
+ * button alone. VOD is always seekable. The window is the engine's own
+ * where the session offers it: the browser's seekable range on a live
+ * MediaSource is the union of that window and whatever is buffered, and
+ * grows behind a paused playhead until it crosses any threshold.
+ *
+ * Reads happen on the events the video already fires; the live window has
+ * no event of its own and moves with the clock, so `timeupdate` covers it.
+ * While a pointer holds the thumb, the played layer follows the pointer and
+ * `currentTime` is written at most once per frame, so the bar never fights
+ * a slow seek.
+ *
+ * The preview above the pointer carries the time and, when the session's
+ * `engine.thumbnails` answers for that time, the tile: a rectangle of a
+ * sprite, drawn by background position at the sprite's own size and scaled
+ * down to `--mbx-preview-width`, so a page sets the size with one token.
+ *
+ * On a seekable live stream the time and the preview read the wall clock
+ * when `engine.pdt` can say it, "14:23:05", which is what a viewer of a
+ * broadcast wants to know; the distance behind the edge otherwise.
+ */
+import type { ThumbnailsApi } from 'mattebox/stages/thumbnails';
+import type { LiveApi, PdtApi } from '../namespaces.js';
+import type { Control, Flag } from './control.js';
+import type { Controls } from './options.js';
+import type { Span } from './ranges.js';
+/** What the session feeding the video offers the row, each when it has one. */
+export interface SeekSource {
+    readonly live?: LiveApi | undefined;
+    readonly thumbnails?: ThumbnailsApi | undefined;
+    readonly pdt?: PdtApi | undefined;
+    /** The engine's forward buffer goal in seconds, read when the row decides whether a live window is worth seeking. */
+    readonly bufferGoal?: (() => number) | undefined;
+    /** The engine's sliding availability window, in presentation time, or null before it opens. */
+    readonly window?: (() => Span | null) | undefined;
+}
+export interface SeekBar extends Control {
+    attach(source: SeekSource): void;
+    detach(): void;
+}
+export declare function seekBar(video: HTMLVideoElement, flag: Flag, options: Controls): SeekBar;
+//# sourceMappingURL=seek.d.ts.map

package/dist/controls/seek.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek.d.ts","sourceRoot":"","sources":["../../src/controls/seek.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAKxC,+EAA+E;AAC/E,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,UAAU,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,qHAAqH;IACrH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,MAAM,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,+FAA+F;IAC/F,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;CACnD;AAED,MAAM,WAAW,OAAQ,SAAQ,OAAO;IACtC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,MAAM,IAAI,IAAI,CAAC;CAChB;AAuBD,wBAAgB,OAAO,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,GAAG,OAAO,CAwMvF"}

package/dist/controls/seek.js

@@ -0,0 +1,215 @@
+import { el } from '../dom.js';
+import { at, clip, EMPTY, fraction, spans, window } from './ranges.js';
+import { slider } from './slider.js';
+import { clock, describe, format } from './time.js';
+/** What the tile scales down to when the page sets no `--mbx-preview-width`. */
+const PREVIEW_WIDTH = 160;
+/** The buffer goal assumed for a session that reports none. */
+const BUFFER_GOAL = 30;
+/** The events on which the row re-reads the video. */
+const EVENTS = [
+    'timeupdate',
+    'progress',
+    'durationchange',
+    'loadedmetadata',
+    'seeking',
+    'seeked',
+    'emptied',
+];
+function percent(part) {
+    return `${part * 100}%`;
+}
+export function seekBar(video, flag, options) {
+    let source = {};
+    let span = EMPTY;
+    let pending = null;
+    let frame = 0;
+    function isLive() {
+        const live = source.live;
+        return live !== undefined && live.edge !== null;
+    }
+    /** The wall clock at a presentation time, when the session can say it. */
+    function wall(time) {
+        const epoch = source.pdt?.toWallClock(time) ?? null;
+        return epoch === null ? null : clock(epoch);
+    }
+    /** What a screen reader hears at a time. */
+    function say(time) {
+        if (!isLive())
+            return describe(time, span.end);
+        const behind = `${format(span.end - time)} behind live`;
+        const at = wall(time);
+        return at === null ? behind : `${at}, ${behind}`;
+    }
+    /** What the preview and the time show at a time. */
+    function label(time) {
+        if (!isLive())
+            return format(time);
+        return wall(time) ?? `-${format(span.end - time)}`;
+    }
+    function flush() {
+        frame = 0;
+        if (pending === null)
+            return;
+        video.currentTime = pending;
+        pending = null;
+    }
+    const current = el('span', 'current-time', '0:00');
+    const duration = el('span', 'duration', '0:00');
+    const bar = slider({
+        name: 'seek',
+        label: 'Seek',
+        step: options.seekStep,
+        page: options.seekPage,
+        onInput(value) {
+            bar.set(value, say(value));
+            current.textContent = label(value);
+            if (!bar.dragging()) {
+                // The release, or a key: written now, and it supersedes whatever a
+                // frame queued during the drag was about to write.
+                pending = null;
+                video.currentTime = value;
+                return;
+            }
+            pending = value;
+            if (frame === 0)
+                frame = requestAnimationFrame(flush);
+        },
+    });
+    const root = el('div', 'row seek-row');
+    root.append(current, bar.root, duration);
+    const buffered = el('div', 'buffered seek-buffered');
+    const hover = el('div', 'hover seek-hover');
+    const edge = el('div', 'edge seek-edge');
+    hover.hidden = true;
+    edge.hidden = true;
+    // Under the fill, so what is played reads over what is buffered.
+    bar.track.prepend(buffered);
+    bar.track.append(hover, edge);
+    const preview = el('div', 'preview seek-preview');
+    const image = el('div', 'preview-image seek-preview-image');
+    const tile = el('div', 'preview-tile seek-preview-tile');
+    const time = el('span', 'preview-time seek-preview-time');
+    image.append(tile);
+    image.hidden = true;
+    preview.append(image, time);
+    preview.hidden = true;
+    bar.root.append(preview);
+    /** The width the page asked for through the token, or the default. */
+    function previewWidth() {
+        const set = Number.parseFloat(getComputedStyle(preview).getPropertyValue('--mbx-preview-width'));
+        return Number.isFinite(set) && set > 0 ? set : PREVIEW_WIDTH;
+    }
+    /** The tile for a time, if the track has one, drawn at its size and scaled to fit. */
+    function paintTile(when) {
+        const found = source.thumbnails?.at(when) ?? null;
+        image.hidden = found === null;
+        if (found === null)
+            return;
+        const scale = previewWidth() / found.width;
+        image.style.width = `${found.width * scale}px`;
+        image.style.height = `${found.height * scale}px`;
+        tile.style.width = `${found.width}px`;
+        tile.style.height = `${found.height}px`;
+        tile.style.backgroundImage = `url("${found.url}")`;
+        tile.style.backgroundPosition = `-${found.x}px -${found.y}px`;
+        tile.style.transform = `scale(${scale})`;
+    }
+    function paintBuffered() {
+        const parts = clip(spans(video.buffered), span);
+        while (buffered.childElementCount > parts.length)
+            buffered.lastElementChild?.remove();
+        while (buffered.childElementCount < parts.length) {
+            buffered.append(el('div', 'buffered-range seek-buffered-range'));
+        }
+        let i = 0;
+        for (const child of buffered.children) {
+            const part = parts[i];
+            i += 1;
+            if (part === undefined)
+                break;
+            const node = child;
+            node.style.left = percent(part[0]);
+            node.style.width = percent(part[1] - part[0]);
+        }
+    }
+    /** Whether a live window is wide enough to be worth a bar. */
+    function worthSeeking() {
+        if (options.liveWindow === 0)
+            return true;
+        const goal = source.bufferGoal?.() ?? BUFFER_GOAL;
+        return span.end - span.start >= options.liveWindow * goal;
+    }
+    function tick() {
+        const on = isLive();
+        const own = on ? (source.window?.() ?? null) : null;
+        span =
+            own !== null && own.end > own.start ? own : window(video.duration, spans(video.seekable), on);
+        bar.range(span.start, span.end);
+        paintBuffered();
+        const live = source.live;
+        edge.hidden = !on;
+        if (on && live !== undefined && live.edge !== null) {
+            edge.style.left = percent(fraction(live.edge, span));
+        }
+        const seekable = !on || worthSeeking();
+        bar.root.hidden = !seekable;
+        current.hidden = !seekable;
+        duration.hidden = on;
+        flag('live', on);
+        flag('seekable', seekable);
+        if (!on)
+            duration.textContent = format(span.end);
+        if (!bar.dragging()) {
+            bar.set(video.currentTime, say(video.currentTime));
+            current.textContent = label(video.currentTime);
+        }
+    }
+    /** The hover marker and the preview follow the pointer, clamped to the bar. */
+    function point(event) {
+        const rect = bar.rail.getBoundingClientRect();
+        if (rect.width === 0 || span.end <= span.start)
+            return;
+        const part = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+        hover.hidden = false;
+        hover.style.left = percent(part);
+        preview.hidden = false;
+        const when = at(part, span);
+        time.textContent = label(when);
+        paintTile(when);
+        const whole = bar.root.getBoundingClientRect();
+        const half = preview.offsetWidth / 2;
+        const x = rect.left - whole.left + part * rect.width;
+        preview.style.left = `${Math.min(whole.width - half, Math.max(half, x))}px`;
+    }
+    function leave() {
+        hover.hidden = true;
+        preview.hidden = true;
+    }
+    bar.root.addEventListener('pointermove', point);
+    bar.root.addEventListener('pointerleave', leave);
+    for (const name of EVENTS)
+        video.addEventListener(name, tick);
+    tick();
+    return {
+        root,
+        attach(found) {
+            source = found;
+            tick();
+        },
+        detach() {
+            source = {};
+            leave();
+            tick();
+        },
+        dispose() {
+            cancelAnimationFrame(frame);
+            bar.root.removeEventListener('pointermove', point);
+            bar.root.removeEventListener('pointerleave', leave);
+            for (const name of EVENTS)
+                video.removeEventListener(name, tick);
+            bar.dispose();
+        },
+    };
+}
+//# sourceMappingURL=seek.js.map