@mattebox/player 0.1.0 → 0.2.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`, until detach. */
+    protected observe(target: Element, names: readonly string[], fn: () => void): 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,uEAAuE;IACvE,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAQlF,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`, until detach. */
+    observe(target, names, fn) {
+        const observer = new MutationObserver(fn);
+        observer.observe(target, { attributes: true, attributeFilter: [...names] });
+        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":"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"}

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

@@ -0,0 +1,46 @@
+/**
+ * <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.
+ */
+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 timer;
+    /** Whether the last input was a key, so focus inside holds the bar. */
+    private keyboard;
+    private cues;
+    private screen;
+    constructor();
+    /** 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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAuC3C,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,OAAO,CAAiB;IACjD,QAAgB,KAAK,CAA4C;IACjE,uEAAuE;IACvE,QAAgB,QAAQ,CAAU;IAClC,QAAgB,IAAI,CAAiB;IACrC,QAAgB,MAAM,CAAoB;;IAoB1C,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;cAqChC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;CAUpD"}

package/dist/elements/control-bar.js

@@ -0,0 +1,207 @@
+/**
+ * <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.
+ */
+import { cueLift, cueStyle } from '../controls/cues.js';
+import { fullscreen } from '../controls/fullscreen.js';
+import { Component } from './component.js';
+import { number, style } from './shared.js';
+const IDLE_MS = 3000;
+const SEEK_STEP = 5;
+const STYLE = `
+:host {
+  position: absolute;
+  inset: auto 0 0 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 40px 16px 12px;
+  color: var(--mbx-text);
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+  font: 500 16px/1.2 var(--mbx-font);
+  transition: opacity 0.2s;
+}
+:host([idle]) { opacity: 0; pointer-events: none; }
+[part~="row"] { display: flex; align-items: center; gap: 8px; }
+[part~="seek-row"] { gap: 16px; }
+@media (prefers-reduced-motion: reduce) {
+  :host { transition: none; }
+}
+`;
+function end(video) {
+    if (Number.isFinite(video.duration))
+        return video.duration;
+    const ranges = video.seekable;
+    return ranges.length > 0 ? ranges.end(ranges.length - 1) : video.currentTime;
+}
+function toggle(video) {
+    if (video.paused)
+        video.play().catch(() => undefined);
+    else
+        video.pause();
+}
+export class MbxControlBar extends Component {
+    static get observedAttributes() {
+        return ['idle-ms', 'seek-step'];
+    }
+    constructor() {
+        super();
+        this.timer = undefined;
+        this.keyboard = false;
+        this.cues = null;
+        this.screen = null;
+        const root = this.attachShadow({ mode: 'open' });
+        this.seekRow = document.createElement('div');
+        this.seekRow.setAttribute('part', 'row seek-row');
+        const seek = document.createElement('slot');
+        seek.name = 'seek';
+        this.seekRow.append(seek);
+        const buttons = document.createElement('div');
+        buttons.setAttribute('part', 'row buttons-row');
+        buttons.append(document.createElement('slot'));
+        root.append(style(STYLE), this.seekRow, buttons);
+    }
+    /** From the first row's top to the bar's bottom: what the bar covers of the picture. */
+    covered() {
+        return {
+            top: this.seekRow.getBoundingClientRect().top,
+            bottom: this.getBoundingClientRect().bottom,
+        };
+    }
+    held(player) {
+        if (player.video.paused)
+            return true;
+        if (this.querySelector('[open]') !== null)
+            return true;
+        if (!this.keyboard)
+            return false;
+        const active = this.getRootNode().activeElement;
+        return active !== null && this.contains(active);
+    }
+    idle(player, on) {
+        if (this.hasAttribute('idle') === on)
+            return;
+        this.toggleAttribute('idle', on);
+        player.toggleAttribute('idle', on);
+        this.cues?.lifted(!on);
+    }
+    sleep(player) {
+        this.timer = undefined;
+        // A hold is checked again later: a menu closes and a pause ends without
+        // an event the bar hears.
+        if (this.held(player)) {
+            this.timer = setTimeout(() => this.sleep(player), number(this, 'idle-ms', IDLE_MS));
+            return;
+        }
+        this.idle(player, true);
+    }
+    wake(player) {
+        clearTimeout(this.timer);
+        this.idle(player, false);
+        this.timer = setTimeout(() => this.sleep(player), number(this, 'idle-ms', IDLE_MS));
+    }
+    key(player, event) {
+        this.keyboard = true;
+        this.wake(player);
+        if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const video = player.video;
+        const onButton = event.composedPath()[0] instanceof HTMLButtonElement;
+        switch (event.key) {
+            case ' ':
+                if (onButton)
+                    return;
+                toggle(video);
+                break;
+            case 'k':
+            case 'K':
+                toggle(video);
+                break;
+            case 'm':
+            case 'M':
+                video.muted = !video.muted;
+                break;
+            case 'f':
+            case 'F':
+                this.screen?.toggle();
+                break;
+            case 'ArrowLeft':
+                video.currentTime = Math.max(0, video.currentTime - number(this, 'seek-step', SEEK_STEP));
+                break;
+            case 'ArrowRight':
+                video.currentTime = Math.min(end(video), video.currentTime + number(this, 'seek-step', SEEK_STEP));
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    attach(player) {
+        const video = player.video;
+        cueStyle();
+        this.cues = cueLift(video, player, () => this.covered());
+        const screen = fullscreen(player, video);
+        this.screen = screen;
+        const reflect = () => {
+            player.toggleAttribute('fullscreen', screen.active());
+        };
+        this.keep(screen.watch(reflect));
+        reflect();
+        const pointer = () => {
+            this.keyboard = false;
+            this.wake(player);
+        };
+        const key = (event) => {
+            this.key(player, event);
+        };
+        const click = (event) => {
+            // The video and nothing else: a control handles its own click.
+            if (event.composedPath()[0] === video)
+                toggle(video);
+        };
+        this.listen(player, ['pointermove', 'pointerdown'], pointer);
+        player.addEventListener('keydown', key);
+        player.addEventListener('click', click);
+        this.keep(() => {
+            player.removeEventListener('keydown', key);
+            player.removeEventListener('click', click);
+        });
+        this.listen(video, ['play', 'pause', 'ended'], () => {
+            this.wake(player);
+        });
+        this.wake(player);
+        this.cues.lifted(true);
+    }
+    detach(player) {
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        this.cues?.dispose();
+        this.cues = null;
+        this.screen = null;
+        this.removeAttribute('idle');
+        player.removeAttribute('idle');
+        player.removeAttribute('fullscreen');
+    }
+}
+//# sourceMappingURL=control-bar.js.map

package/dist/elements/control-bar.js.map

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

package/dist/elements/current-time.d.ts

@@ -0,0 +1,5 @@
+import { TimeElement } from './time-element.js';
+export declare class MbxCurrentTime extends TimeElement {
+    protected render(): void;
+}
+//# sourceMappingURL=current-time.d.ts.map

package/dist/elements/current-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"current-time.d.ts","sourceRoot":"","sources":["../../src/elements/current-time.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,qBAAa,cAAe,SAAQ,WAAW;cAC1B,MAAM,IAAI,IAAI;CAYlC"}

package/dist/elements/current-time.js

@@ -0,0 +1,27 @@
+/**
+ * <mbx-current-time>: the position, "1:23". On a live stream it reads the
+ * wall clock when `engine.pdt` can say it, "14:23:05", which is what a
+ * viewer of a broadcast wants to know, and the distance behind the edge
+ * otherwise, "-0:10". While the player says the stream is live but not
+ * seekable, which the seek bar decides, there is no position to show and
+ * the element hides.
+ */
+import { live, span, wall } from '../controls/session.js';
+import { format } from '../controls/time.js';
+import { TimeElement } from './time-element.js';
+export class MbxCurrentTime extends TimeElement {
+    render() {
+        const player = this.player;
+        if (player === null)
+            return;
+        const video = player.video;
+        const engine = player.engine;
+        const on = live(engine) !== undefined;
+        const time = video.currentTime;
+        this.text.data = on
+            ? (wall(engine, time) ?? `-${format(span(video, engine).end - time)}`)
+            : format(time);
+        this.hidden = on && player.hasAttribute('live') && !player.hasAttribute('seekable');
+    }
+}
+//# sourceMappingURL=current-time.js.map

package/dist/elements/current-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"current-time.js","sourceRoot":"","sources":["../../src/elements/current-time.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAO,cAAe,SAAQ,WAAW;IAC1B,MAAM;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,MAAM,KAAK,IAAI;YAAE,OAAO;QAC5B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAC7B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;QACtC,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE;YACjB,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;YACtE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,EAAE,IAAI,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACtF,CAAC;CACF"}

package/dist/elements/drm-badge.d.ts

@@ -0,0 +1,29 @@
+/**
+ * <mbx-drm-badge>: a lock over `engine.drm`, hidden until a key system is
+ * known and for a session without the EME stages. Hover or focus shows
+ * what it knows: the key system, and the key sessions with their
+ * statuses. The glyph is `icon`; the name comes from `label`, where
+ * `{system}` is the key system's name and `{keys}` the sessions:
+ * "Protected by {system}, {keys}". The sessions read from `label-keys`
+ * with `{count}` and `{statuses}`, `label-key` for one, `label-no-key`
+ * for none.
+ */
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxDrmBadge extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly tooltip;
+    private readonly system;
+    private readonly system_id;
+    private readonly keys;
+    private engine;
+    constructor();
+    /** Named and focusable before attaching: a constructor must not add attributes. */
+    connectedCallback(): void;
+    /** "3 keys: usable ×2, expired", or "no key yet". */
+    private sessionsText;
+    protected attach(player: PlayerHost): void;
+    protected detach(): void;
+    protected render(): void;
+}
+//# sourceMappingURL=drm-badge.d.ts.map