@mattebox/player 0.1.0 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"drm-badge.d.ts","sourceRoot":"","sources":["../../src/elements/drm-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAKH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAqC3C,qBAAa,WAAY,SAAQ,SAAS;IACxC,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,OAAO,CAAc;IAC9C,iBAAyB,MAAM,CAAc;IAC7C,iBAAyB,SAAS,CAAc;IAChD,iBAAyB,IAAI,CAAc;IAC3C,QAAgB,MAAM,CAAkB;;IA6BxC,mFAAmF;IAC1E,iBAAiB,IAAI,IAAI;IAOlC,qDAAqD;IACrD,OAAO,CAAC,YAAY;cAeD,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAmBhC,MAAM,IAAI,IAAI;cAId,MAAM,IAAI,IAAI;CAelC"}

package/dist/elements/drm-badge.js

@@ -0,0 +1,145 @@
+/**
+ * <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 { icon } from '../controls/icons.js';
+import { el } from '../dom.js';
+import { fill } from '../labels.js';
+import { namespaces } from '../namespaces.js';
+import { Component } from './component.js';
+import { style } from './shared.js';
+const STYLE = `
+:host { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--mbx-muted); border-radius: var(--mbx-radius); cursor: default; }
+:host([hidden]) { display: none; }
+:host(:focus-visible) { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
+[part~="tooltip"] {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 8px;
+  padding: 8px 10px;
+  background: rgba(16, 17, 20, 0.95);
+  border-radius: var(--mbx-radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  color: var(--mbx-text);
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: left;
+  white-space: nowrap;
+  pointer-events: none;
+}
+[part~="tooltip"][hidden] { display: none; }
+[part~="tooltip-title"] { font-weight: 600; }
+[part~="tooltip-text"] { color: var(--mbx-muted); }
+`;
+/** The name a viewer knows a key system by. */
+function keySystemName(id) {
+    if (id.startsWith('com.widevine'))
+        return 'Widevine';
+    if (id.startsWith('com.microsoft.playready'))
+        return 'PlayReady';
+    if (id.startsWith('com.apple.fps'))
+        return 'FairPlay';
+    return id;
+}
+export class MbxDrmBadge extends Component {
+    static get observedAttributes() {
+        return ['label', 'label-key', 'label-keys', 'label-no-key'];
+    }
+    constructor() {
+        super();
+        this.engine = null;
+        const root = this.attachShadow({ mode: 'open' });
+        const slot = document.createElement('slot');
+        slot.name = 'icon';
+        slot.append(icon('lock-closed'));
+        this.tooltip = el('div', 'tooltip');
+        this.tooltip.setAttribute('role', 'tooltip');
+        this.system = el('div', 'tooltip-title');
+        this.system_id = el('div', 'tooltip-text');
+        this.keys = el('div', 'tooltip-text');
+        this.tooltip.append(this.system, this.system_id, this.keys);
+        this.tooltip.hidden = true;
+        root.append(style(STYLE), slot, this.tooltip);
+        const show = () => {
+            this.tooltip.hidden = false;
+        };
+        const hide = () => {
+            this.tooltip.hidden = true;
+        };
+        this.addEventListener('pointerenter', show);
+        this.addEventListener('pointerleave', hide);
+        this.addEventListener('focus', show);
+        this.addEventListener('blur', hide);
+    }
+    /** Named and focusable before attaching: a constructor must not add attributes. */
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'img');
+        if (!this.hasAttribute('tabindex'))
+            this.tabIndex = 0;
+        if (this.player === null)
+            this.hidden = true;
+        super.connectedCallback();
+    }
+    /** "3 keys: usable ×2, expired", or "no key yet". */
+    sessionsText(sessions) {
+        if (sessions.length === 0)
+            return this.getAttribute('label-no-key') ?? 'no key yet';
+        const counts = new Map();
+        for (const session of sessions) {
+            counts.set(session.status, (counts.get(session.status) ?? 0) + 1);
+        }
+        const parts = [];
+        for (const [status, count] of counts)
+            parts.push(count > 1 ? `${status} ×${count}` : status);
+        const template = sessions.length === 1
+            ? (this.getAttribute('label-key') ?? '{count} key: {statuses}')
+            : (this.getAttribute('label-keys') ?? '{count} keys: {statuses}');
+        return fill(template, { count: sessions.length, statuses: parts.join(', ') });
+    }
+    attach(player) {
+        this.follow(player, (engine) => {
+            this.engine = engine;
+            this.render();
+            if (engine === null || namespaces(engine).drm === undefined)
+                return undefined;
+            const tick = () => {
+                this.render();
+            };
+            const offs = [
+                engine.on('drm:keysystem', tick),
+                engine.on('drm:keystatus', tick),
+                engine.on('drm:encrypted', tick),
+            ];
+            return () => {
+                for (const off of offs)
+                    off();
+            };
+        });
+    }
+    detach() {
+        this.tooltip.hidden = true;
+    }
+    render() {
+        const drm = this.engine === null ? undefined : namespaces(this.engine).drm;
+        const name = drm?.keySystem ?? null;
+        this.hidden = name === null;
+        if (drm === undefined || name === null)
+            return;
+        const keys = this.sessionsText(drm.sessions);
+        const system = keySystemName(name);
+        this.system.textContent = system;
+        this.system_id.textContent = name;
+        this.keys.textContent = keys;
+        this.setAttribute('aria-label', fill(this.getAttribute('label') ?? 'Protected by {system}, {keys}', { system, keys }));
+    }
+}
+//# sourceMappingURL=drm-badge.js.map

package/dist/elements/drm-badge.js.map

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

package/dist/elements/duration.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"duration.d.ts","sourceRoot":"","sources":["../../src/elements/duration.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,qBAAa,WAAY,SAAQ,WAAW;;cAKvB,MAAM,IAAI,IAAI;CAQlC"}

package/dist/elements/duration.js

@@ -0,0 +1,23 @@
+/**
+ * <mbx-duration>: the duration, "4:56", once the metadata is in. A live
+ * stream has none, so the element hides while the stream is live.
+ */
+import { live, span } from '../controls/session.js';
+import { format } from '../controls/time.js';
+import { TimeElement } from './time-element.js';
+export class MbxDuration extends TimeElement {
+    constructor() {
+        super(':host { text-align: right; }');
+    }
+    render() {
+        const player = this.player;
+        if (player === null)
+            return;
+        const engine = player.engine;
+        const on = live(engine) !== undefined;
+        this.hidden = on;
+        if (!on)
+            this.text.data = format(span(player.video, engine).end);
+    }
+}
+//# sourceMappingURL=duration.js.map

package/dist/elements/duration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"duration.js","sourceRoot":"","sources":["../../src/elements/duration.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAO,WAAY,SAAQ,WAAW;IAC1C;QACE,KAAK,CAAC,8BAA8B,CAAC,CAAC;IACxC,CAAC;IAEkB,MAAM;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,MAAM,KAAK,IAAI;YAAE,OAAO;QAC5B,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAC7B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;QACtC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,EAAE;YAAE,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;IACnE,CAAC;CACF"}

package/dist/elements/error-screen.d.ts

@@ -0,0 +1,17 @@
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxErrorScreen extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly title_;
+    private readonly category;
+    private readonly code;
+    private readonly retry;
+    constructor();
+    /** Hidden and named before attaching: a constructor must not add attributes. */
+    connectedCallback(): void;
+    private show;
+    protected attach(player: PlayerHost): void;
+    protected detach(): void;
+    protected render(): void;
+}
+//# sourceMappingURL=error-screen.d.ts.map

package/dist/elements/error-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-screen.d.ts","sourceRoot":"","sources":["../../src/elements/error-screen.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAkC3C,qBAAa,cAAe,SAAQ,SAAS;IAC3C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAc;IAC7C,iBAAyB,QAAQ,CAAc;IAC/C,iBAAyB,IAAI,CAAc;IAC3C,iBAAyB,KAAK,CAAoB;;IAwBlD,gFAAgF;IACvE,iBAAiB,IAAI,IAAI;IAMlC,OAAO,CAAC,IAAI;cAMO,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAsBhC,MAAM,IAAI,IAAI;cAId,MAAM,IAAI,IAAI;CAIlC"}

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"}