@mattebox/player 0.1.0 → 0.3.0

package/dist/elements/error-screen.js

@@ -0,0 +1,103 @@
+import { el } from '../dom.js';
+import { Component } from './component.js';
+import { style } from './shared.js';
+const STYLE = `
+:host {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.75);
+  color: var(--mbx-text);
+  font: 400 15px/1.4 var(--mbx-font);
+  text-align: center;
+}
+:host([hidden]) { display: none; }
+[part~="box"] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+[part~="title"] { font-size: 18px; font-weight: 600; }
+[part~="detail"] { font-family: monospace; font-size: 13px; color: var(--mbx-error); }
+[part~="retry"] {
+  height: 36px;
+  padding: 0 16px;
+  font: inherit;
+  font-weight: 600;
+  color: inherit;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+}
+[part~="retry"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+`;
+export class MbxErrorScreen extends Component {
+    static get observedAttributes() {
+        return ['label-title', 'label-retry'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const box = el('div', 'box');
+        this.title_ = el('div', 'title');
+        this.category = el('span', 'category');
+        this.code = el('span', 'code');
+        const detail = el('div', 'detail');
+        detail.append(this.category, el('span', 'separator', ' · '), this.code);
+        this.retry = el('button', 'retry');
+        this.retry.type = 'button';
+        this.retry.addEventListener('click', () => {
+            const player = this.player;
+            const src = player?.getAttribute('src');
+            if (player !== null && player !== undefined && src !== null && src !== undefined) {
+                player.setAttribute('src', src);
+            }
+        });
+        box.append(this.title_, detail, this.retry);
+        root.append(style(STYLE), box);
+    }
+    /** Hidden and named before attaching: a constructor must not add attributes. */
+    connectedCallback() {
+        if (this.player === null)
+            this.hidden = true;
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'alert');
+        super.connectedCallback();
+    }
+    show(error) {
+        this.category.textContent = error.category;
+        this.code.textContent = error.code;
+        this.hidden = false;
+    }
+    attach(player) {
+        const failure = (event) => {
+            const error = event.detail;
+            if (error.fatal)
+                this.show(error);
+        };
+        player.addEventListener('error', failure);
+        this.keep(() => {
+            player.removeEventListener('error', failure);
+        });
+        // Not `emptied`: the old session's teardown fires it after the new
+        // source's error, and would hide the error it should leave.
+        this.listen(player.video, ['playing', 'loadstart'], () => {
+            this.hidden = true;
+        });
+        this.listen(player, ['sourcechange'], () => {
+            this.hidden = true;
+        });
+        // The error may have come before this element did.
+        if (player.error !== null)
+            this.show(player.error);
+        this.render();
+    }
+    detach() {
+        this.hidden = true;
+    }
+    render() {
+        this.title_.textContent = this.getAttribute('label-title') ?? 'Playback failed';
+        this.retry.textContent = this.getAttribute('label-retry') ?? 'Retry';
+    }
+}
+//# sourceMappingURL=error-screen.js.map

package/dist/elements/error-screen.js.map

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

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

@@ -0,0 +1,19 @@
+/**
+ * <mbx-fullscreen-button>: fullscreen on the player, through whichever
+ * API the browser has, and hidden where there is none. The glyph is
+ * `icon-enter` or `icon-exit`, the name `label-enter` or `label-exit`,
+ * and the element sets `fullscreen` on the player while it is in.
+ */
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxFullscreenButton extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly button;
+    private readonly slots;
+    private api;
+    constructor();
+    protected attach(player: PlayerHost): void;
+    protected detach(): void;
+    protected render(): void;
+}
+//# sourceMappingURL=fullscreen-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-button.d.ts","sourceRoot":"","sources":["../../src/elements/fullscreen-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAM3C,qBAAa,mBAAoB,SAAQ,SAAS;IAChD,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAoB;IACnD,iBAAyB,KAAK,CAAiC;IAC/D,QAAgB,GAAG,CAAoB;;cAmBpB,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAYhC,MAAM,IAAI,IAAI;cAId,MAAM,IAAI,IAAI;CAalC"}

package/dist/elements/fullscreen-button.js

@@ -0,0 +1,55 @@
+/**
+ * <mbx-fullscreen-button>: fullscreen on the player, through whichever
+ * API the browser has, and hidden where there is none. The glyph is
+ * `icon-enter` or `icon-exit`, the name `label-enter` or `label-exit`,
+ * and the element sets `fullscreen` on the player while it is in.
+ */
+import { fullscreen } from '../controls/fullscreen.js';
+import { icon } from '../controls/icons.js';
+import { Component } from './component.js';
+import { BUTTON_STYLE, iconSlots, show, style } from './shared.js';
+const STATES = ['enter', 'exit'];
+export class MbxFullscreenButton extends Component {
+    static get observedAttributes() {
+        return ['label-enter', 'label-exit'];
+    }
+    constructor() {
+        super();
+        this.api = null;
+        const root = this.attachShadow({ mode: 'open' });
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.setAttribute('part', 'button');
+        this.slots = iconSlots(STATES, (state) => icon(state === 'enter' ? 'fullscreen' : 'fullscreen-exit'));
+        for (const state of STATES)
+            this.button.append(this.slots[state]);
+        this.button.addEventListener('click', () => {
+            this.api?.toggle();
+        });
+        root.append(style(BUTTON_STYLE), this.button);
+    }
+    attach(player) {
+        const api = fullscreen(player, player.video);
+        this.api = api;
+        this.hidden = !api.supported;
+        this.keep(api.watch(() => {
+            this.render();
+        }));
+        this.render();
+    }
+    detach() {
+        this.api = null;
+    }
+    render() {
+        const player = this.player;
+        if (player === null || this.api === null)
+            return;
+        const active = this.api.active();
+        show(this.slots, active ? 'exit' : 'enter');
+        this.button.setAttribute('aria-label', active
+            ? (this.getAttribute('label-exit') ?? 'Exit fullscreen')
+            : (this.getAttribute('label-enter') ?? 'Enter fullscreen'));
+        player.toggleAttribute('fullscreen', active);
+    }
+}
+//# sourceMappingURL=fullscreen-button.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"live-button.d.ts","sourceRoot":"","sources":["../../src/elements/live-button.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiC3C,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAoB;IACnD,iBAAyB,IAAI,CAAc;;IAelC,iBAAiB,IAAI,IAAI;cAKf,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAUhC,MAAM,IAAI,IAAI;CAoBlC"}

package/dist/elements/live-button.js

@@ -0,0 +1,96 @@
+/**
+ * <mbx-live-button>: a dot and the word, the dot red at the edge and grey
+ * behind it, the way viewers read it everywhere. Shown once the stream has
+ * an availability window, which is what makes it live; disabled at the
+ * edge, where there is nowhere to go; a click seeks to the edge, the one
+ * engine write the row makes. The element carries `at-edge` meanwhile.
+ *
+ * Without a seek bar, when the player says the stream is not seekable,
+ * there is nowhere to come back from either: the dot stays red and the
+ * button stays inert, whatever the playhead does. The word comes from
+ * `text`, the name from `label-live` and `label-at-edge`. It sits in the
+ * bar's seek row unless the page says otherwise.
+ */
+import { live } from '../controls/session.js';
+import { el } from '../dom.js';
+import { Component } from './component.js';
+import { seekRow, style } from './shared.js';
+const STYLE = `
+:host { display: inline-flex; }
+:host([hidden]) { display: none; }
+[part~="button"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 8px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  opacity: 0.9;
+}
+[part~="button"]:hover { opacity: 1; }
+[part~="button"]:disabled { cursor: default; opacity: 1; }
+[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="dot"] { width: 10px; height: 10px; border-radius: 50%; background: var(--mbx-muted); transition: background 0.2s; }
+:host([at-edge]) [part~="dot"] { background: var(--mbx-live); box-shadow: 0 0 6px var(--mbx-live); }
+@media (prefers-reduced-motion: reduce) {
+  [part~="dot"] { transition: none; }
+}
+`;
+export class MbxLiveButton extends Component {
+    static get observedAttributes() {
+        return ['text', 'label-live', 'label-at-edge'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this.button = el('button', 'button');
+        this.button.type = 'button';
+        this.text = el('span', 'text');
+        this.button.append(el('span', 'dot'), this.text);
+        this.button.addEventListener('click', () => {
+            live(this.player?.engine ?? null)?.seekToEdge();
+        });
+        root.append(style(STYLE), this.button);
+    }
+    connectedCallback() {
+        seekRow(this);
+        super.connectedCallback();
+    }
+    attach(player) {
+        const tick = () => {
+            this.render();
+        };
+        this.listen(player.video, ['timeupdate', 'emptied'], tick);
+        this.listen(player, ['sourcechange'], tick);
+        this.observe(player, ['live', 'seekable'], tick);
+        this.render();
+    }
+    render() {
+        const player = this.player;
+        if (player === null)
+            return;
+        const api = live(player.engine);
+        this.hidden = api === undefined;
+        this.text.textContent = this.getAttribute('text') ?? 'LIVE';
+        if (api === undefined)
+            return;
+        // The seek bar decides seekability; while the player says live and not
+        // seekable there is no bar to come back from.
+        const stuck = player.hasAttribute('live') && !player.hasAttribute('seekable');
+        const atEdge = stuck || api.atEdge;
+        this.button.disabled = atEdge;
+        this.toggleAttribute('at-edge', atEdge);
+        this.button.setAttribute('aria-label', atEdge
+            ? (this.getAttribute('label-at-edge') ?? 'At the live edge')
+            : (this.getAttribute('label-live') ?? 'Go to the live edge'));
+    }
+}
+//# sourceMappingURL=live-button.js.map

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

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

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

@@ -0,0 +1,22 @@
+/**
+ * What the menus share: the primitive in the shadow root, the glyph slots
+ * on its button, the name from `label`, the Back item's name from
+ * `label-back`, and the popup fitted under the top of the picture. A
+ * subclass fills the entries in `render()`, which runs on attach, on every
+ * observed attribute, and whenever it asks.
+ */
+import type { IconName } from '../controls/icons.js';
+import type { Menu } from '../controls/menu.js';
+import { Component } from './component.js';
+export declare abstract class MenuElement<S extends string = 'default'> extends Component {
+    protected readonly menu: Menu;
+    protected readonly slots: Record<S, HTMLSlotElement>;
+    constructor(states: readonly S[], glyphs: (state: S) => SVGSVGElement);
+    /** The default name of the button. */
+    protected abstract name(): string;
+    protected detach(): void;
+    protected render(): void;
+}
+/** A glyph that never changes, for a menu of one state. */
+export declare function single(name: IconName): [readonly ['default'], () => SVGSVGElement];
+//# sourceMappingURL=menu-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-element.d.ts","sourceRoot":"","sources":["../../src/elements/menu-element.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,8BAAsB,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC/E,mBAA2B,IAAI,EAAE,IAAI,CAAC;IACtC,mBAA2B,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;gBAEjD,MAAM,EAAE,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,aAAa;IAarE,sCAAsC;IACtC,SAAS,CAAC,QAAQ,CAAC,IAAI,IAAI,MAAM;cAEd,MAAM,IAAI,IAAI;cAId,MAAM,IAAI,IAAI;CAGlC;AAED,2DAA2D;AAC3D,wBAAgB,MAAM,CAAC,IAAI,EAAE,QAAQ,GAAG,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,MAAM,aAAa,CAAC,CAElF"}

package/dist/elements/menu-element.js

@@ -0,0 +1,31 @@
+import { icon } from '../controls/icons.js';
+import { menu } from '../controls/menu.js';
+import { fill } from '../labels.js';
+import { Component } from './component.js';
+import { iconSlots, MENU_STYLE, style } from './shared.js';
+export class MenuElement extends Component {
+    constructor(states, glyphs) {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this.menu = menu({
+            host: this,
+            ceiling: () => this.player?.video.getBoundingClientRect().top ?? null,
+            back: (page) => fill(this.getAttribute('label-back') ?? 'Back from {page}', { page }),
+        });
+        this.slots = iconSlots(states, glyphs);
+        for (const state of states)
+            this.menu.button.append(this.slots[state]);
+        root.append(style(MENU_STYLE), this.menu.button, this.menu.popup);
+    }
+    detach() {
+        this.menu.close();
+    }
+    render() {
+        this.menu.label(this.getAttribute('label') ?? this.name());
+    }
+}
+/** A glyph that never changes, for a menu of one state. */
+export function single(name) {
+    return [['default'], () => icon(name)];
+}
+//# sourceMappingURL=menu-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-element.js","sourceRoot":"","sources":["../../src/elements/menu-element.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,OAAgB,WAA0C,SAAQ,SAAS;IAI/E,YAAY,MAAoB,EAAE,MAAmC;QACnE,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACf,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,qBAAqB,EAAE,CAAC,GAAG,IAAI,IAAI;YACrE,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,kBAAkB,EAAE,EAAE,IAAI,EAAE,CAAC;SACtF,CAAC,CAAC;QACH,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACvC,KAAK,MAAM,KAAK,IAAI,MAAM;YAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QACvE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC;IAKkB,MAAM;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IACpB,CAAC;IAEkB,MAAM;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7D,CAAC;CACF;AAED,2DAA2D;AAC3D,MAAM,UAAU,MAAM,CAAC,IAAc;IACnC,OAAO,CAAC,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACzC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"mute-button.d.ts","sourceRoot":"","sources":["../../src/elements/mute-button.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAM3C,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAoB;IACnD,iBAAyB,KAAK,CAAiC;;IAkB/D,OAAO,CAAC,MAAM;cAWK,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAOhC,MAAM,IAAI,IAAI;CAalC"}

package/dist/elements/mute-button.js

@@ -0,0 +1,61 @@
+/**
+ * <mbx-mute-button>: mute and unmute, with the level drawn in the glyph:
+ * `icon-mute` while muted or at zero, `icon-low` up to half, `icon-high`
+ * above. Unmuting at zero volume would change nothing the viewer can
+ * hear, so it brings the volume up too. The name comes from `label-mute`
+ * and `label-unmute`, and `aria-pressed` says which state it is in.
+ */
+import { icon } from '../controls/icons.js';
+import { Component } from './component.js';
+import { BUTTON_STYLE, iconSlots, show, style } from './shared.js';
+const LEVELS = ['mute', 'low', 'high'];
+export class MbxMuteButton extends Component {
+    static get observedAttributes() {
+        return ['label-mute', 'label-unmute'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.setAttribute('part', 'button');
+        this.slots = iconSlots(LEVELS, (level) => icon(level === 'mute' ? 'mute' : level === 'low' ? 'volume-low' : 'volume-high'));
+        for (const level of LEVELS)
+            this.button.append(this.slots[level]);
+        this.button.addEventListener('click', () => {
+            this.toggle();
+        });
+        root.append(style(BUTTON_STYLE), this.button);
+    }
+    toggle() {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        if (video.muted) {
+            video.muted = false;
+            if (video.volume === 0)
+                video.volume = 1;
+        }
+        else {
+            video.muted = true;
+        }
+    }
+    attach(player) {
+        this.listen(player.video, ['volumechange', 'emptied'], () => {
+            this.render();
+        });
+        this.render();
+    }
+    render() {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        const silent = video.muted || video.volume === 0;
+        show(this.slots, silent ? 'mute' : video.volume <= 0.5 ? 'low' : 'high');
+        this.button.setAttribute('aria-label', silent
+            ? (this.getAttribute('label-unmute') ?? 'Unmute')
+            : (this.getAttribute('label-mute') ?? 'Mute'));
+        this.button.setAttribute('aria-pressed', String(video.muted));
+    }
+}
+//# sourceMappingURL=mute-button.js.map

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

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

package/dist/elements/panels.d.ts

@@ -0,0 +1,15 @@
+/**
+ * <mbx-panels>: the row under the video for what native controls cannot
+ * show. It sits in the player beside the video, in flow, so it lands
+ * under the picture, and lays its children out in a row: the quality,
+ * audio and subtitles menus, the live button, the lock. Each child hides
+ * itself when its session has nothing for it, and the row hides when
+ * every child has, so a native session shows no strip at all.
+ */
+import { Component } from './component.js';
+export declare class MbxPanels extends Component {
+    constructor();
+    private empty;
+    protected attach(): void;
+}
+//# sourceMappingURL=panels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../src/elements/panels.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiB3C,qBAAa,SAAU,SAAQ,SAAS;;IAOtC,OAAO,CAAC,KAAK;cAIM,MAAM,IAAI,IAAI;CAoBlC"}

package/dist/elements/panels.js

@@ -0,0 +1,55 @@
+/**
+ * <mbx-panels>: the row under the video for what native controls cannot
+ * show. It sits in the player beside the video, in flow, so it lands
+ * under the picture, and lays its children out in a row: the quality,
+ * audio and subtitles menus, the live button, the lock. Each child hides
+ * itself when its session has nothing for it, and the row hides when
+ * every child has, so a native session shows no strip at all.
+ */
+import { Component } from './component.js';
+import { style } from './shared.js';
+const STYLE = `
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--mbx-gap);
+  padding: var(--mbx-pad);
+  background: var(--mbx-surface);
+  color: var(--mbx-text);
+  font: 400 13px/1.4 var(--mbx-font);
+}
+:host([hidden]) { display: none; }
+`;
+export class MbxPanels extends Component {
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        root.append(style(STYLE), document.createElement('slot'));
+    }
+    empty() {
+        return ![...this.children].some((child) => !child.hidden);
+    }
+    attach() {
+        const tick = () => {
+            const empty = this.empty();
+            // Only on a change: the observer sees the row's own attribute too, and
+            // a write it did not need would wake it again without end.
+            if (this.hidden !== empty)
+                this.hidden = empty;
+        };
+        // The children say `hidden` on themselves; the row follows the last of them.
+        const observer = new MutationObserver(tick);
+        observer.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['hidden'],
+        });
+        this.keep(() => {
+            observer.disconnect();
+        });
+        tick();
+    }
+}
+//# sourceMappingURL=panels.js.map

package/dist/elements/panels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panels.js","sourceRoot":"","sources":["../../src/elements/panels.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,KAAK,GAAG;;;;;;;;;;;;CAYb,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,SAAS;IACtC;QACE,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEO,KAAK;QACX,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAE,KAAqB,CAAC,MAAM,CAAC,CAAC;IAC7E,CAAC;IAEkB,MAAM;QACvB,MAAM,IAAI,GAAG,GAAS,EAAE;YACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAC3B,uEAAuE;YACvE,2DAA2D;YAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK;gBAAE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACjD,CAAC,CAAC;QACF,6EAA6E;QAC7E,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,QAAQ,CAAC;SAC5B,CAAC,CAAC;QACH,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACb,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,IAAI,EAAE,CAAC;IACT,CAAC;CACF"}

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

@@ -0,0 +1,13 @@
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxPipButton extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly button;
+    private readonly slots;
+    private api;
+    constructor();
+    protected attach(player: PlayerHost): void;
+    protected detach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=pip-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pip-button.d.ts","sourceRoot":"","sources":["../../src/elements/pip-button.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAM3C,qBAAa,YAAa,SAAQ,SAAS;IACzC,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAoB;IACnD,iBAAyB,KAAK,CAAiC;IAC/D,QAAgB,GAAG,CAA0B;;cAmB1B,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAYhC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAKhC,MAAM,IAAI,IAAI;CAalC"}

package/dist/elements/pip-button.js

@@ -0,0 +1,56 @@
+/**
+ * <mbx-pip-button>: picture in picture, through whichever API the browser
+ * has, and hidden where there is none. The glyph is `icon-enter` or
+ * `icon-exit`, the name `label-enter` or `label-exit`, and the element
+ * sets `pip` on the player while the video is in the floating window.
+ */
+import { icon } from '../controls/icons.js';
+import { pictureInPicture } from '../controls/pip.js';
+import { Component } from './component.js';
+import { BUTTON_STYLE, iconSlots, show, style } from './shared.js';
+const STATES = ['enter', 'exit'];
+export class MbxPipButton extends Component {
+    static get observedAttributes() {
+        return ['label-enter', 'label-exit'];
+    }
+    constructor() {
+        super();
+        this.api = null;
+        const root = this.attachShadow({ mode: 'open' });
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.setAttribute('part', 'button');
+        this.slots = iconSlots(STATES, (state) => icon(state === 'enter' ? 'picture-in-picture' : 'picture-in-picture-exit'));
+        for (const state of STATES)
+            this.button.append(this.slots[state]);
+        this.button.addEventListener('click', () => {
+            this.api?.toggle();
+        });
+        root.append(style(BUTTON_STYLE), this.button);
+    }
+    attach(player) {
+        const api = pictureInPicture(player.video);
+        this.api = api;
+        this.hidden = !api.supported;
+        this.keep(api.watch(() => {
+            this.render();
+        }));
+        this.render();
+    }
+    detach(player) {
+        this.api = null;
+        player.removeAttribute('pip');
+    }
+    render() {
+        const player = this.player;
+        if (player === null || this.api === null)
+            return;
+        const active = this.api.active();
+        show(this.slots, active ? 'exit' : 'enter');
+        this.button.setAttribute('aria-label', active
+            ? (this.getAttribute('label-exit') ?? 'Leave picture in picture')
+            : (this.getAttribute('label-enter') ?? 'Picture in picture'));
+        player.toggleAttribute('pip', active);
+    }
+}
+//# sourceMappingURL=pip-button.js.map

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

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

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

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