@mattebox/player 0.1.0 → 0.2.0

package/dist/elements/skip-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skip-button.js","sourceRoot":"","sources":["../../src/elements/skip-button.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,OAAO,GAAG,EAAE,CAAC;AAEnB,6FAA6F;AAC7F,SAAS,QAAQ,CAAC,IAAa,EAAE,MAAc;IAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC;IACrD,IAAI,MAAM,KAAK,EAAE,IAAI,MAAM,KAAK,EAAE;QAAE,OAAO,GAAG,IAAI,IAAI,MAAM,EAAE,CAAC;IAC/D,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,OAAO,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC9B,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/C,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC;QACzB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACzC,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC;IAED,uEAAuE;IAC/D,OAAO;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,CAAC;QAC9D,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;IAClD,CAAC;IAEO,IAAI;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;QACjC,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO;QAChC,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC9B,MAAM,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;YACzC,CAAC,CAAC,KAAK,CAAC,QAAQ;YAChB,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;gBACjB,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC/B,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC;QACxB,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IACrF,CAAC;IAEkB,MAAM,CAAC,OAAmB;QAC3C,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEkB,MAAM;QACvB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC/B,MAAM,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;QACzD,MAAM,QAAQ,GACZ,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC;QAChG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IAC9E,CAAC;CACF"}

package/dist/elements/spacer.d.ts

@@ -0,0 +1,4 @@
+export declare class MbxSpacer extends HTMLElement {
+    constructor();
+}
+//# sourceMappingURL=spacer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../src/elements/spacer.ts"],"names":[],"mappings":"AAGA,qBAAa,SAAU,SAAQ,WAAW;;CAKzC"}

package/dist/elements/spacer.js

@@ -0,0 +1,9 @@
+/** <mbx-spacer>: takes the room in a row, so what follows sits at the far end. */
+import { style } from './shared.js';
+export class MbxSpacer extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' }).append(style(':host { display: block; flex: 1 1 auto; }'));
+    }
+}
+//# sourceMappingURL=spacer.js.map

package/dist/elements/spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.js","sourceRoot":"","sources":["../../src/elements/spacer.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,OAAO,SAAU,SAAQ,WAAW;IACxC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,2CAA2C,CAAC,CAAC,CAAC;IACjG,CAAC;CACF"}

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

@@ -0,0 +1,18 @@
+/**
+ * <mbx-speed-menu>: the rate over `video.playbackRate`. Video-only, so it
+ * works for every session, native included. The rates come from `rates`,
+ * space-separated, and the video's own value is the truth, read on
+ * `ratechange` and listed even when it is not one of them. The name comes
+ * from `label`, the word for one from `label-normal`.
+ */
+import type { PlayerHost } from '../host.js';
+import { MenuElement } from './menu-element.js';
+export declare class MbxSpeedMenu extends MenuElement {
+    static get observedAttributes(): readonly string[];
+    constructor();
+    protected name(): string;
+    private rates;
+    protected attach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=speed-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"speed-menu.d.ts","sourceRoot":"","sources":["../../src/elements/speed-menu.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAU,MAAM,mBAAmB,CAAC;AAKxD,qBAAa,YAAa,SAAQ,WAAW;IAC3C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;;cAOkB,IAAI,IAAI,MAAM;IAIjC,OAAO,CAAC,KAAK;cAUM,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAOhC,MAAM,IAAI,IAAI;CAsBlC"}

package/dist/elements/speed-menu.js

@@ -0,0 +1,56 @@
+import { MenuElement, single } from './menu-element.js';
+import { show } from './shared.js';
+const RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+export class MbxSpeedMenu extends MenuElement {
+    static get observedAttributes() {
+        return ['rates', 'label', 'label-normal', 'label-back'];
+    }
+    constructor() {
+        super(...single('playback-speed'));
+        show(this.slots, 'default');
+    }
+    name() {
+        return 'Playback speed';
+    }
+    rates() {
+        const raw = this.getAttribute('rates');
+        if (raw === null)
+            return RATES;
+        const out = raw
+            .split(/\s+/)
+            .map(Number)
+            .filter((rate) => Number.isFinite(rate) && rate > 0);
+        return out.length === 0 ? RATES : out;
+    }
+    attach(player) {
+        this.listen(player.video, ['ratechange'], () => {
+            this.render();
+        });
+        this.render();
+    }
+    render() {
+        super.render();
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        const normal = this.getAttribute('label-normal') ?? 'Normal';
+        const items = this.rates().map((rate) => [
+            String(rate),
+            rate === 1 ? normal : `${rate}×`,
+        ]);
+        const current = String(video.playbackRate);
+        if (!items.some(([id]) => id === current))
+            items.push([current, `${current}×`]);
+        this.menu.fill([
+            {
+                name: 'rate',
+                items,
+                value: current,
+                onSelect: (value) => {
+                    video.playbackRate = Number(value);
+                },
+            },
+        ]);
+    }
+}
+//# sourceMappingURL=speed-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"speed-menu.js","sourceRoot":"","sources":["../../src/elements/speed-menu.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;AAE3C,MAAM,OAAO,YAAa,SAAQ,WAAW;IAC3C,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,CAAC,CAAC;IAC1D,CAAC;IAED;QACE,KAAK,CAAC,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IAC9B,CAAC;IAEkB,IAAI;QACrB,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAEO,KAAK;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACvC,IAAI,GAAG,KAAK,IAAI;YAAE,OAAO,KAAK,CAAC;QAC/B,MAAM,GAAG,GAAG,GAAG;aACZ,KAAK,CAAC,KAAK,CAAC;aACZ,GAAG,CAAC,MAAM,CAAC;aACX,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC;QACvD,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;IACxC,CAAC;IAEkB,MAAM,CAAC,MAAkB;QAC1C,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE;YAC7C,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC,CAAC;QACH,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,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,QAAQ,CAAC;QAC7D,MAAM,KAAK,GAAqC,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;YACzE,MAAM,CAAC,IAAI,CAAC;YACZ,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG;SACjC,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;YAAE,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC;QAChF,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YACb;gBACE,IAAI,EAAE,MAAM;gBACZ,KAAK;gBACL,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;gBACrC,CAAC;aACF;SACF,CAAC,CAAC;IACL,CAAC;CACF"}

package/dist/elements/start-button.d.ts

@@ -0,0 +1,13 @@
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxStartButton extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly button;
+    private readonly slots;
+    /** A fatal error is on screen, and the play stays out of its way until playback or a load. */
+    private failed;
+    constructor();
+    protected attach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=start-button.d.ts.map

package/dist/elements/start-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"start-button.d.ts","sourceRoot":"","sources":["../../src/elements/start-button.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA6B3C,qBAAa,cAAe,SAAQ,SAAS;IAC3C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAoB;IACnD,iBAAyB,KAAK,CAAiC;IAC/D,8FAA8F;IAC9F,QAAgB,MAAM,CAAU;;cAiBb,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cA2BhC,MAAM,IAAI,IAAI;CAWlC"}

package/dist/elements/start-button.js

@@ -0,0 +1,83 @@
+import { icon } from '../controls/icons.js';
+import { Component } from './component.js';
+import { BUTTON_STYLE, iconSlots, show, style } from './shared.js';
+const STATES = ['play', 'replay'];
+const STYLE = `${BUTTON_STYLE}
+:host {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -32px 0 0 -52px;
+}
+[part~="button"] {
+  width: 104px;
+  height: 64px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(0, 0, 0, 0.45);
+  color: var(--mbx-text);
+  opacity: 0.9;
+  transition: opacity 0.15s, background 0.15s;
+}
+[part~="button"]:hover { opacity: 1; background: rgba(0, 0, 0, 0.6); }
+[part~="icon"], ::slotted(*) { width: 40px; height: 40px; margin-left: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  [part~="button"] { transition: none; }
+}
+`;
+export class MbxStartButton extends Component {
+    static get observedAttributes() {
+        return ['label-play', 'label-replay'];
+    }
+    constructor() {
+        super();
+        this.failed = false;
+        const root = this.attachShadow({ mode: 'open' });
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.setAttribute('part', 'button');
+        this.slots = iconSlots(STATES, icon);
+        for (const state of STATES)
+            this.button.append(this.slots[state]);
+        this.button.addEventListener('click', () => {
+            this.player?.video.play().catch(() => undefined);
+        });
+        root.append(style(STYLE), this.button);
+    }
+    attach(player) {
+        const video = player.video;
+        this.listen(video, ['play', 'pause', 'ended'], () => {
+            this.render();
+        });
+        this.listen(video, ['playing', 'loadstart'], () => {
+            this.failed = false;
+            this.render();
+        });
+        this.listen(player, ['sourcechange'], () => {
+            this.failed = false;
+            this.render();
+        });
+        const failure = (event) => {
+            const error = event.detail;
+            if (!error.fatal)
+                return;
+            this.failed = true;
+            this.render();
+        };
+        player.addEventListener('error', failure);
+        this.keep(() => {
+            player.removeEventListener('error', failure);
+        });
+        this.failed = player.error !== null;
+        this.render();
+    }
+    render() {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        const state = video.ended ? 'replay' : 'play';
+        show(this.slots, state);
+        this.button.setAttribute('aria-label', this.getAttribute(`label-${state}`) ?? (state === 'play' ? 'Play' : 'Replay'));
+        this.hidden = this.failed || !video.paused;
+    }
+}
+//# sourceMappingURL=start-button.js.map

package/dist/elements/start-button.js.map

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

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

@@ -0,0 +1,17 @@
+import type { PlayerHost } from '../host.js';
+import { MenuElement } from './menu-element.js';
+export declare const SUBTITLE_SIZE = "subtitle-size";
+export declare const SUBTITLE_BACKGROUND = "subtitle-background";
+type State = 'off' | 'on';
+export declare class MbxSubtitlesMenu extends MenuElement<State> {
+    static get observedAttributes(): readonly string[];
+    private engine;
+    constructor();
+    protected name(): string;
+    /** A look's group: the choices named from the attributes, the value from the player's. */
+    private looks;
+    protected attach(player: PlayerHost): void;
+    protected render(): void;
+}
+export {};
+//# sourceMappingURL=subtitles-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subtitles-menu.d.ts","sourceRoot":"","sources":["../../src/elements/subtitles-menu.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,eAAO,MAAM,aAAa,kBAAkB,CAAC;AAC7C,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAczD,KAAK,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC;AAG1B,qBAAa,gBAAiB,SAAQ,WAAW,CAAC,KAAK,CAAC;IACtD,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAYjD;IAED,QAAgB,MAAM,CAAkB;;cAQrB,IAAI,IAAI,MAAM;IAIjC,0FAA0F;IAC1F,OAAO,CAAC,KAAK;cAsBM,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAWhC,MAAM,IAAI,IAAI;CAqClC"}

package/dist/elements/subtitles-menu.js

@@ -0,0 +1,108 @@
+import { icon } from '../controls/icons.js';
+import { onTracks, trackItems } from './audio-menu.js';
+import { MenuElement } from './menu-element.js';
+import { show } from './shared.js';
+const OFF = 'off';
+export const SUBTITLE_SIZE = 'subtitle-size';
+export const SUBTITLE_BACKGROUND = 'subtitle-background';
+const SIZES = [
+    ['small', 'Small'],
+    ['medium', 'Medium'],
+    ['large', 'Large'],
+    ['xlarge', 'Extra large'],
+];
+const BACKGROUNDS = [
+    ['none', 'None'],
+    ['dark', 'Dark'],
+    ['solid', 'Solid'],
+];
+const STATES = ['off', 'on'];
+export class MbxSubtitlesMenu extends MenuElement {
+    static get observedAttributes() {
+        return [
+            'label',
+            'label-back',
+            'label-off',
+            'label-track',
+            'label-settings',
+            'label-size',
+            'label-background',
+            ...SIZES.map(([id]) => `label-${id}`),
+            ...BACKGROUNDS.map(([id]) => `label-${id}`),
+        ];
+    }
+    constructor() {
+        super(STATES, (state) => icon(state === 'on' ? 'closed-captions-on' : 'closed-captions'));
+        this.engine = null;
+        show(this.slots, 'off');
+    }
+    name() {
+        return 'Subtitles';
+    }
+    /** A look's group: the choices named from the attributes, the value from the player's. */
+    looks(player, attribute, name, fallback, choices, initial) {
+        const set = player.getAttribute(attribute);
+        const value = set !== null && choices.some(([id]) => id === set) ? set : initial;
+        return {
+            name,
+            label: this.getAttribute(`label-${name}`) ?? fallback,
+            items: choices.map(([id, text]) => [id, this.getAttribute(`label-${id}`) ?? text]),
+            value,
+            onSelect: (chosen) => {
+                player.setAttribute(attribute, chosen);
+                this.render();
+            },
+        };
+    }
+    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;
+        const player = this.player;
+        if (engine === null || player === null) {
+            this.hidden = true;
+            return;
+        }
+        const [tracks, active] = trackItems(engine, 'text');
+        const items = [
+            [OFF, this.getAttribute('label-off') ?? 'Off'],
+            ...tracks,
+        ];
+        this.menu.fill([
+            {
+                name: 'track',
+                label: this.getAttribute('label-track') ?? 'Track',
+                items,
+                value: active ?? OFF,
+                onSelect: (value) => {
+                    if (value === OFF)
+                        engine.tracks.deselect('text');
+                    else
+                        engine.tracks.select(value);
+                    this.render();
+                },
+            },
+            {
+                name: 'settings',
+                label: this.getAttribute('label-settings') ?? 'Settings',
+                entries: [
+                    this.looks(player, SUBTITLE_SIZE, 'size', 'Size', SIZES, 'medium'),
+                    this.looks(player, SUBTITLE_BACKGROUND, 'background', 'Background', BACKGROUNDS, 'dark'),
+                ],
+            },
+        ]);
+        show(this.slots, active === null ? 'off' : 'on');
+        this.hidden = tracks.length === 0;
+    }
+}
+//# sourceMappingURL=subtitles-menu.js.map

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

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

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

@@ -0,0 +1,14 @@
+/**
+ * What the two time readouts share: the events they re-read the video on,
+ * and the live and seekable states of the player, which the seek bar sets.
+ * Each sits in the bar's seek row unless the page says otherwise.
+ */
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare abstract class TimeElement extends Component {
+    protected readonly text: Text;
+    constructor(extra?: string);
+    connectedCallback(): void;
+    protected attach(player: PlayerHost): void;
+}
+//# sourceMappingURL=time-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-element.d.ts","sourceRoot":"","sources":["../../src/elements/time-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAU3C,8BAAsB,WAAY,SAAQ,SAAS;IACjD,mBAA2B,IAAI,EAAE,IAAI,CAAC;gBAE1B,KAAK,SAAK;IAOb,iBAAiB,IAAI,IAAI;cAKf,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;CASpD"}

package/dist/elements/time-element.js

@@ -0,0 +1,29 @@
+import { Component } from './component.js';
+import { seekRow, style } from './shared.js';
+const STYLE = `
+:host { display: inline-block; min-width: 3ch; white-space: nowrap; font-variant-numeric: tabular-nums; }
+:host([hidden]) { display: none; }
+`;
+const EVENTS = ['timeupdate', 'durationchange', 'loadedmetadata', 'seeking', 'seeked', 'emptied'];
+export class TimeElement extends Component {
+    constructor(extra = '') {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this.text = document.createTextNode('0:00');
+        root.append(style(STYLE + extra), this.text);
+    }
+    connectedCallback() {
+        seekRow(this);
+        super.connectedCallback();
+    }
+    attach(player) {
+        const tick = () => {
+            this.render();
+        };
+        this.listen(player.video, EVENTS, tick);
+        this.listen(player, ['sourcechange'], tick);
+        this.observe(player, ['live', 'seekable'], tick);
+        this.render();
+    }
+}
+//# sourceMappingURL=time-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-element.js","sourceRoot":"","sources":["../../src/elements/time-element.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,KAAK,GAAG;;;CAGb,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAElG,MAAM,OAAgB,WAAY,SAAQ,SAAS;IAGjD,YAAY,KAAK,GAAG,EAAE;QACpB,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IAEQ,iBAAiB;QACxB,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAEkB,MAAM,CAAC,MAAkB;QAC1C,MAAM,IAAI,GAAG,GAAS,EAAE;YACtB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC;QACF,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;QACxC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,CAAC;QAC5C,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;CACF"}

package/dist/elements/volume-slider.d.ts

@@ -0,0 +1,10 @@
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxVolumeSlider extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly bar;
+    constructor();
+    protected attach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=volume-slider.d.ts.map

package/dist/elements/volume-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider.d.ts","sourceRoot":"","sources":["../../src/elements/volume-slider.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAM3C,qBAAa,eAAgB,SAAQ,SAAS;IAC5C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,GAAG,CAAS;;cAsBlB,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAOhC,MAAM,IAAI,IAAI;CAOlC"}

package/dist/elements/volume-slider.js

@@ -0,0 +1,46 @@
+import { slider } from '../controls/slider.js';
+import { Component } from './component.js';
+import { number, SLIDER_STYLE, style } from './shared.js';
+const STEP = 0.05;
+const PAGE = 0.2;
+export class MbxVolumeSlider extends Component {
+    static get observedAttributes() {
+        return ['label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this.bar = slider({
+            step: () => number(this, 'step', STEP),
+            page: () => number(this, 'page', PAGE),
+            onInput: (value) => {
+                const video = this.player?.video;
+                if (video === undefined)
+                    return;
+                video.volume = value;
+                if (value > 0)
+                    video.muted = false;
+            },
+            onDrag: (on) => {
+                this.toggleAttribute('dragging', on);
+            },
+        });
+        this.bar.range(0, 1);
+        root.append(style(`${SLIDER_STYLE}:host { width: 80px; flex: none; }`), this.bar.root);
+    }
+    attach(player) {
+        this.listen(player.video, ['volumechange', 'emptied'], () => {
+            this.render();
+        });
+        this.render();
+    }
+    render() {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        this.bar.label(this.getAttribute('label') ?? 'Volume');
+        const level = video.muted ? 0 : video.volume;
+        this.bar.set(level, `${Math.round(level * 100)}%`);
+    }
+}
+//# sourceMappingURL=volume-slider.js.map

package/dist/elements/volume-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider.js","sourceRoot":"","sources":["../../src/elements/volume-slider.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAE1D,MAAM,IAAI,GAAG,IAAI,CAAC;AAClB,MAAM,IAAI,GAAG,GAAG,CAAC;AAEjB,MAAM,OAAO,eAAgB,SAAQ,SAAS;IAC5C,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAID;QACE,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC;YAChB,IAAI,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC;YACtC,IAAI,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC;YACtC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;gBACjC,IAAI,KAAK,KAAK,SAAS;oBAAE,OAAO;gBAChC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;gBACrB,IAAI,KAAK,GAAG,CAAC;oBAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;YACrC,CAAC;YACD,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE;gBACb,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YACvC,CAAC;SACF,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACrB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,YAAY,oCAAoC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACzF,CAAC;IAEkB,MAAM,CAAC,MAAkB;QAC1C,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;YAC1D,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEkB,MAAM;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;QACjC,IAAI,KAAK,KAAK,SAAS;YAAE,OAAO;QAChC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,CAAC;QACvD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;QAC7C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;IACrD,CAAC;CACF"}

package/dist/elements/volume.d.ts

@@ -0,0 +1,9 @@
+import { Component } from './component.js';
+export declare class MbxVolume extends Component {
+    constructor();
+    /** Both parts, when the page wrote none: a constructor must not add children. */
+    connectedCallback(): void;
+    protected attach(): void;
+    protected detach(): void;
+}
+//# sourceMappingURL=volume.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"volume.d.ts","sourceRoot":"","sources":["../../src/elements/volume.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAa3C,qBAAa,SAAU,SAAQ,SAAS;;IAMtC,iFAAiF;IACxE,iBAAiB,IAAI,IAAI;cAOf,MAAM,IAAI,IAAI;cASd,MAAM,IAAI,IAAI;CAGlC"}

package/dist/elements/volume.js

@@ -0,0 +1,50 @@
+/**
+ * <mbx-volume>: the mute button with the slider unfolding from it under
+ * the pointer or keyboard focus, the way a bar keeps its width for the
+ * rest. The two are its children, in light DOM, so the page labels and
+ * styles each; a group left empty fills itself with both. The slider
+ * folds to nothing otherwise, and a page that wants it always out sets
+ * its width on `mbx-volume-slider` itself.
+ *
+ * Keyboard focus, not any focus: a click leaves focus on the mute button,
+ * and a slider that stayed out until something else took it would read as
+ * stuck. So the group carries `pointer` from a pointer press until a key
+ * is pressed or focus leaves, and focus unfolds the slider only without it.
+ */
+import { MUTE_BUTTON, VOLUME_SLIDER } from '../tags.js';
+import { Component } from './component.js';
+import { style } from './shared.js';
+const STYLE = `
+:host { display: inline-flex; align-items: center; }
+:host([hidden]) { display: none; }
+::slotted(mbx-volume-slider) { width: 0; opacity: 0; overflow: hidden; transition: width 0.2s ease, opacity 0.2s ease; }
+:host(:hover) ::slotted(mbx-volume-slider), :host(:focus-within:not([pointer])) ::slotted(mbx-volume-slider) { width: 80px; opacity: 1; }
+@media (prefers-reduced-motion: reduce) {
+  ::slotted(mbx-volume-slider) { transition: none; }
+}
+`;
+export class MbxVolume extends Component {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' }).append(style(STYLE), document.createElement('slot'));
+    }
+    /** Both parts, when the page wrote none: a constructor must not add children. */
+    connectedCallback() {
+        if (this.childElementCount === 0) {
+            this.append(document.createElement(MUTE_BUTTON), document.createElement(VOLUME_SLIDER));
+        }
+        super.connectedCallback();
+    }
+    attach() {
+        this.listen(this, ['pointerdown'], () => {
+            this.toggleAttribute('pointer', true);
+        });
+        this.listen(this, ['keydown', 'focusout'], () => {
+            this.removeAttribute('pointer');
+        });
+    }
+    detach() {
+        this.removeAttribute('pointer');
+    }
+}
+//# sourceMappingURL=volume.js.map

package/dist/elements/volume.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume.js","sourceRoot":"","sources":["../../src/elements/volume.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,KAAK,GAAG;;;;;;;;CAQb,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,SAAS;IACtC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3F,CAAC;IAED,iFAAiF;IACxE,iBAAiB;QACxB,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;QAC1F,CAAC;QACD,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAEkB,MAAM;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,aAAa,CAAC,EAAE,GAAG,EAAE;YACtC,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE;YAC9C,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC;CACF"}

package/dist/entries/audio-menu.d.ts

@@ -0,0 +1,5 @@
+/** `@mattebox/player/elements/audio-menu`: registers <mbx-audio-menu>, and the player with it. */
+import '../element-entry.js';
+import { MbxAudioMenu } from '../elements/audio-menu.js';
+export { MbxAudioMenu };
+//# sourceMappingURL=audio-menu.d.ts.map

package/dist/entries/audio-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-menu.d.ts","sourceRoot":"","sources":["../../src/entries/audio-menu.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAKzD,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/entries/audio-menu.js

@@ -0,0 +1,8 @@
+/** `@mattebox/player/elements/audio-menu`: registers <mbx-audio-menu>, and the player with it. */
+import '../element-entry.js';
+import { MbxAudioMenu } from '../elements/audio-menu.js';
+import { AUDIO_MENU } from '../tags.js';
+if (customElements.get(AUDIO_MENU) === undefined)
+    customElements.define(AUDIO_MENU, MbxAudioMenu);
+export { MbxAudioMenu };
+//# sourceMappingURL=audio-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"audio-menu.js","sourceRoot":"","sources":["../../src/entries/audio-menu.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,IAAI,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS;IAAE,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAElG,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,5 @@
+/** `@mattebox/player/elements/chapters-menu`: registers <mbx-chapters-menu>, and the player with it. */
+import '../element-entry.js';
+import { MbxChaptersMenu } from '../elements/chapters-menu.js';
+export { MbxChaptersMenu };
+//# sourceMappingURL=chapters-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chapters-menu.d.ts","sourceRoot":"","sources":["../../src/entries/chapters-menu.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAO/D,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/entries/chapters-menu.js

@@ -0,0 +1,9 @@
+/** `@mattebox/player/elements/chapters-menu`: registers <mbx-chapters-menu>, and the player with it. */
+import '../element-entry.js';
+import { MbxChaptersMenu } from '../elements/chapters-menu.js';
+import { CHAPTERS_MENU } from '../tags.js';
+if (customElements.get(CHAPTERS_MENU) === undefined) {
+    customElements.define(CHAPTERS_MENU, MbxChaptersMenu);
+}
+export { MbxChaptersMenu };
+//# sourceMappingURL=chapters-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chapters-menu.js","sourceRoot":"","sources":["../../src/entries/chapters-menu.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AACxD,CAAC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -0,0 +1,5 @@
+/** `@mattebox/player/elements/control-bar`: registers <mbx-control-bar>, and the player with it. */
+import '../element-entry.js';
+import { MbxControlBar } from '../elements/control-bar.js';
+export { MbxControlBar };
+//# sourceMappingURL=control-bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control-bar.d.ts","sourceRoot":"","sources":["../../src/entries/control-bar.ts"],"names":[],"mappings":"AAAA,oGAAoG;AACpG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAM3D,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/entries/control-bar.js

@@ -0,0 +1,8 @@
+/** `@mattebox/player/elements/control-bar`: registers <mbx-control-bar>, and the player with it. */
+import '../element-entry.js';
+import { MbxControlBar } from '../elements/control-bar.js';
+import { CONTROL_BAR } from '../tags.js';
+if (customElements.get(CONTROL_BAR) === undefined)
+    customElements.define(CONTROL_BAR, MbxControlBar);
+export { MbxControlBar };
+//# sourceMappingURL=control-bar.js.map