@mattebox/player 0.1.0

package/dist/controls/seek.js.map

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

package/dist/controls/slider.d.ts

@@ -0,0 +1,28 @@
+export interface SliderOptions {
+    /** The part prefix: `seek`, `volume`. */
+    readonly name: string;
+    /** The accessible name. */
+    readonly label: string;
+    /** What an arrow key moves the value by. */
+    readonly step: number;
+    /** What Page Up and Page Down move it by. */
+    readonly page: number;
+    /** The value the pointer or a key asked for, clamped to the range. */
+    readonly onInput: (value: number) => void;
+}
+export interface Slider {
+    readonly root: HTMLElement;
+    /** The bar the fill sits on. A caller lays extra layers on it. */
+    readonly track: HTMLElement;
+    /** What fractions are measured against: the track's extent, inset from the root. */
+    readonly rail: HTMLElement;
+    /** Whether a pointer holds the thumb. A caller keeps its own reads off the thumb meanwhile. */
+    dragging(): boolean;
+    /** The range the value maps onto. */
+    range(min: number, max: number): void;
+    /** Where the thumb sits, and what a screen reader hears. */
+    set(value: number, text: string): void;
+    dispose(): void;
+}
+export declare function slider(options: SliderOptions): Slider;
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/controls/slider.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,MAAM;IACrB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;IAC5B,oFAAoF;IACpF,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,+FAA+F;IAC/F,QAAQ,IAAI,OAAO,CAAC;IACpB,qCAAqC;IACrC,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,4DAA4D;IAC5D,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,OAAO,IAAI,IAAI,CAAC;CACjB;AAMD,wBAAgB,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,CAiIrD"}

package/dist/controls/slider.js

@@ -0,0 +1,145 @@
+/**
+ * The slider primitive the seek bar and the volume share: a `div` with
+ * `role="slider"`, pointer capture for the drag, and the arrow keys. It
+ * owns geometry only. What the value means and what happens on change is
+ * the caller's, through `onInput`.
+ *
+ * Not `<input type="range">`: a range input cannot carry layers such as
+ * buffered ranges, its geometry is not readable for a preview anchor, and
+ * it renders differently per browser. The track is exposed so a caller can
+ * lay its own layers on it.
+ *
+ * The track and the thumb sit on a rail inset from the root's edges by half
+ * a thumb, so the thumb at either end is whole and not clipped, and every
+ * fraction is measured against the rail.
+ */
+import { el, state } from '../dom.js';
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+export function slider(options) {
+    const { name, onInput } = options;
+    const root = el('div', `slider ${name}`);
+    root.setAttribute('role', 'slider');
+    root.setAttribute('aria-label', options.label);
+    root.tabIndex = 0;
+    const rail = el('div', `rail ${name}-rail`);
+    const track = el('div', `track ${name}-track`);
+    const fill = el('div', `fill ${name}-fill`);
+    const thumb = el('div', `thumb ${name}-thumb`);
+    track.append(fill);
+    rail.append(track, thumb);
+    root.append(rail);
+    let min = 0;
+    let max = 1;
+    let value = 0;
+    let held = false;
+    function paint() {
+        const fraction = max > min ? (value - min) / (max - min) : 0;
+        const percent = `${fraction * 100}%`;
+        fill.style.width = percent;
+        thumb.style.left = percent;
+    }
+    /** The value under a horizontal pointer position. */
+    function at(clientX) {
+        const rect = rail.getBoundingClientRect();
+        if (rect.width === 0)
+            return min;
+        return min + clamp((clientX - rect.left) / rect.width, 0, 1) * (max - min);
+    }
+    function hold(on) {
+        held = on;
+        state(root, `slider ${name}`, { dragging: on });
+    }
+    function down(event) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        hold(true);
+        // A synthetic event carries no active pointer, and capture throws on it.
+        try {
+            root.setPointerCapture(event.pointerId);
+        }
+        catch {
+            // Nothing to capture; the drag still follows moves over the root.
+        }
+        onInput(at(event.clientX));
+    }
+    function move(event) {
+        if (held)
+            onInput(at(event.clientX));
+    }
+    function up(event) {
+        if (!held)
+            return;
+        hold(false);
+        onInput(at(event.clientX));
+    }
+    function cancel() {
+        if (held)
+            hold(false);
+    }
+    function key(event) {
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                next = value + options.step;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                next = value - options.step;
+                break;
+            case 'PageUp':
+                next = value + options.page;
+                break;
+            case 'PageDown':
+                next = value - options.page;
+                break;
+            case 'Home':
+                next = min;
+                break;
+            case 'End':
+                next = max;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        onInput(clamp(next, min, max));
+    }
+    root.addEventListener('pointerdown', down);
+    root.addEventListener('pointermove', move);
+    root.addEventListener('pointerup', up);
+    root.addEventListener('pointercancel', cancel);
+    root.addEventListener('keydown', key);
+    return {
+        root,
+        track,
+        rail,
+        dragging() {
+            return held;
+        },
+        range(low, high) {
+            min = low;
+            max = high;
+            root.setAttribute('aria-valuemin', String(low));
+            root.setAttribute('aria-valuemax', String(high));
+            paint();
+        },
+        set(next, text) {
+            value = clamp(next, min, max);
+            root.setAttribute('aria-valuenow', String(value));
+            root.setAttribute('aria-valuetext', text);
+            paint();
+        },
+        dispose() {
+            root.removeEventListener('pointerdown', down);
+            root.removeEventListener('pointermove', move);
+            root.removeEventListener('pointerup', up);
+            root.removeEventListener('pointercancel', cancel);
+            root.removeEventListener('keydown', key);
+        },
+    };
+}
+//# sourceMappingURL=slider.js.map

package/dist/controls/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../src/controls/slider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AA8BtC,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IACpD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,OAAsB;IAC3C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAClC,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;IACzC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAClB,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,IAAI,OAAO,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,SAAS,IAAI,QAAQ,CAAC,CAAC;IAC/C,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,IAAI,OAAO,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,SAAS,IAAI,QAAQ,CAAC,CAAC;IAC/C,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAElB,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,IAAI,IAAI,GAAG,KAAK,CAAC;IAEjB,SAAS,KAAK;QACZ,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7D,MAAM,OAAO,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,CAAC;QACrC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC;QAC3B,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC;IAC7B,CAAC;IAED,qDAAqD;IACrD,SAAS,EAAE,CAAC,OAAe;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC1C,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC;YAAE,OAAO,GAAG,CAAC;QACjC,OAAO,GAAG,GAAG,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;IAC7E,CAAC;IAED,SAAS,IAAI,CAAC,EAAW;QACvB,IAAI,GAAG,EAAE,CAAC;QACV,KAAK,CAAC,IAAI,EAAE,UAAU,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,SAAS,IAAI,CAAC,KAAmB;QAC/B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,CAAC;QACX,yEAAyE;QACzE,IAAI,CAAC;YACH,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1C,CAAC;QAAC,MAAM,CAAC;YACP,kEAAkE;QACpE,CAAC;QACD,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7B,CAAC;IAED,SAAS,IAAI,CAAC,KAAmB;QAC/B,IAAI,IAAI;YAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACvC,CAAC;IAED,SAAS,EAAE,CAAC,KAAmB;QAC7B,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,CAAC,KAAK,CAAC,CAAC;QACZ,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7B,CAAC;IAED,SAAS,MAAM;QACb,IAAI,IAAI;YAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,SAAS,GAAG,CAAC,KAAoB;QAC/B,IAAI,IAAY,CAAC;QACjB,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,YAAY,CAAC;YAClB,KAAK,SAAS;gBACZ,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;gBAC5B,MAAM;YACR,KAAK,WAAW,CAAC;YACjB,KAAK,WAAW;gBACd,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;gBAC5B,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;gBAC5B,MAAM;YACR,KAAK,UAAU;gBACb,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;gBAC5B,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,GAAG,GAAG,CAAC;gBACX,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,GAAG,GAAG,CAAC;gBACX,MAAM;YACR;gBACE,OAAO;QACX,CAAC;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,CAAC;IAED,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IACvC,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAC/C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;IAEtC,OAAO;QACL,IAAI;QACJ,KAAK;QACL,IAAI;QACJ,QAAQ;YACN,OAAO,IAAI,CAAC;QACd,CAAC;QACD,KAAK,CAAC,GAAW,EAAE,IAAY;YAC7B,GAAG,GAAG,GAAG,CAAC;YACV,GAAG,GAAG,IAAI,CAAC;YACX,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;YAChD,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YACjD,KAAK,EAAE,CAAC;QACV,CAAC;QACD,GAAG,CAAC,IAAY,EAAE,IAAY;YAC5B,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YAC9B,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YAClD,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;YAC1C,KAAK,EAAE,CAAC;QACV,CAAC;QACD,OAAO;YACL,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;YAC9C,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;YAC9C,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;YAC1C,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YAClD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;QAC3C,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/controls/speed.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The speed menu over `video.playbackRate`. Video-only, so it sits in the
+ * bar for every session, native included. The rates are the ones every
+ * player offers; the video's own value is the truth, read on `ratechange`.
+ */
+import type { Control } from './control.js';
+export declare function speedMenu(video: HTMLVideoElement): Control;
+//# sourceMappingURL=speed.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"speed.d.ts","sourceRoot":"","sources":["../../src/controls/speed.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAK5C,wBAAgB,SAAS,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAgC1D"}

package/dist/controls/speed.js

@@ -0,0 +1,34 @@
+import { menu } from './menu.js';
+const RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+export function speedMenu(video) {
+    const control = menu({ name: 'speed', label: 'Playback speed', icon: 'playback-speed' });
+    function render() {
+        const items = RATES.map((rate) => [
+            String(rate),
+            rate === 1 ? 'Normal' : `${rate}×`,
+        ]);
+        const current = String(video.playbackRate);
+        if (!RATES.some((rate) => String(rate) === current))
+            items.push([current, `${current}×`]);
+        control.fill([
+            {
+                name: 'rate',
+                items,
+                value: current,
+                onSelect(value) {
+                    video.playbackRate = Number(value);
+                },
+            },
+        ]);
+    }
+    video.addEventListener('ratechange', render);
+    render();
+    return {
+        root: control.root,
+        dispose() {
+            video.removeEventListener('ratechange', render);
+            control.dispose();
+        },
+    };
+}
+//# sourceMappingURL=speed.js.map

package/dist/controls/speed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"speed.js","sourceRoot":"","sources":["../../src/controls/speed.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;AAE3C,MAAM,UAAU,SAAS,CAAC,KAAuB;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAEzF,SAAS,MAAM;QACb,MAAM,KAAK,GAAqC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;YAClE,MAAM,CAAC,IAAI,CAAC;YACZ,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG;SACnC,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC;YAAE,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC;QAC1F,OAAO,CAAC,IAAI,CAAC;YACX;gBACE,IAAI,EAAE,MAAM;gBACZ,KAAK;gBACL,KAAK,EAAE,OAAO;gBACd,QAAQ,CAAC,KAAa;oBACpB,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;aACF;SACF,CAAC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAC7C,MAAM,EAAE,CAAC;IAET,OAAO;QACL,IAAI,EAAE,OAAO,CAAC,IAAI;QAClB,OAAO;YACL,KAAK,CAAC,mBAAmB,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;YAChD,OAAO,CAAC,OAAO,EAAE,CAAC;QACpB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/controls/time.d.ts

@@ -0,0 +1,8 @@
+/** Time as the bar shows it and as a screen reader hears it. Pure, node-tested. */
+/** `m:ss`, or `h:mm:ss` from an hour up. Anything not a finite positive number reads as zero. */
+export declare function format(seconds: number): string;
+/** A wall-clock time in the viewer's locale, seconds included: "14:23:05". */
+export declare function clock(epochSeconds: number): string;
+/** What a screen reader hears for a position: "1:23 of 4:56", or the position alone when the duration is unknown or infinite. */
+export declare function describe(current: number, duration: number): string;
+//# sourceMappingURL=time.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/controls/time.ts"],"names":[],"mappings":"AAAA,mFAAmF;AAMnF,iGAAiG;AACjG,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAM9C;AAED,8EAA8E;AAC9E,wBAAgB,KAAK,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAMlD;AAED,iIAAiI;AACjI,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAElE"}

package/dist/controls/time.js

@@ -0,0 +1,25 @@
+/** Time as the bar shows it and as a screen reader hears it. Pure, node-tested. */
+function pad(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+/** `m:ss`, or `h:mm:ss` from an hour up. Anything not a finite positive number reads as zero. */
+export function format(seconds) {
+    const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const rest = total % 60;
+    return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;
+}
+/** A wall-clock time in the viewer's locale, seconds included: "14:23:05". */
+export function clock(epochSeconds) {
+    return new Date(epochSeconds * 1000).toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    });
+}
+/** What a screen reader hears for a position: "1:23 of 4:56", or the position alone when the duration is unknown or infinite. */
+export function describe(current, duration) {
+    return Number.isFinite(duration) ? `${format(current)} of ${format(duration)}` : format(current);
+}
+//# sourceMappingURL=time.js.map

package/dist/controls/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sourceRoot":"","sources":["../../src/controls/time.ts"],"names":[],"mappings":"AAAA,mFAAmF;AAEnF,SAAS,GAAG,CAAC,CAAS;IACpB,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;AACnC,CAAC;AAED,iGAAiG;AACjG,MAAM,UAAU,MAAM,CAAC,OAAe;IACpC,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;IACxB,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,GAAG,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,OAAO,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;AACzF,CAAC;AAED,8EAA8E;AAC9E,MAAM,UAAU,KAAK,CAAC,YAAoB;IACxC,OAAO,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,kBAAkB,CAAC,EAAE,EAAE;QAC1D,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,SAAS;KAClB,CAAC,CAAC;AACL,CAAC;AAED,iIAAiI;AACjI,MAAM,UAAU,QAAQ,CAAC,OAAe,EAAE,QAAgB;IACxD,OAAO,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AACnG,CAAC"}

package/dist/controls/volume.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The volume slider over the primitive. It shows zero while muted, and
+ * writing any level above zero unmutes: dragging the volume up is how a
+ * viewer says they want to hear it.
+ */
+import type { Control } from './control.js';
+export declare function volumeSlider(video: HTMLVideoElement): Control;
+//# sourceMappingURL=volume.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"volume.d.ts","sourceRoot":"","sources":["../../src/controls/volume.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG5C,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CA4B7D"}

package/dist/controls/volume.js

@@ -0,0 +1,29 @@
+import { slider } from './slider.js';
+export function volumeSlider(video) {
+    const bar = slider({
+        name: 'volume',
+        label: 'Volume',
+        step: 0.05,
+        page: 0.2,
+        onInput(value) {
+            video.volume = value;
+            if (value > 0)
+                video.muted = false;
+        },
+    });
+    bar.range(0, 1);
+    function render() {
+        const level = video.muted ? 0 : video.volume;
+        bar.set(level, `${Math.round(level * 100)}%`);
+    }
+    video.addEventListener('volumechange', render);
+    render();
+    return {
+        root: bar.root,
+        dispose() {
+            video.removeEventListener('volumechange', render);
+            bar.dispose();
+        },
+    };
+}
+//# sourceMappingURL=volume.js.map

package/dist/controls/volume.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume.js","sourceRoot":"","sources":["../../src/controls/volume.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,UAAU,YAAY,CAAC,KAAuB;IAClD,MAAM,GAAG,GAAG,MAAM,CAAC;QACjB,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,GAAG;QACT,OAAO,CAAC,KAAa;YACnB,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;YACrB,IAAI,KAAK,GAAG,CAAC;gBAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACrC,CAAC;KACF,CAAC,CAAC;IACH,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAEhB,SAAS,MAAM;QACb,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;QAC7C,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;IAChD,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IAC/C,MAAM,EAAE,CAAC;IAET,OAAO;QACL,IAAI,EAAE,GAAG,CAAC,IAAI;QACd,OAAO;YACL,KAAK,CAAC,mBAAmB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;YAClD,GAAG,CAAC,OAAO,EAAE,CAAC;QAChB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/dom.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The DOM helpers the panels share.
+ *
+ * Every element a panel creates carries a `part`, because `::part()` cannot
+ * descend: `::part(quality) select` matches nothing, so an element without a
+ * name of its own is unreachable from the page's stylesheet. Names are public
+ * API from the first release. Each element also carries a generic name before
+ * its specific one, so `::part(select)` reaches every menu at once.
+ */
+/** An element with its part names, and its text when it has any. */
+export declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, part: string, text?: string): HTMLElementTagNameMap[K];
+/** A `<select>` inside its `<label>`, so neither needs an id to be associated. */
+export declare function menu(name: string, text: string): [HTMLLabelElement, HTMLSelectElement];
+/** Replaces a menu's options and selects `value`. */
+export declare function fill(select: HTMLSelectElement, items: ReadonlyArray<readonly [string, string]>, value: string): void;
+/** Sets `part` to a base plus the state names that are on. State rides the part name because `::part()` takes no attribute selector. */
+export declare function state(node: HTMLElement, base: string, on: Readonly<Record<string, boolean>>): void;
+//# sourceMappingURL=dom.d.ts.map

package/dist/dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,oEAAoE;AACpE,wBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,qBAAqB,EACtD,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,MAAM,EACZ,IAAI,CAAC,EAAE,MAAM,GACZ,qBAAqB,CAAC,CAAC,CAAC,CAK1B;AAED,kFAAkF;AAClF,wBAAgB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAMtF;AAED,qDAAqD;AACrD,wBAAgB,IAAI,CAClB,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAC/C,KAAK,EAAE,MAAM,GACZ,IAAI,CAQN;AAED,wIAAwI;AACxI,wBAAgB,KAAK,CACnB,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GACpC,IAAI,CAMN"}

package/dist/dom.js

@@ -0,0 +1,45 @@
+/**
+ * The DOM helpers the panels share.
+ *
+ * Every element a panel creates carries a `part`, because `::part()` cannot
+ * descend: `::part(quality) select` matches nothing, so an element without a
+ * name of its own is unreachable from the page's stylesheet. Names are public
+ * API from the first release. Each element also carries a generic name before
+ * its specific one, so `::part(select)` reaches every menu at once.
+ */
+/** An element with its part names, and its text when it has any. */
+export function el(tag, part, text) {
+    const node = document.createElement(tag);
+    node.setAttribute('part', part);
+    if (text !== undefined)
+        node.textContent = text;
+    return node;
+}
+/** A `<select>` inside its `<label>`, so neither needs an id to be associated. */
+export function menu(name, text) {
+    const label = el('label', `label ${name}-label`);
+    label.append(el('span', `text ${name}-text`, text));
+    const select = el('select', `select ${name}-select`);
+    label.append(select);
+    return [label, select];
+}
+/** Replaces a menu's options and selects `value`. */
+export function fill(select, items, value) {
+    select.replaceChildren();
+    for (const [id, text] of items) {
+        const option = el('option', 'option', text);
+        option.value = id;
+        select.append(option);
+    }
+    select.value = value;
+}
+/** Sets `part` to a base plus the state names that are on. State rides the part name because `::part()` takes no attribute selector. */
+export function state(node, base, on) {
+    const names = [base];
+    for (const key of Object.keys(on)) {
+        if (on[key] === true)
+            names.push(key);
+    }
+    node.setAttribute('part', names.join(' '));
+}
+//# sourceMappingURL=dom.js.map

package/dist/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,oEAAoE;AACpE,MAAM,UAAU,EAAE,CAChB,GAAM,EACN,IAAY,EACZ,IAAa;IAEb,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAChC,IAAI,IAAI,KAAK,SAAS;QAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAChD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,kFAAkF;AAClF,MAAM,UAAU,IAAI,CAAC,IAAY,EAAE,IAAY;IAC7C,MAAM,KAAK,GAAG,EAAE,CAAC,OAAO,EAAE,SAAS,IAAI,QAAQ,CAAC,CAAC;IACjD,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,IAAI,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,EAAE,CAAC,QAAQ,EAAE,UAAU,IAAI,SAAS,CAAC,CAAC;IACrD,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACzB,CAAC;AAED,qDAAqD;AACrD,MAAM,UAAU,IAAI,CAClB,MAAyB,EACzB,KAA+C,EAC/C,KAAa;IAEb,MAAM,CAAC,eAAe,EAAE,CAAC;IACzB,KAAK,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;QAC/B,MAAM,MAAM,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;QAC5C,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;QAClB,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IACD,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;AACvB,CAAC;AAED,wIAAwI;AACxI,MAAM,UAAU,KAAK,CACnB,IAAiB,EACjB,IAAY,EACZ,EAAqC;IAErC,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC;IACrB,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;QAClC,IAAI,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI;YAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxC,CAAC;IACD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7C,CAAC"}

package/dist/element.d.ts

@@ -0,0 +1,101 @@
+/**
+ * <mattebox-player>: a real <video> as a light-DOM child, so the integrator
+ * can reach it, and the player's own panels in shadow DOM. The element never
+ * forwards or wraps a media element member: play, pause, seek, volume and
+ * the rest live on the video, where the browser, Picture-in-Picture and the
+ * OS media session already find them.
+ *
+ * No class fields, `#private` or otherwise: the ES2015 build would lower
+ * them into runtime helpers, and the emit check bans helpers. Statics are
+ * getters and instance state is declared, then assigned in the constructor.
+ */
+import type { Handler, Player, PlayerError, Session } from '@mattebox/player-core';
+import type { Mattebox, Stage } from 'mattebox';
+import type { ControlsOptions } from './controls/options.js';
+/**
+ * What the element dispatches. `error` is also a standard DOM event name, so
+ * without these overloads a listener on it is typed as `ErrorEvent` and the
+ * payload needs a double cast. They are declarations only: no runtime bytes.
+ */
+export interface MatteboxPlayerEventMap {
+    sourcechange: CustomEvent<Session | null>;
+    error: CustomEvent<PlayerError>;
+}
+export interface MatteboxPlayerElement {
+    addEventListener<K extends keyof MatteboxPlayerEventMap>(type: K, listener: (this: MatteboxPlayerElement, event: MatteboxPlayerEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof MatteboxPlayerEventMap>(type: K, listener: (this: MatteboxPlayerElement, event: MatteboxPlayerEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export interface MatteboxPlayerOptions {
+    /** The whole chain, in order. Takes precedence over `stages` and the `preset` attribute. */
+    readonly handlers?: readonly Handler[];
+    /** Stages for the mattebox handler. Takes precedence over the `preset` attribute. */
+    readonly stages?: readonly Stage[];
+    /** The bar's knobs under `controls="custom"`. An attribute of the same name in kebab-case wins over each. */
+    readonly controls?: ControlsOptions;
+}
+/**
+ * The interface above merges only `addEventListener` and `removeEventListener`
+ * overloads, which the class inherits from HTMLElement. The rule it suppresses
+ * guards against properties an interface declares and a constructor never
+ * assigns, and there are none.
+ */
+export declare class MatteboxPlayerElement extends HTMLElement {
+    static get observedAttributes(): readonly string[];
+    /** Registers the element once, and records the stages markup-only pages get. */
+    static define(options?: MatteboxPlayerOptions): void;
+    private readonly media;
+    /** Wraps the slot, so the overlay's bottom is the video's bottom and not the panels'. */
+    private readonly stage;
+    private readonly bar;
+    private controls;
+    /** Whether the element gave itself a tabindex for the bar, to take back with it. */
+    private focusable;
+    private readonly surface;
+    private readonly options;
+    private panels;
+    private core;
+    private current;
+    private offs;
+    /** Everything the element does to the player runs here, so it runs in order. */
+    private queue;
+    /** Whether a run is queued and not yet started, so a burst of changes loads once. */
+    private pending;
+    constructor(options?: MatteboxPlayerOptions);
+    /** The media element. Everything the browser already does is here. */
+    get video(): HTMLVideoElement;
+    /** The core, or null until the first source has been set up: resolving a preset is asynchronous. */
+    get player(): Player | null;
+    /** The engine feeding the video, or null for a native session and before the first load. */
+    get engine(): Mattebox | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    /**
+     * Applies the `controls` attribute and the knobs: the video's own
+     * controls, and the bar rebuilt from scratch. Rebuilding is cheap, the
+     * knobs are read once at build, and a session re-attaches in one call.
+     */
+    private mode;
+    private forward;
+    private enqueue;
+    /**
+     * One run per burst. The parser sets every attribute and then connects the
+     * element before any queued task starts, and each of those would load on
+     * its own; the flag folds them into the one run that sees the final state.
+     */
+    private reload;
+    private emit;
+    private report;
+    private run;
+    private ensure;
+    private chain;
+    /** What the attributes ask of the session's namespaces, once there is one. */
+    private configure;
+    private unmount;
+    private teardown;
+    /** Drops the player itself, so the next run builds a chain from the new preset. */
+    private discard;
+}
+//# sourceMappingURL=element.d.ts.map

package/dist/element.d.ts.map

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