@mattebox/player 0.1.0 → 0.3.0

package/dist/elements/control-bar.js

@@ -0,0 +1,339 @@
+/**
+ * <mbx-control-bar>: an overlay over the bottom of the video that lays its
+ * children out in two rows, the seek row over the buttons row. A child
+ * with `slot="seek"` sits in the seek row; everything else in the buttons
+ * row, in its order, and an <mbx-spacer> pushes what follows to the right.
+ *
+ * The bar owns what no one control can: the idle fade, the shortcuts, the
+ * click on the video, and the subtitles lifted above it. It sets `idle` on
+ * itself and on the player while it hides.
+ *
+ * The fade is one timer. Any activity, a pointer moving or pressing, a
+ * key, playback starting, re-arms it for `idle-ms`, and when it fires the
+ * bar hides unless something it can know for certain holds it: the video
+ * is paused, a descendant carries `open`, or keyboard focus is inside it,
+ * where keyboard means the last input was a key and not a pointer.
+ * Whether the pointer is over the player is never tracked: that goes
+ * stale when the pointer leaves without a move the player sees.
+ *
+ * The shortcuts listen on the player, so they hear every key pressed
+ * inside it, and only there: Space and `k` toggle play, `m` mutes, `f`
+ * toggles fullscreen, the arrows seek by `seek-step`. Space is left to a
+ * focused button, which is its own. A click on the video toggles play.
+ * Fullscreen goes on the player itself, so the bar comes along.
+ *
+ * A narrow bar collapses the buttons row by `priority`: each child carries
+ * a number, its own attribute or the default for its tag, and the bar
+ * marks the highest numbers `collapsed` one at a time until the row fits
+ * with a little slack, from the right among equals. Zero, the default for
+ * anything unlisted, never collapses: play and fullscreen stay whatever
+ * the width. The mark is an attribute and the hiding is one `::slotted`
+ * rule here, so a page styles or overrides it by the tag. The volume's
+ * slider is a candidate of its own, and counts at its unfolded width, so
+ * the row is sized for what the pointer will make of it.
+ */
+import { cueLift, cueStyle } from '../controls/cues.js';
+import { fullscreen } from '../controls/fullscreen.js';
+import { AUDIO_MENU, CHAPTERS_MENU, DRM_BADGE, MUTE_BUTTON, PIP_BUTTON, QUALITY_MENU, SKIP_BUTTON, SPACER, SPEED_MENU, SUBTITLES_MENU, VOLUME, VOLUME_SLIDER, } from '../tags.js';
+import { Component } from './component.js';
+import { number, style } from './shared.js';
+const IDLE_MS = 3000;
+const SEEK_STEP = 5;
+/**
+ * What goes first when the row is too narrow, by tag: the slider, which
+ * takes the most room for the least; then the diagnostics, the lock and
+ * the menus a viewer rarely opens; then the menus for the picture and the
+ * sound; then the skips; then the mute and the subtitles. The subtitles
+ * menu goes last of the menus because it is the one a viewer may need.
+ * The diagnostics is another package's, named here as a string. A
+ * `priority` attribute on the control replaces its default.
+ */
+const PRIORITY = {
+    [VOLUME_SLIDER]: 5,
+    'mbx-diagnostics': 4,
+    [DRM_BADGE]: 4,
+    [SPEED_MENU]: 4,
+    [CHAPTERS_MENU]: 4,
+    [AUDIO_MENU]: 3,
+    [QUALITY_MENU]: 3,
+    [PIP_BUTTON]: 3,
+    [SKIP_BUTTON]: 2,
+    [SUBTITLES_MENU]: 1,
+    [VOLUME]: 1,
+    [MUTE_BUTTON]: 1,
+};
+/** The width the volume group unfolds its slider to, from volume.ts: what a folded slider is counted at. */
+const SLIDER_WIDTH = 80;
+/** Room kept between the last button and the edge, so nothing sits flush against it. */
+const SLACK = 8;
+function shown(node) {
+    return node.getClientRects().length > 0;
+}
+/** The slider inside a volume group child, when it has one. */
+function slider(child) {
+    return child.localName === VOLUME ? child.querySelector(VOLUME_SLIDER) : null;
+}
+/** A child's priority: its attribute, else its tag's default, else zero. */
+function priority(child) {
+    const own = child.getAttribute('priority');
+    if (own !== null) {
+        const value = Number(own);
+        return Number.isFinite(value) && value > 0 ? value : 0;
+    }
+    return PRIORITY[child.localName] ?? 0;
+}
+const STYLE = `
+:host {
+  position: absolute;
+  inset: auto 0 0 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 40px 16px 12px;
+  color: var(--mbx-text);
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+  font: 500 16px/1.2 var(--mbx-font);
+  transition: opacity 0.2s;
+}
+:host([idle]) { opacity: 0; pointer-events: none; }
+[part~="row"] { display: flex; align-items: center; gap: 8px; }
+[part~="seek-row"] { gap: 16px; }
+::slotted([collapsed]) { display: none; }
+@media (prefers-reduced-motion: reduce) {
+  :host { transition: none; }
+}
+`;
+function end(video) {
+    if (Number.isFinite(video.duration))
+        return video.duration;
+    const ranges = video.seekable;
+    return ranges.length > 0 ? ranges.end(ranges.length - 1) : video.currentTime;
+}
+function toggle(video) {
+    if (video.paused)
+        video.play().catch(() => undefined);
+    else
+        video.pause();
+}
+export class MbxControlBar extends Component {
+    static get observedAttributes() {
+        return ['idle-ms', 'seek-step'];
+    }
+    constructor() {
+        super();
+        this.timer = undefined;
+        this.keyboard = false;
+        this.cues = null;
+        this.screen = null;
+        this.resizer = null;
+        const root = this.attachShadow({ mode: 'open' });
+        this.seekRow = document.createElement('div');
+        this.seekRow.setAttribute('part', 'row seek-row');
+        const seek = document.createElement('slot');
+        seek.name = 'seek';
+        this.seekRow.append(seek);
+        this.buttonsRow = document.createElement('div');
+        this.buttonsRow.setAttribute('part', 'row buttons-row');
+        this.buttons = document.createElement('slot');
+        this.buttonsRow.append(this.buttons);
+        root.append(style(STYLE), this.seekRow, this.buttonsRow);
+    }
+    /**
+     * What the buttons need: their widths and the gaps between them, the
+     * spacer aside since it takes what is left, and a folded slider at the
+     * width it unfolds to. The row's own width says nothing, because the
+     * spacer fills it whatever the buttons take.
+     */
+    needed(children) {
+        const gap = Number.parseFloat(getComputedStyle(this.buttonsRow).columnGap) || 0;
+        let sum = 0;
+        let count = 0;
+        for (const child of children) {
+            if (child.localName === SPACER || !shown(child))
+                continue;
+            sum += child.getBoundingClientRect().width;
+            count += 1;
+            const folded = slider(child);
+            if (folded !== null && shown(folded)) {
+                sum += Math.max(0, SLIDER_WIDTH - folded.getBoundingClientRect().width);
+            }
+        }
+        return sum + gap * Math.max(0, count - 1);
+    }
+    /**
+     * Collapses the buttons row to its width. Everything is shown first, so
+     * a wider bar gets its controls back, then the highest priorities go one
+     * at a time while the buttons need more than the row has, less the
+     * slack. Each step lays the row out again; a bar carries a dozen
+     * controls, so that is cheap.
+     */
+    collapse() {
+        const children = this.buttons.assignedElements();
+        const candidates = [];
+        for (const [index, child] of children.entries()) {
+            child.removeAttribute('collapsed');
+            const inner = slider(child);
+            inner?.removeAttribute('collapsed');
+            // A nested slider goes before its group, so it sorts as if it sat
+            // after it. What is not shown, by its own `hidden` or a page's rule,
+            // takes no room, so marking it would hide nothing and say something
+            // false.
+            if (inner !== null && shown(inner)) {
+                candidates.push({ node: inner, index: index + 0.5, priority: priority(inner) });
+            }
+            if (shown(child))
+                candidates.push({ node: child, index, priority: priority(child) });
+        }
+        candidates.sort((a, b) => b.priority - a.priority || b.index - a.index);
+        const room = this.buttonsRow.clientWidth - SLACK;
+        for (const { node, priority: level } of candidates) {
+            if (level === 0)
+                return;
+            if (this.needed(children) <= room)
+                return;
+            node.setAttribute('collapsed', '');
+        }
+    }
+    /** From the first row's top to the bar's bottom: what the bar covers of the picture. */
+    covered() {
+        return {
+            top: this.seekRow.getBoundingClientRect().top,
+            bottom: this.getBoundingClientRect().bottom,
+        };
+    }
+    held(player) {
+        if (player.video.paused)
+            return true;
+        if (this.querySelector('[open]') !== null)
+            return true;
+        if (!this.keyboard)
+            return false;
+        const active = this.getRootNode().activeElement;
+        return active !== null && this.contains(active);
+    }
+    idle(player, on) {
+        if (this.hasAttribute('idle') === on)
+            return;
+        this.toggleAttribute('idle', on);
+        player.toggleAttribute('idle', on);
+        this.cues?.lifted(!on);
+    }
+    sleep(player) {
+        this.timer = undefined;
+        // A hold is checked again later: a menu closes and a pause ends without
+        // an event the bar hears.
+        if (this.held(player)) {
+            this.timer = setTimeout(() => this.sleep(player), number(this, 'idle-ms', IDLE_MS));
+            return;
+        }
+        this.idle(player, true);
+    }
+    wake(player) {
+        clearTimeout(this.timer);
+        this.idle(player, false);
+        this.timer = setTimeout(() => this.sleep(player), number(this, 'idle-ms', IDLE_MS));
+    }
+    key(player, event) {
+        this.keyboard = true;
+        this.wake(player);
+        if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const video = player.video;
+        const onButton = event.composedPath()[0] instanceof HTMLButtonElement;
+        switch (event.key) {
+            case ' ':
+                if (onButton)
+                    return;
+                toggle(video);
+                break;
+            case 'k':
+            case 'K':
+                toggle(video);
+                break;
+            case 'm':
+            case 'M':
+                video.muted = !video.muted;
+                break;
+            case 'f':
+            case 'F':
+                this.screen?.toggle();
+                break;
+            case 'ArrowLeft':
+                video.currentTime = Math.max(0, video.currentTime - number(this, 'seek-step', SEEK_STEP));
+                break;
+            case 'ArrowRight':
+                video.currentTime = Math.min(end(video), video.currentTime + number(this, 'seek-step', SEEK_STEP));
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    attach(player) {
+        const video = player.video;
+        cueStyle();
+        this.cues = cueLift(video, player, () => this.covered());
+        const screen = fullscreen(player, video);
+        this.screen = screen;
+        const reflect = () => {
+            player.toggleAttribute('fullscreen', screen.active());
+        };
+        this.keep(screen.watch(reflect));
+        reflect();
+        const pointer = () => {
+            this.keyboard = false;
+            this.wake(player);
+        };
+        const key = (event) => {
+            this.key(player, event);
+        };
+        const click = (event) => {
+            // The video and nothing else: a control handles its own click.
+            if (event.composedPath()[0] === video)
+                toggle(video);
+        };
+        this.listen(player, ['pointermove', 'pointerdown'], pointer);
+        player.addEventListener('keydown', key);
+        player.addEventListener('click', click);
+        this.keep(() => {
+            player.removeEventListener('keydown', key);
+            player.removeEventListener('click', click);
+        });
+        this.listen(video, ['play', 'pause', 'ended'], () => {
+            this.wake(player);
+        });
+        this.wake(player);
+        this.cues.lifted(true);
+        // The row's width, its children, and what they hide or reprioritise on
+        // their own: each can change what fits. `collapsed` is left out of the
+        // filter, since the bar writes it.
+        const collapse = () => {
+            this.collapse();
+        };
+        this.listen(this.buttons, ['slotchange'], collapse);
+        this.observe(this, ['hidden', 'priority', 'slot'], collapse, true);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizer = new ResizeObserver(collapse);
+            this.resizer.observe(this.buttonsRow);
+        }
+        collapse();
+    }
+    detach(player) {
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        this.resizer?.disconnect();
+        this.resizer = null;
+        for (const child of this.buttons.assignedElements()) {
+            child.removeAttribute('collapsed');
+            slider(child)?.removeAttribute('collapsed');
+        }
+        this.cues?.dispose();
+        this.cues = null;
+        this.screen = null;
+        this.removeAttribute('idle');
+        player.removeAttribute('idle');
+        player.removeAttribute('fullscreen');
+    }
+}
+//# sourceMappingURL=control-bar.js.map

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

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

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

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

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

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

package/dist/elements/current-time.js

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

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

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

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

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

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