@mattebox/player 0.1.0 → 0.3.0

package/dist/elements/audio-menu.js

@@ -0,0 +1,70 @@
+import { MenuElement, single } from './menu-element.js';
+import { show } from './shared.js';
+/** The language, then the role, then the id: whichever the manifest gave. */
+export function trackLabel(track) {
+    const parts = [track.lang, track.role].filter((part) => part !== undefined);
+    return parts.length === 0 ? track.id : parts.join(' · ');
+}
+/** The tracks of one content type as menu items, with the active one's id. */
+export function trackItems(engine, contentType) {
+    const tracks = engine.tracks;
+    const available = tracks.available.filter((track) => track.contentType === contentType);
+    const items = [];
+    for (const track of available)
+        items.push([track.id, trackLabel(track)]);
+    return [items, tracks.active(contentType)?.id ?? null];
+}
+/** Subscribes `tick` to the track events, and answers the unsubscribe. */
+export function onTracks(engine, tick) {
+    const offs = [engine.on('tracks:changed', tick), engine.on('tracks:selected', tick)];
+    return () => {
+        for (const off of offs)
+            off();
+    };
+}
+export class MbxAudioMenu extends MenuElement {
+    static get observedAttributes() {
+        return ['label', 'label-back'];
+    }
+    constructor() {
+        super(...single('music'));
+        this.engine = null;
+        show(this.slots, 'default');
+    }
+    name() {
+        return 'Audio';
+    }
+    attach(player) {
+        this.follow(player, (engine) => {
+            this.engine = engine;
+            this.render();
+            if (engine === null)
+                return undefined;
+            return onTracks(engine, () => {
+                this.render();
+            });
+        });
+    }
+    render() {
+        super.render();
+        const engine = this.engine;
+        if (engine === null) {
+            this.hidden = true;
+            return;
+        }
+        const [items, active] = trackItems(engine, 'audio');
+        this.menu.fill([
+            {
+                name: 'track',
+                items,
+                value: active ?? '',
+                onSelect: (value) => {
+                    engine.tracks.select(value);
+                    this.render();
+                },
+            },
+        ]);
+        this.hidden = items.length < 2;
+    }
+}
+//# sourceMappingURL=audio-menu.js.map

package/dist/elements/audio-menu.js.map

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

package/dist/elements/chapters-menu.d.ts

@@ -0,0 +1,12 @@
+import type { PlayerHost } from '../host.js';
+import { MenuElement } from './menu-element.js';
+export declare class MbxChaptersMenu extends MenuElement {
+    static get observedAttributes(): readonly string[];
+    /** What the last fill drew, so a cue change inside the same chapter leaves the popup alone. */
+    private drawn;
+    constructor();
+    protected name(): string;
+    protected attach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=chapters-menu.d.ts.map

package/dist/elements/chapters-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapters-menu.d.ts","sourceRoot":"","sources":["../../src/elements/chapters-menu.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAU,MAAM,mBAAmB,CAAC;AAGxD,qBAAa,eAAgB,SAAQ,WAAW;IAC9C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,+FAA+F;IAC/F,QAAgB,KAAK,CAAS;;cAQX,IAAI,IAAI,MAAM;cAId,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAYhC,MAAM,IAAI,IAAI;CA2BlC"}

package/dist/elements/chapters-menu.js

@@ -0,0 +1,67 @@
+/**
+ * <mbx-chapters-menu>: the chapters of the video as a list, each with its
+ * start time, the one the playhead is in checked; choosing one seeks to its
+ * start. The chapters are the video's own chapters text track, from the
+ * player's `chapters` attribute or a `<track>` the page put there, so the
+ * menu works for every session, native included, and hides while the
+ * video has none. The name comes from `label`.
+ */
+import { chapterAt, chapters, followChapters } from '../controls/chapters.js';
+import { format } from '../controls/time.js';
+import { MenuElement, single } from './menu-element.js';
+import { show } from './shared.js';
+export class MbxChaptersMenu extends MenuElement {
+    static get observedAttributes() {
+        return ['label', 'label-back'];
+    }
+    constructor() {
+        super(...single('chapters'));
+        this.drawn = '';
+        show(this.slots, 'default');
+    }
+    name() {
+        return 'Chapters';
+    }
+    attach(player) {
+        const tick = () => {
+            this.render();
+        };
+        this.keep(followChapters(player.video, tick));
+        // The clock too: WebKit fires no `cuechange` for a hidden track, and the
+        // render is a no-op while the chapter is the same.
+        this.listen(player.video, ['timeupdate', 'seeked', 'emptied', 'loadedmetadata'], tick);
+        this.listen(player, ['sourcechange'], tick);
+        this.render();
+    }
+    render() {
+        super.render();
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        const list = chapters(video);
+        this.hidden = list.length === 0;
+        const current = String(chapterAt(list, video.currentTime));
+        const items = list.map((chapter, i) => [
+            String(i),
+            chapter.title,
+            format(chapter.start),
+        ]);
+        const key = `${current}|${items.map(([, title, start]) => `${start} ${title}`).join('\n')}`;
+        if (key === this.drawn)
+            return;
+        this.drawn = key;
+        this.menu.fill([
+            {
+                name: 'chapter',
+                items,
+                value: current,
+                onSelect: (value) => {
+                    const chapter = list[Number(value)];
+                    if (chapter !== undefined)
+                        video.currentTime = chapter.start;
+                },
+            },
+        ]);
+    }
+}
+//# sourceMappingURL=chapters-menu.js.map

package/dist/elements/chapters-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapters-menu.js","sourceRoot":"","sources":["../../src/elements/chapters-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAC9C,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IACjC,CAAC;IAKD;QACE,KAAK,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IAC9B,CAAC;IAEkB,IAAI;QACrB,OAAO,UAAU,CAAC;IACpB,CAAC;IAEkB,MAAM,CAAC,MAAkB;QAC1C,MAAM,IAAI,GAAG,GAAS,EAAE;YACtB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9C,yEAAyE;QACzE,mDAAmD;QACnD,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,CAAC,EAAE,IAAI,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEkB,MAAM;QACvB,KAAK,CAAC,MAAM,EAAE,CAAC;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;QACjC,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO;QAChC,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC;QAChC,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;QAC3D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAqC,EAAE,CAAC;YACxE,MAAM,CAAC,CAAC,CAAC;YACT,OAAO,CAAC,KAAK;YACb,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SACtB,CAAC,CAAC;QACH,MAAM,GAAG,GAAG,GAAG,OAAO,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QAC5F,IAAI,GAAG,KAAK,IAAI,CAAC,KAAK;YAAE,OAAO;QAC/B,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YACb;gBACE,IAAI,EAAE,SAAS;gBACf,KAAK;gBACL,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;oBACpC,IAAI,OAAO,KAAK,SAAS;wBAAE,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC,KAAK,CAAC;gBAC/D,CAAC;aACF;SACF,CAAC,CAAC;IACL,CAAC;CACF"}

package/dist/elements/component.d.ts

@@ -0,0 +1,45 @@
+/**
+ * What every control shares: finding its player, and letting go of it.
+ *
+ * A control attaches when it is connected inside a player, once the player
+ * is defined and upgraded, and detaches when it is removed. Every listener
+ * a control adds goes through `listen`, so detaching drops them all. A
+ * control connected outside a player is inert. Moving one to another
+ * player detaches and attaches again, so a framework that reorders
+ * children is safe.
+ *
+ * No class fields: the ES2015 build would lower them into helpers, and the
+ * emit check bans helpers. State is declared, then assigned in the
+ * constructor.
+ */
+import type { Mattebox } from 'mattebox';
+import type { PlayerHost } from '../host.js';
+export declare abstract class Component extends HTMLElement {
+    protected player: PlayerHost | null;
+    private offs;
+    /** Bumped on every connect and disconnect, so a late upgrade attaches only to the current connection. */
+    private epoch;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** Adds `fn` for every name on `target`, to be removed on detach. */
+    protected listen(target: EventTarget, names: readonly string[], fn: () => void): void;
+    /** Keeps `off` to run on detach. */
+    protected keep(off: () => void): void;
+    /**
+     * Runs `fn` over the current engine now and on every session change,
+     * running what the last call returned first, so a control's engine
+     * subscriptions live exactly as long as the session. Detach runs it too.
+     */
+    protected follow(player: PlayerHost, fn: (engine: Mattebox | null) => (() => void) | undefined): void;
+    /** Runs `fn` when any of `names` changes on `target`, or under it with `subtree`, until detach. */
+    protected observe(target: Element, names: readonly string[], fn: () => void, subtree?: boolean): void;
+    /** The control is connected inside an upgraded player. Subscribe and render. */
+    protected abstract attach(player: PlayerHost): void;
+    /** The control left its player. Listeners are already gone; undo anything else. */
+    protected detach(_player: PlayerHost): void;
+    /** Draws the current state. Called on every observed attribute change while attached. */
+    protected render(): void;
+}
+//# sourceMappingURL=component.d.ts.map

package/dist/elements/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/elements/component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI7C,8BAAsB,SAAU,SAAQ,WAAW;IACjD,UAAkB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5C,QAAgB,IAAI,CAAoB;IACxC,yGAAyG;IACzG,QAAgB,KAAK,CAAS;;IAS9B,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,IAAI,IAAI;IAIhC,qEAAqE;IACrE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAOrF,oCAAoC;IACpC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,IAAI,GAAG,IAAI;IAIrC;;;;OAIG;IACH,SAAS,CAAC,MAAM,CACd,MAAM,EAAE,UAAU,EAClB,EAAE,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,GACxD,IAAI;IAcP,mGAAmG;IACnG,SAAS,CAAC,OAAO,CACf,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,SAAS,MAAM,EAAE,EACxB,EAAE,EAAE,MAAM,IAAI,EACd,OAAO,UAAQ,GACd,IAAI;IAQP,gFAAgF;IAChF,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAEnD,mFAAmF;IACnF,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,GAAG,IAAI;IAE3C,yFAAyF;IACzF,SAAS,CAAC,MAAM,IAAI,IAAI;CACzB"}

package/dist/elements/component.js

@@ -0,0 +1,90 @@
+import { findPlayer } from '../host.js';
+import { PLAYER } from '../tags.js';
+export class Component extends HTMLElement {
+    constructor() {
+        super();
+        this.player = null;
+        this.offs = [];
+        this.epoch = 0;
+    }
+    connectedCallback() {
+        const found = findPlayer(this);
+        if (found === null)
+            return;
+        this.epoch += 1;
+        const epoch = this.epoch;
+        const attach = () => {
+            if (epoch !== this.epoch || !this.isConnected)
+                return;
+            // Defined, and this instance upgraded: `video` is on the prototype.
+            customElements.upgrade(found);
+            if (!('video' in found))
+                return;
+            this.player = found;
+            this.attach(this.player);
+        };
+        if ('video' in found)
+            attach();
+        else
+            void customElements.whenDefined(PLAYER).then(attach);
+    }
+    disconnectedCallback() {
+        this.epoch += 1;
+        for (const off of this.offs)
+            off();
+        this.offs = [];
+        const player = this.player;
+        if (player === null)
+            return;
+        this.player = null;
+        this.detach(player);
+    }
+    attributeChangedCallback() {
+        if (this.player !== null)
+            this.render();
+    }
+    /** Adds `fn` for every name on `target`, to be removed on detach. */
+    listen(target, names, fn) {
+        for (const name of names)
+            target.addEventListener(name, fn);
+        this.offs.push(() => {
+            for (const name of names)
+                target.removeEventListener(name, fn);
+        });
+    }
+    /** Keeps `off` to run on detach. */
+    keep(off) {
+        this.offs.push(off);
+    }
+    /**
+     * Runs `fn` over the current engine now and on every session change,
+     * running what the last call returned first, so a control's engine
+     * subscriptions live exactly as long as the session. Detach runs it too.
+     */
+    follow(player, fn) {
+        let off;
+        const run = () => {
+            off?.();
+            off = fn(player.engine);
+        };
+        this.listen(player, ['sourcechange'], run);
+        this.offs.push(() => {
+            off?.();
+            off = undefined;
+        });
+        run();
+    }
+    /** Runs `fn` when any of `names` changes on `target`, or under it with `subtree`, until detach. */
+    observe(target, names, fn, subtree = false) {
+        const observer = new MutationObserver(fn);
+        observer.observe(target, { attributes: true, attributeFilter: [...names], subtree });
+        this.offs.push(() => {
+            observer.disconnect();
+        });
+    }
+    /** The control left its player. Listeners are already gone; undo anything else. */
+    detach(_player) { }
+    /** Draws the current state. Called on every observed attribute change while attached. */
+    render() { }
+}
+//# sourceMappingURL=component.js.map

package/dist/elements/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/elements/component.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,MAAM,OAAgB,SAAU,SAAQ,WAAW;IAMjD;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;QACf,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACjB,CAAC;IAED,iBAAiB;QACf,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO;QAC3B,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,MAAM,MAAM,GAAG,GAAS,EAAE;YACxB,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YACtD,oEAAoE;YACpE,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YAC9B,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC;gBAAE,OAAO;YAChC,IAAI,CAAC,MAAM,GAAG,KAAmB,CAAC;YAClC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3B,CAAC,CAAC;QACF,IAAI,OAAO,IAAI,KAAK;YAAE,MAAM,EAAE,CAAC;;YAC1B,KAAK,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5D,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAChB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI;YAAE,GAAG,EAAE,CAAC;QACnC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC;QACf,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,MAAM,KAAK,IAAI;YAAE,OAAO;QAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC;IAED,wBAAwB;QACtB,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAC1C,CAAC;IAED,qEAAqE;IAC3D,MAAM,CAAC,MAAmB,EAAE,KAAwB,EAAE,EAAc;QAC5E,KAAK,MAAM,IAAI,IAAI,KAAK;YAAE,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YAClB,KAAK,MAAM,IAAI,IAAI,KAAK;gBAAE,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACjE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oCAAoC;IAC1B,IAAI,CAAC,GAAe;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtB,CAAC;IAED;;;;OAIG;IACO,MAAM,CACd,MAAkB,EAClB,EAAyD;QAEzD,IAAI,GAA6B,CAAC;QAClC,MAAM,GAAG,GAAG,GAAS,EAAE;YACrB,GAAG,EAAE,EAAE,CAAC;YACR,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC,CAAC;QACF,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YAClB,GAAG,EAAE,EAAE,CAAC;YACR,GAAG,GAAG,SAAS,CAAC;QAClB,CAAC,CAAC,CAAC;QACH,GAAG,EAAE,CAAC;IACR,CAAC;IAED,mGAAmG;IACzF,OAAO,CACf,MAAe,EACf,KAAwB,EACxB,EAAc,EACd,OAAO,GAAG,KAAK;QAEf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;QAC1C,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,GAAG,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;QACrF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC;IAKD,mFAAmF;IACzE,MAAM,CAAC,OAAmB,IAAS,CAAC;IAE9C,yFAAyF;IAC/E,MAAM,KAAU,CAAC;CAC5B"}

package/dist/elements/control-bar.d.ts

@@ -0,0 +1,75 @@
+/**
+ * <mbx-control-bar>: an overlay over the bottom of the video that lays its
+ * children out in two rows, the seek row over the buttons row. A child
+ * with `slot="seek"` sits in the seek row; everything else in the buttons
+ * row, in its order, and an <mbx-spacer> pushes what follows to the right.
+ *
+ * The bar owns what no one control can: the idle fade, the shortcuts, the
+ * click on the video, and the subtitles lifted above it. It sets `idle` on
+ * itself and on the player while it hides.
+ *
+ * The fade is one timer. Any activity, a pointer moving or pressing, a
+ * key, playback starting, re-arms it for `idle-ms`, and when it fires the
+ * bar hides unless something it can know for certain holds it: the video
+ * is paused, a descendant carries `open`, or keyboard focus is inside it,
+ * where keyboard means the last input was a key and not a pointer.
+ * Whether the pointer is over the player is never tracked: that goes
+ * stale when the pointer leaves without a move the player sees.
+ *
+ * The shortcuts listen on the player, so they hear every key pressed
+ * inside it, and only there: Space and `k` toggle play, `m` mutes, `f`
+ * toggles fullscreen, the arrows seek by `seek-step`. Space is left to a
+ * focused button, which is its own. A click on the video toggles play.
+ * Fullscreen goes on the player itself, so the bar comes along.
+ *
+ * A narrow bar collapses the buttons row by `priority`: each child carries
+ * a number, its own attribute or the default for its tag, and the bar
+ * marks the highest numbers `collapsed` one at a time until the row fits
+ * with a little slack, from the right among equals. Zero, the default for
+ * anything unlisted, never collapses: play and fullscreen stay whatever
+ * the width. The mark is an attribute and the hiding is one `::slotted`
+ * rule here, so a page styles or overrides it by the tag. The volume's
+ * slider is a candidate of its own, and counts at its unfolded width, so
+ * the row is sized for what the pointer will make of it.
+ */
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxControlBar extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly seekRow;
+    private readonly buttonsRow;
+    private readonly buttons;
+    private timer;
+    /** Fires on a width change of the buttons row, so the collapse follows the page's layout. */
+    private resizer;
+    /** Whether the last input was a key, so focus inside holds the bar. */
+    private keyboard;
+    private cues;
+    private screen;
+    constructor();
+    /**
+     * What the buttons need: their widths and the gaps between them, the
+     * spacer aside since it takes what is left, and a folded slider at the
+     * width it unfolds to. The row's own width says nothing, because the
+     * spacer fills it whatever the buttons take.
+     */
+    private needed;
+    /**
+     * Collapses the buttons row to its width. Everything is shown first, so
+     * a wider bar gets its controls back, then the highest priorities go one
+     * at a time while the buttons need more than the row has, less the
+     * slack. Each step lays the row out again; a bar carries a dozen
+     * controls, so that is cheap.
+     */
+    private collapse;
+    /** From the first row's top to the bar's bottom: what the bar covers of the picture. */
+    private covered;
+    private held;
+    private idle;
+    private sleep;
+    private wake;
+    private key;
+    protected attach(player: PlayerHost): void;
+    protected detach(player: PlayerHost): void;
+}
+//# sourceMappingURL=control-bar.d.ts.map

package/dist/elements/control-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-bar.d.ts","sourceRoot":"","sources":["../../src/elements/control-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAMH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAe7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAgG3C,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,OAAO,CAAiB;IACjD,iBAAyB,UAAU,CAAiB;IACpD,iBAAyB,OAAO,CAAkB;IAClD,QAAgB,KAAK,CAA4C;IACjE,6FAA6F;IAC7F,QAAgB,OAAO,CAAwB;IAC/C,uEAAuE;IACvE,QAAgB,QAAQ,CAAU;IAClC,QAAgB,IAAI,CAAiB;IACrC,QAAgB,MAAM,CAAoB;;IAsB1C;;;;;OAKG;IACH,OAAO,CAAC,MAAM;IAgBd;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ;IAyBhB,wFAAwF;IACxF,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,IAAI;IAQZ,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,GAAG;cAsCQ,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAmDhC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;CAgBpD"}