@mattebox/player 0.1.0 → 0.2.0

package/dist/elements/seek-bar.js

@@ -0,0 +1,352 @@
+/**
+ * <mbx-seek-bar>: the bar over the slider primitive, with four layers on
+ * its track, every one a part: the buffered ranges from `video.buffered`,
+ * the played span, the hover position, and for live the edge from
+ * `engine.live`. The span it maps is the availability window for live and
+ * the duration for VOD; `controls/session.ts` says which.
+ *
+ * A live stream is seekable only when the window is worth it: at least
+ * `live-window` forward buffer goals long, the goal read from the engine.
+ * Below that the bar hides. VOD is always seekable. The element sets
+ * `live` and `seekable` on the player, which the time and the live button
+ * read.
+ *
+ * Reads happen on the events the video already fires; the live window has
+ * no event of its own and moves with the clock, so `timeupdate` covers it.
+ * While a pointer holds the thumb, the played layer follows the pointer and
+ * `currentTime` is written at most once per frame, so the bar never fights
+ * a slow seek. The element carries `dragging` meanwhile.
+ *
+ * The preview above the pointer carries the time and, when the session's
+ * `engine.thumbnails` answers for that time, the tile: a rectangle of a
+ * sprite, drawn by background position at the sprite's own size and scaled
+ * down to `--mbx-preview-width`, so a page sets the size with one token.
+ *
+ * Chapters divide the track: one gap per chapter boundary, cut through
+ * every layer with a mask, so the played and the buffered spans read per
+ * chapter, and the preview names the chapter under the pointer. They are
+ * the video's own chapters track, see `controls/chapters.ts`.
+ * `chapters="none"` leaves the track whole and the preview without a name.
+ *
+ * `step` is what an arrow key moves the playhead by and `page` what Page
+ * Up and Page Down do, in seconds. The name comes from `label`; what a
+ * screen reader hears at a position from `label-of`, "{current} of
+ * {duration}", and on live from `label-behind`, "{time} behind live". It
+ * sits in the bar's seek row unless the page says otherwise.
+ */
+import { chapterAt, chapters, followChapters } from '../controls/chapters.js';
+import { at, clip, EMPTY, fraction } from '../controls/ranges.js';
+import { bufferGoal, live, optional, span, wall } from '../controls/session.js';
+import { slider } from '../controls/slider.js';
+import { format } from '../controls/time.js';
+import { el } from '../dom.js';
+import { fill } from '../labels.js';
+import { Component } from './component.js';
+import { number, SLIDER_STYLE, seekRow, style } from './shared.js';
+const STEP = 5;
+const PAGE = 30;
+const LIVE_WINDOW = 3;
+/** What the tile scales down to when the page sets no `--mbx-preview-width`. */
+const PREVIEW_WIDTH = 160;
+/** The buffer goal assumed for a session that reports none. */
+const BUFFER_GOAL = 30;
+/** The gap cut at a chapter boundary, in pixels. */
+const GAP = 2;
+const EVENTS = [
+    'timeupdate',
+    'progress',
+    'durationchange',
+    'loadedmetadata',
+    'seeking',
+    'seeked',
+    'emptied',
+];
+const STYLE = `${SLIDER_STYLE}
+:host { flex: 1; }
+[part~="slider"] { flex: 1; }
+[part~="thumb"] { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
+[part~="buffered"] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
+[part~="buffered-range"] { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.3); }
+[part~="hover"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-text); }
+[part~="edge"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-live); }
+[part~="preview"] {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 4px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  background: var(--mbx-surface);
+  border-radius: var(--mbx-radius);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: none;
+}
+[part~="preview-image"] { position: relative; overflow: hidden; border-radius: 2px; }
+[part~="preview-tile"] { position: absolute; top: 0; left: 0; transform-origin: top left; background-repeat: no-repeat; }
+[part~="preview-time"] { padding: 0 4px; }
+[part~="preview-title"] { max-width: 240px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; }
+[hidden] { display: none; }
+`;
+function percent(part) {
+    return `${part * 100}%`;
+}
+/**
+ * A mask that cuts a gap at each boundary between chapters, as stops along
+ * the track: opaque up to a boundary, clear for the gap, opaque after.
+ */
+function gaps(list, span) {
+    const stops = ['#000 0'];
+    for (const chapter of list.slice(1)) {
+        const at = percent(fraction(chapter.start, span));
+        const before = `calc(${at} - ${GAP / 2}px)`;
+        const after = `calc(${at} + ${GAP / 2}px)`;
+        stops.push(`#000 ${before}`, `transparent ${before}`, `transparent ${after}`, `#000 ${after}`);
+    }
+    stops.push('#000 100%');
+    return `linear-gradient(to right, ${stops.join(', ')})`;
+}
+export class MbxSeekBar extends Component {
+    static get observedAttributes() {
+        return ['label', 'label-of', 'label-behind', 'live-window', 'chapters'];
+    }
+    constructor() {
+        super();
+        this.range = EMPTY;
+        this.pending = null;
+        this.frame = 0;
+        this.divided = '';
+        this.list = [];
+        const root = this.attachShadow({ mode: 'open' });
+        this.bar = slider({
+            step: () => number(this, 'step', STEP),
+            page: () => number(this, 'page', PAGE),
+            onInput: (value) => {
+                this.input(value);
+            },
+            onDrag: (on) => {
+                this.toggleAttribute('dragging', on);
+            },
+        });
+        this.buffered = el('div', 'buffered');
+        this.hover = el('div', 'hover');
+        this.edge = el('div', 'edge');
+        this.hover.hidden = true;
+        this.edge.hidden = true;
+        // Under the fill, so what is played reads over what is buffered.
+        this.bar.track.prepend(this.buffered);
+        this.bar.track.append(this.hover, this.edge);
+        this.preview = el('div', 'preview');
+        this.image = el('div', 'preview-image');
+        this.tile = el('div', 'preview-tile');
+        this.time = el('span', 'preview-time');
+        this.caption = el('span', 'preview-title');
+        this.caption.hidden = true;
+        this.image.append(this.tile);
+        this.image.hidden = true;
+        this.preview.append(this.image, this.caption, this.time);
+        this.preview.hidden = true;
+        this.bar.root.append(this.preview);
+        this.bar.root.addEventListener('pointermove', (event) => {
+            this.point(event);
+        });
+        this.bar.root.addEventListener('pointerleave', () => {
+            this.leave();
+        });
+        root.append(style(STYLE), this.bar.root);
+    }
+    connectedCallback() {
+        seekRow(this);
+        super.connectedCallback();
+    }
+    isLive() {
+        return live(this.player?.engine ?? null) !== undefined;
+    }
+    /** Whether the chapters divide the track and name the preview. */
+    chaptered() {
+        return this.getAttribute('chapters') !== 'none' && this.list.length > 0;
+    }
+    /** The gaps at the chapter boundaries, on every layer of the track at once. */
+    paintChapters() {
+        const mask = this.chaptered() && this.list.length > 1 ? gaps(this.list, this.range) : '';
+        const key = `${mask}|${this.range.start}|${this.range.end}`;
+        if (key === this.divided)
+            return;
+        this.divided = key;
+        const track = this.bar.track.style;
+        // Both spellings: WebKit before 15.4 knows only the prefixed one.
+        track.setProperty('mask-image', mask === '' ? '' : mask);
+        track.setProperty('-webkit-mask-image', mask === '' ? '' : mask);
+    }
+    /** What a screen reader hears at a time. */
+    say(time) {
+        const engine = this.player?.engine ?? null;
+        if (!this.isLive()) {
+            const template = this.getAttribute('label-of') ?? '{current} of {duration}';
+            return Number.isFinite(this.range.end) && this.range.end > 0
+                ? fill(template, { current: format(time), duration: format(this.range.end) })
+                : format(time);
+        }
+        const behind = fill(this.getAttribute('label-behind') ?? '{time} behind live', {
+            time: format(this.range.end - time),
+        });
+        const clock = wall(engine, time);
+        return clock === null ? behind : `${clock}, ${behind}`;
+    }
+    /** What the preview shows at a time. */
+    label(time) {
+        if (!this.isLive())
+            return format(time);
+        return wall(this.player?.engine ?? null, time) ?? `-${format(this.range.end - time)}`;
+    }
+    input(value) {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        this.bar.set(value, this.say(value));
+        if (!this.bar.dragging()) {
+            // The release, or a key: written now, and it supersedes whatever a
+            // frame queued during the drag was about to write.
+            this.pending = null;
+            video.currentTime = value;
+            return;
+        }
+        this.pending = value;
+        if (this.frame === 0) {
+            this.frame = requestAnimationFrame(() => {
+                this.flush();
+            });
+        }
+    }
+    flush() {
+        this.frame = 0;
+        const video = this.player?.video;
+        if (this.pending === null || video === undefined)
+            return;
+        video.currentTime = this.pending;
+        this.pending = null;
+    }
+    /** The width the page asked for through the token, or the default. */
+    previewWidth() {
+        const set = Number.parseFloat(getComputedStyle(this.preview).getPropertyValue('--mbx-preview-width'));
+        return Number.isFinite(set) && set > 0 ? set : PREVIEW_WIDTH;
+    }
+    /** The tile for a time, if the track has one, drawn at its size and scaled to fit. */
+    paintTile(when) {
+        const found = optional(this.player?.engine ?? null).thumbnails?.at(when) ?? null;
+        this.image.hidden = found === null;
+        if (found === null)
+            return;
+        const scale = this.previewWidth() / found.width;
+        this.image.style.width = `${found.width * scale}px`;
+        this.image.style.height = `${found.height * scale}px`;
+        this.tile.style.width = `${found.width}px`;
+        this.tile.style.height = `${found.height}px`;
+        this.tile.style.backgroundImage = `url("${found.url}")`;
+        this.tile.style.backgroundPosition = `-${found.x}px -${found.y}px`;
+        this.tile.style.transform = `scale(${scale})`;
+    }
+    paintBuffered(video) {
+        const parts = clip(Array.from({ length: video.buffered.length }, (_, i) => ({
+            start: video.buffered.start(i),
+            end: video.buffered.end(i),
+        })), this.range);
+        const buffered = this.buffered;
+        while (buffered.childElementCount > parts.length)
+            buffered.lastElementChild?.remove();
+        while (buffered.childElementCount < parts.length)
+            buffered.append(el('div', 'buffered-range'));
+        let i = 0;
+        for (const child of buffered.children) {
+            const part = parts[i];
+            i += 1;
+            if (part === undefined)
+                break;
+            const node = child;
+            node.style.left = percent(part[0]);
+            node.style.width = percent(part[1] - part[0]);
+        }
+    }
+    /** Whether a live window is wide enough to be worth a bar. */
+    worthSeeking() {
+        const goals = number(this, 'live-window', LIVE_WINDOW);
+        if (goals === 0)
+            return true;
+        const goal = bufferGoal(this.player?.engine ?? null) ?? BUFFER_GOAL;
+        return this.range.end - this.range.start >= goals * goal;
+    }
+    /** The hover marker and the preview follow the pointer, clamped to the bar. */
+    point(event) {
+        const rect = this.bar.rail.getBoundingClientRect();
+        if (rect.width === 0 || this.range.end <= this.range.start)
+            return;
+        const part = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+        this.hover.hidden = false;
+        this.hover.style.left = percent(part);
+        this.preview.hidden = false;
+        const when = at(part, this.range);
+        this.time.textContent = this.label(when);
+        const chapter = this.chaptered() ? this.list[chapterAt(this.list, when)] : undefined;
+        this.caption.hidden = chapter === undefined || chapter.title === '';
+        this.caption.textContent = chapter?.title ?? '';
+        this.paintTile(when);
+        const whole = this.bar.root.getBoundingClientRect();
+        const half = this.preview.offsetWidth / 2;
+        const x = rect.left - whole.left + part * rect.width;
+        this.preview.style.left = `${Math.min(whole.width - half, Math.max(half, x))}px`;
+    }
+    leave() {
+        this.hover.hidden = true;
+        this.preview.hidden = true;
+    }
+    attach(player) {
+        const tick = () => {
+            this.render();
+        };
+        this.listen(player.video, EVENTS, tick);
+        this.keep(followChapters(player.video, tick));
+        this.listen(player, ['sourcechange'], () => {
+            this.leave();
+            this.render();
+        });
+        this.render();
+    }
+    detach(player) {
+        cancelAnimationFrame(this.frame);
+        this.frame = 0;
+        this.pending = null;
+        this.leave();
+        player.removeAttribute('live');
+        player.removeAttribute('seekable');
+    }
+    render() {
+        const player = this.player;
+        if (player === null)
+            return;
+        const video = player.video;
+        const engine = player.engine;
+        const api = live(engine);
+        const on = api !== undefined;
+        this.range = span(video, engine);
+        this.list = chapters(video);
+        this.bar.label(this.getAttribute('label') ?? 'Seek');
+        this.bar.range(this.range.start, this.range.end);
+        this.paintBuffered(video);
+        this.paintChapters();
+        this.edge.hidden = !on;
+        if (api !== undefined && api.edge !== null) {
+            this.edge.style.left = percent(fraction(api.edge, this.range));
+        }
+        const seekable = !on || this.worthSeeking();
+        this.hidden = !seekable;
+        player.toggleAttribute('live', on);
+        player.toggleAttribute('seekable', seekable);
+        if (!this.bar.dragging())
+            this.bar.set(video.currentTime, this.say(video.currentTime));
+    }
+}
+//# sourceMappingURL=seek-bar.js.map

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

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

package/dist/elements/shared.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The style every button control shares. Each element carries its own
+ * copy in its shadow root, so the rules are short and the tokens come
+ * through the `--mbx-*` custom properties the player sets, which inherit
+ * through light DOM into every control.
+ *
+ * Nothing carries `!important`: a page's `::part()` rule must win.
+ */
+export declare const BUTTON_STYLE = "\n:host { display: inline-flex; }\n:host([hidden]) { display: none; }\n[part~=\"button\"] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n  opacity: 0.9;\n}\n[part~=\"button\"]:hover { opacity: 1; }\n[part~=\"button\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"icon\"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }\nslot[hidden] { display: none; }\n";
+/** The style of a slider: the rail, the track with its fill, and the thumb. */
+export declare const SLIDER_STYLE = "\n:host { display: block; }\n:host([hidden]) { display: none; }\n[part~=\"slider\"] {\n  position: relative;\n  height: 40px;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n  touch-action: none;\n}\n[part~=\"slider\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"rail\"] { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }\n[part~=\"track\"] {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 4px;\n  transform: translateY(-50%);\n  background: rgba(255, 255, 255, 0.35);\n  border-radius: 2px;\n  overflow: hidden;\n}\n[part~=\"fill\"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }\n[part~=\"thumb\"] {\n  position: absolute;\n  top: 50%;\n  width: 12px;\n  height: 12px;\n  margin: -6px 0 0 -6px;\n  border-radius: 50%;\n  background: var(--mbx-text);\n  pointer-events: none;\n}\n";
+/** A non-negative number from an attribute, else the default. */
+export declare function number(node: Element, name: string, fallback: number): number;
+/** The style of a menu: the button from BUTTON_STYLE, and the popup above it with its items. */
+export declare const MENU_STYLE = "\n:host { display: inline-flex; }\n:host([hidden]) { display: none; }\n[part~=\"button\"] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n  opacity: 0.9;\n}\n[part~=\"button\"]:hover { opacity: 1; }\n[part~=\"button\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"icon\"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }\nslot[hidden] { display: none; }\n\n:host { position: relative; }\n[part~=\"popup\"] {\n  position: absolute;\n  right: 0;\n  bottom: 100%;\n  margin-bottom: 8px;\n  min-width: 160px;\n  padding: 6px;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  background: rgba(16, 17, 20, 0.95);\n  border-radius: var(--mbx-radius);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);\n  font-size: 14px;\n}\n[part~=\"popup\"][hidden] { display: none; }\n[part~=\"section\"] { display: flex; flex-direction: column; }\n[part~=\"section\"] + [part~=\"section\"] { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); }\n[part~=\"section-label\"] { padding: 4px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mbx-muted); }\n[part~=\"item\"] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  padding: 8px 12px 8px 28px;\n  font: inherit;\n  color: inherit;\n  text-align: left;\n  white-space: nowrap;\n  background: transparent;\n  border: 0;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n}\n[part~=\"item\"]:hover { background: rgba(255, 255, 255, 0.12); }\n[part~=\"item-detail\"] { margin-left: auto; color: var(--mbx-muted); font-variant-numeric: tabular-nums; }\n[part~=\"item\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"page-item\"] { position: relative; padding-right: 28px; }\n[part~=\"page-item\"]::after { content: \"\"; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: 0.7; }\n[part~=\"back-item\"] { position: relative; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; margin-bottom: 6px; }\n[part~=\"back-item\"]::before { content: \"\"; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 0 0 1.5px; transform: rotate(-45deg); opacity: 0.7; }\n[part~=\"checked\"] { position: relative; }\n[part~=\"checked\"]::before { content: \"\"; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mbx-accent); }\n";
+/** Puts a control in the bar's seek row when it is in a bar, unless the page wrote a `slot` of its own. */
+export declare function seekRow(node: HTMLElement): void;
+/** A `<style>` with `text`, for a shadow root. */
+export declare function style(text: string): HTMLStyleElement;
+/**
+ * A named slot per state with the default glyph as its fallback, so a page
+ * drops its own SVG into `slot="icon-<state>"` and the button keeps the
+ * name. Returns the slots by state; `show` hides all but one.
+ */
+export declare function iconSlots<S extends string>(states: readonly S[], fallback: (state: S) => SVGSVGElement): Record<S, HTMLSlotElement>;
+export declare function show<S extends string>(slots: Record<S, HTMLSlotElement>, state: S): void;
+//# sourceMappingURL=shared.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/elements/shared.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,8oBAuBxB,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,YAAY,o5BAkCxB,CAAC;AAEF,iEAAiE;AACjE,wBAAgB,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAI5E;AAED,gGAAgG;AAChG,eAAO,MAAM,UAAU,45FA8CtB,CAAC;AAEF,2GAA2G;AAC3G,wBAAgB,OAAO,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAI/C;AAED,kDAAkD;AAClD,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,CAIpD;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EACxC,MAAM,EAAE,SAAS,CAAC,EAAE,EACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,aAAa,GACpC,MAAM,CAAC,CAAC,EAAE,eAAe,CAAC,CAU5B;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,CAExF"}

package/dist/elements/shared.js

@@ -0,0 +1,155 @@
+/**
+ * The style every button control shares. Each element carries its own
+ * copy in its shadow root, so the rules are short and the tokens come
+ * through the `--mbx-*` custom properties the player sets, which inherit
+ * through light DOM into every control.
+ *
+ * Nothing carries `!important`: a page's `::part()` rule must win.
+ */
+export const BUTTON_STYLE = `
+:host { display: inline-flex; }
+:host([hidden]) { display: none; }
+[part~="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  opacity: 0.9;
+}
+[part~="button"]:hover { opacity: 1; }
+[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
+slot[hidden] { display: none; }
+`;
+/** The style of a slider: the rail, the track with its fill, and the thumb. */
+export const SLIDER_STYLE = `
+:host { display: block; }
+:host([hidden]) { display: none; }
+[part~="slider"] {
+  position: relative;
+  height: 40px;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  touch-action: none;
+}
+[part~="slider"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="rail"] { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }
+[part~="track"] {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.35);
+  border-radius: 2px;
+  overflow: hidden;
+}
+[part~="fill"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }
+[part~="thumb"] {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  margin: -6px 0 0 -6px;
+  border-radius: 50%;
+  background: var(--mbx-text);
+  pointer-events: none;
+}
+`;
+/** A non-negative number from an attribute, else the default. */
+export function number(node, name, fallback) {
+    const raw = node.getAttribute(name);
+    const value = raw === null ? Number.NaN : Number(raw);
+    return Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+/** The style of a menu: the button from BUTTON_STYLE, and the popup above it with its items. */
+export const MENU_STYLE = `${BUTTON_STYLE}
+:host { position: relative; }
+[part~="popup"] {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 8px;
+  min-width: 160px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: rgba(16, 17, 20, 0.95);
+  border-radius: var(--mbx-radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  font-size: 14px;
+}
+[part~="popup"][hidden] { display: none; }
+[part~="section"] { display: flex; flex-direction: column; }
+[part~="section"] + [part~="section"] { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
+[part~="section-label"] { padding: 4px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mbx-muted); }
+[part~="item"] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 12px 8px 28px;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+}
+[part~="item"]:hover { background: rgba(255, 255, 255, 0.12); }
+[part~="item-detail"] { margin-left: auto; color: var(--mbx-muted); font-variant-numeric: tabular-nums; }
+[part~="item"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="page-item"] { position: relative; padding-right: 28px; }
+[part~="page-item"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: 0.7; }
+[part~="back-item"] { position: relative; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; margin-bottom: 6px; }
+[part~="back-item"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 0 0 1.5px; transform: rotate(-45deg); opacity: 0.7; }
+[part~="checked"] { position: relative; }
+[part~="checked"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mbx-accent); }
+`;
+/** Puts a control in the bar's seek row when it is in a bar, unless the page wrote a `slot` of its own. */
+export function seekRow(node) {
+    if (node.parentElement?.localName === 'mbx-control-bar' && !node.hasAttribute('slot')) {
+        node.slot = 'seek';
+    }
+}
+/** A `<style>` with `text`, for a shadow root. */
+export function style(text) {
+    const node = document.createElement('style');
+    node.textContent = text;
+    return node;
+}
+/**
+ * A named slot per state with the default glyph as its fallback, so a page
+ * drops its own SVG into `slot="icon-<state>"` and the button keeps the
+ * name. Returns the slots by state; `show` hides all but one.
+ */
+export function iconSlots(states, fallback) {
+    const out = {};
+    for (const state of states) {
+        const slot = document.createElement('slot');
+        slot.name = `icon-${state}`;
+        slot.append(fallback(state));
+        slot.hidden = true;
+        out[state] = slot;
+    }
+    return out;
+}
+export function show(slots, state) {
+    for (const key of Object.keys(slots))
+        slots[key].hidden = key !== state;
+}
+//# sourceMappingURL=shared.js.map

package/dist/elements/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../src/elements/shared.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuB3B,CAAC;AAEF,+EAA+E;AAC/E,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC3B,CAAC;AAEF,iEAAiE;AACjE,MAAM,UAAU,MAAM,CAAC,IAAa,EAAE,IAAY,EAAE,QAAgB;IAClE,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACtD,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;AACjE,CAAC;AAED,gGAAgG;AAChG,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CxC,CAAC;AAEF,2GAA2G;AAC3G,MAAM,UAAU,OAAO,CAAC,IAAiB;IACvC,IAAI,IAAI,CAAC,aAAa,EAAE,SAAS,KAAK,iBAAiB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;QACtF,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;IACrB,CAAC;AACH,CAAC;AAED,kDAAkD;AAClD,MAAM,UAAU,KAAK,CAAC,IAAY;IAChC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxB,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,SAAS,CACvB,MAAoB,EACpB,QAAqC;IAErC,MAAM,GAAG,GAAG,EAAgC,CAAC;IAC7C,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,IAAI,GAAG,QAAQ,KAAK,EAAE,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QAC7B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IACpB,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,IAAI,CAAmB,KAAiC,EAAE,KAAQ;IAChF,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAQ;QAAE,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,GAAG,KAAK,KAAK,CAAC;AACjF,CAAC"}

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

@@ -0,0 +1,14 @@
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxSkipButton extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly button;
+    private readonly glyph;
+    constructor();
+    /** The amount, signed. A value that is not a number is the default. */
+    private seconds;
+    private skip;
+    protected attach(_player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=skip-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skip-button.d.ts","sourceRoot":"","sources":["../../src/elements/skip-button.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAY3C,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAoB;IACnD,iBAAyB,KAAK,CAAkB;;IAiBhD,uEAAuE;IACvE,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,IAAI;cAYO,MAAM,CAAC,OAAO,EAAE,UAAU,GAAG,IAAI;cAIjC,MAAM,IAAI,IAAI;CASlC"}

package/dist/elements/skip-button.js

@@ -0,0 +1,60 @@
+import { icon } from '../controls/icons.js';
+import { fill } from '../labels.js';
+import { Component } from './component.js';
+import { BUTTON_STYLE, style } from './shared.js';
+const SECONDS = 10;
+/** The glyph for a skip amount: the set draws 10 and 30, and a plain arrow says the rest. */
+function glyphFor(back, amount) {
+    const side = back ? 'seek-backward' : 'seek-forward';
+    if (amount === 10 || amount === 30)
+        return `${side}-${amount}`;
+    return side;
+}
+export class MbxSkipButton extends Component {
+    static get observedAttributes() {
+        return ['seconds', 'label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.setAttribute('part', 'button');
+        this.glyph = document.createElement('slot');
+        this.glyph.name = 'icon';
+        this.button.append(this.glyph);
+        this.button.addEventListener('click', () => {
+            this.skip();
+        });
+        root.append(style(BUTTON_STYLE), this.button);
+    }
+    /** The amount, signed. A value that is not a number is the default. */
+    seconds() {
+        const value = Number(this.getAttribute('seconds') ?? SECONDS);
+        return Number.isFinite(value) ? value : SECONDS;
+    }
+    skip() {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        const ranges = video.seekable;
+        const end = Number.isFinite(video.duration)
+            ? video.duration
+            : ranges.length > 0
+                ? ranges.end(ranges.length - 1)
+                : video.currentTime;
+        video.currentTime = Math.min(end, Math.max(0, video.currentTime + this.seconds()));
+    }
+    attach(_player) {
+        this.render();
+    }
+    render() {
+        const seconds = this.seconds();
+        const back = seconds < 0;
+        const amount = Math.abs(seconds);
+        this.glyph.replaceChildren(icon(glyphFor(back, amount)));
+        const template = this.getAttribute('label') ?? (back ? 'Back {seconds} seconds' : 'Forward {seconds} seconds');
+        this.button.setAttribute('aria-label', fill(template, { seconds: amount }));
+    }
+}
+//# sourceMappingURL=skip-button.js.map