@mattebox/player 0.1.0 → 0.3.0

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

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

package/dist/elements/play-button.js

@@ -0,0 +1,60 @@
+/**
+ * <mbx-play-button>: play, pause, or replay once the media has ended. It
+ * reads the video on the events the video already fires and writes one
+ * thing back on click. The glyph is a slot per state, so a page drops its
+ * own SVG into `icon-play`, `icon-pause` or `icon-replay`; the name is on
+ * the button, from `label-play`, `label-pause` and `label-replay`, where a
+ * screen reader reads it.
+ */
+import { icon } from '../controls/icons.js';
+import { Component } from './component.js';
+import { BUTTON_STYLE, iconSlots, show, style } from './shared.js';
+const STATES = ['play', 'pause', 'replay'];
+const LABELS = { play: 'Play', pause: 'Pause', replay: 'Replay' };
+export class MbxPlayButton extends Component {
+    static get observedAttributes() {
+        return STATES.map((state) => `label-${state}`);
+    }
+    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(STATES, icon);
+        for (const state of STATES)
+            this.button.append(this.slots[state]);
+        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.paused) {
+            // Rejected outside a user gesture on an unmuted video, which the
+            // browser reports on the video's own error path; nothing to add.
+            video.play().catch(() => undefined);
+        }
+        else {
+            video.pause();
+        }
+    }
+    attach(player) {
+        this.listen(player.video, ['play', 'pause', 'ended', 'emptied'], () => {
+            this.render();
+        });
+        this.render();
+    }
+    render() {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        const state = video.ended ? 'replay' : video.paused ? 'play' : 'pause';
+        show(this.slots, state);
+        this.button.setAttribute('aria-label', this.getAttribute(`label-${state}`) ?? LABELS[state]);
+    }
+}
+//# sourceMappingURL=play-button.js.map

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

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

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

@@ -0,0 +1,11 @@
+import type { PlayerHost } from '../host.js';
+import { MenuElement } from './menu-element.js';
+export declare class MbxQualityMenu extends MenuElement {
+    static get observedAttributes(): readonly string[];
+    private engine;
+    constructor();
+    protected name(): string;
+    protected attach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=quality-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quality-menu.d.ts","sourceRoot":"","sources":["../../src/elements/quality-menu.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAU,MAAM,mBAAmB,CAAC;AAUxD,qBAAa,cAAe,SAAQ,WAAW;IAC7C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,QAAgB,MAAM,CAAkB;;cAQrB,IAAI,IAAI,MAAM;cAId,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAmBhC,MAAM,IAAI,IAAI;CA4BlC"}

package/dist/elements/quality-menu.js

@@ -0,0 +1,72 @@
+import { MenuElement, single } from './menu-element.js';
+import { show } from './shared.js';
+const AUTO = 'auto';
+function renditionLabel(rendition) {
+    if (rendition.height !== undefined)
+        return `${rendition.height}p`;
+    return `${Math.round(rendition.bitrate / 1000)} kbps`;
+}
+export class MbxQualityMenu extends MenuElement {
+    static get observedAttributes() {
+        return ['label', 'label-auto', 'label-back'];
+    }
+    constructor() {
+        super(...single('settings'));
+        this.engine = null;
+        show(this.slots, 'default');
+    }
+    name() {
+        return 'Quality';
+    }
+    attach(player) {
+        this.follow(player, (engine) => {
+            this.engine = engine;
+            this.render();
+            if (engine === null)
+                return undefined;
+            const tick = () => {
+                this.render();
+            };
+            const offs = [
+                engine.on('tracks:changed', tick),
+                engine.on('quality:constraints-unsatisfiable', tick),
+                engine.on('quality:pin-unsatisfiable', tick),
+            ];
+            return () => {
+                for (const off of offs)
+                    off();
+            };
+        });
+    }
+    render() {
+        super.render();
+        const engine = this.engine;
+        if (engine === null) {
+            this.hidden = true;
+            return;
+        }
+        const quality = engine.quality;
+        const items = [
+            [AUTO, this.getAttribute('label-auto') ?? 'Auto'],
+        ];
+        for (const rendition of quality.renditions) {
+            items.push([rendition.id, renditionLabel(rendition)]);
+        }
+        this.menu.fill([
+            {
+                name: 'rendition',
+                items,
+                value: quality.pinned ?? AUTO,
+                onSelect: (value) => {
+                    if (value === AUTO)
+                        quality.auto();
+                    else
+                        quality.pin(value);
+                    this.render();
+                },
+            },
+        ]);
+        this.hidden = quality.renditions.length === 0;
+    }
+}
+//# sourceMappingURL=quality-menu.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"remaining-time.d.ts","sourceRoot":"","sources":["../../src/elements/remaining-time.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,qBAAa,gBAAiB,SAAQ,WAAW;;cAK5B,MAAM,IAAI,IAAI;CAUlC"}

package/dist/elements/remaining-time.js

@@ -0,0 +1,26 @@
+/**
+ * <mbx-remaining-time>: what is left, "-4:53", once the metadata is in. A
+ * bar that shows one number shows this one: a viewer asks how much is
+ * left more often than where they are. A live stream has no end, so the
+ * element hides while the stream is live, as the duration does.
+ */
+import { live, span } from '../controls/session.js';
+import { format } from '../controls/time.js';
+import { TimeElement } from './time-element.js';
+export class MbxRemainingTime extends TimeElement {
+    constructor() {
+        super(':host { text-align: right; }');
+    }
+    render() {
+        const player = this.player;
+        if (player === null)
+            return;
+        const video = player.video;
+        const engine = player.engine;
+        const on = live(engine) !== undefined;
+        this.hidden = on;
+        if (!on)
+            this.text.data = `-${format(Math.max(0, span(video, engine).end - video.currentTime))}`;
+    }
+}
+//# sourceMappingURL=remaining-time.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"remaining-time.js","sourceRoot":"","sources":["../../src/elements/remaining-time.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;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,gBAAiB,SAAQ,WAAW;IAC/C;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,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,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,EAAE;YACL,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC;IAC5F,CAAC;CACF"}

package/dist/elements/seek-bar.d.ts

@@ -0,0 +1,83 @@
+/**
+ * <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 type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxSeekBar extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly bar;
+    private readonly buffered;
+    private readonly hover;
+    private readonly edge;
+    private readonly preview;
+    private readonly image;
+    private readonly tile;
+    private readonly time;
+    private readonly caption;
+    private range;
+    /** The chapters as last drawn, so the mask is written only when they change. */
+    private divided;
+    private list;
+    private pending;
+    private frame;
+    constructor();
+    connectedCallback(): void;
+    private isLive;
+    /** Whether the chapters divide the track and name the preview. */
+    private chaptered;
+    /** The gaps at the chapter boundaries, on every layer of the track at once. */
+    private paintChapters;
+    /** What a screen reader hears at a time. */
+    private say;
+    /** What the preview shows at a time. */
+    private label;
+    private input;
+    private flush;
+    /** The width the page asked for through the token, or the default. */
+    private previewWidth;
+    /** The tile for a time, if the track has one, drawn at its size and scaled to fit. */
+    private paintTile;
+    private paintBuffered;
+    /** Whether a live window is wide enough to be worth a bar. */
+    private worthSeeking;
+    /** The hover marker and the preview follow the pointer, clamped to the bar. */
+    private point;
+    private leave;
+    protected attach(player: PlayerHost): void;
+    protected detach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=seek-bar.d.ts.map

package/dist/elements/seek-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-bar.d.ts","sourceRoot":"","sources":["../../src/elements/seek-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAWH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA8E3C,qBAAa,UAAW,SAAQ,SAAS;IACvC,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,GAAG,CAAS;IACrC,iBAAyB,QAAQ,CAAc;IAC/C,iBAAyB,KAAK,CAAc;IAC5C,iBAAyB,IAAI,CAAc;IAC3C,iBAAyB,OAAO,CAAc;IAC9C,iBAAyB,KAAK,CAAc;IAC5C,iBAAyB,IAAI,CAAc;IAC3C,iBAAyB,IAAI,CAAc;IAC3C,iBAAyB,OAAO,CAAc;IAC9C,QAAgB,KAAK,CAAO;IAC5B,gFAAgF;IAChF,QAAgB,OAAO,CAAS;IAChC,QAAgB,IAAI,CAAY;IAChC,QAAgB,OAAO,CAAgB;IACvC,QAAgB,KAAK,CAAS;;IAgDrB,iBAAiB,IAAI,IAAI;IAKlC,OAAO,CAAC,MAAM;IAId,kEAAkE;IAClE,OAAO,CAAC,SAAS;IAIjB,+EAA+E;IAC/E,OAAO,CAAC,aAAa;IAWrB,4CAA4C;IAC5C,OAAO,CAAC,GAAG;IAeX,wCAAwC;IACxC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,KAAK;IAmBb,OAAO,CAAC,KAAK;IAQb,sEAAsE;IACtE,OAAO,CAAC,YAAY;IAOpB,sFAAsF;IACtF,OAAO,CAAC,SAAS;IAcjB,OAAO,CAAC,aAAa;IAsBrB,8DAA8D;IAC9D,OAAO,CAAC,YAAY;IAOpB,+EAA+E;IAC/E,OAAO,CAAC,KAAK;IAmBb,OAAO,CAAC,KAAK;cAKM,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAahC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAShC,MAAM,IAAI,IAAI;CAuBlC"}

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