@mattebox/player-diagnostics 0.3.0 → 0.5.0

package/dist/element.js

@@ -1,677 +1,637 @@
-import { CHART_TABS, createCharts } from './charts.js';
-import { bitrate, clock, fixed, ranges, rendition, share } from './format.js';
-import { findPlayer, whenPlayer } from './host.js';
-import { icon } from './icon.js';
-import { buildReport } from './report.js';
-import { createSampler } from './sampler.js';
-import { STYLE } from './style.js';
-import { probeSupport } from './support.js';
+import { setChildren } from "./dom.js";
+import { bitrate, clock, fixed, ranges, rendition, share } from "./format.js";
+import { CHART_TABS, createCharts } from "./charts.js";
+import { findPlayer, whenPlayer } from "./host.js";
+import { icon } from "./icon.js";
+import { buildReport } from "./report.js";
+import { createSampler } from "./sampler.js";
+import { STYLE } from "./style.js";
+import { probeSupport } from "./support.js";
+//#region src/element.ts
 const POLL_MS = 500;
 const DRAW_MS = 250;
 const WINDOW = 120;
-const WINDOWS = [30, 60, 120, 300, 600];
+const WINDOWS = [
+	30,
+	60,
+	120,
+	300,
+	600
+];
 const PANEL_WIDTH = 560;
 /** Air between the panel's top and the picture's, and around it. */
 const AIR = 8;
-const TABS = ['playback', 'charts', 'engine', 'browser'];
+const TABS = [
+	"playback",
+	"charts",
+	"engine",
+	"browser"
+];
 const TAB_NAMES = {
-    playback: 'Playback',
-    charts: 'Charts',
-    engine: 'Engine',
-    browser: 'Browser',
+	playback: "Playback",
+	charts: "Charts",
+	engine: "Engine",
+	browser: "Browser"
 };
-const READY_STATES = ['nothing', 'metadata', 'current data', 'future data', 'enough data'];
-const NETWORK_STATES = ['empty', 'idle', 'loading', 'no source'];
+const READY_STATES = [
+	"nothing",
+	"metadata",
+	"current data",
+	"future data",
+	"enough data"
+];
+const NETWORK_STATES = [
+	"empty",
+	"idle",
+	"loading",
+	"no source"
+];
 function el(tag, part, text) {
-    const node = document.createElement(tag);
-    node.setAttribute('part', part);
-    if (text !== undefined)
-        node.textContent = text;
-    return node;
+	const node = document.createElement(tag);
+	node.setAttribute("part", part);
+	if (text !== void 0) node.textContent = text;
+	return node;
 }
 function button(part, text) {
-    const node = el('button', part, text);
-    node.type = 'button';
-    return node;
+	const node = el("button", part, text);
+	node.type = "button";
+	return node;
 }
 /** A cell's text and its part: a tick, a cross, a dash, or the text itself. */
 function cell(value) {
-    switch (value) {
-        case 'yes':
-            return ['✓', 'cell ok'];
-        case 'no':
-            return ['✕', 'cell bad'];
-        case 'na':
-            return ['–', 'cell na'];
-        case 'maybe':
-            return ['maybe', 'cell maybe'];
-        default:
-            return [value, 'cell'];
-    }
-}
-export class MbxDiagnostics extends HTMLElement {
-    static get observedAttributes() {
-        return ['label', 'label-copy', 'label-copied', 'window'];
-    }
-    constructor() {
-        super();
-        this.player = null;
-        this.cancel = null;
-        this.offs = [];
-        this.sampler = createSampler();
-        this.timer = undefined;
-        this.drawer = undefined;
-        this.copied = undefined;
-        this.tab = 'playback';
-        this.chartTab = 'buffer';
-        this.support = null;
-        this.probing = false;
-        const root = this.attachShadow({ mode: 'open' });
-        const style = document.createElement('style');
-        style.textContent = STYLE;
-        this.toggle = button('button');
-        this.toggle.setAttribute('aria-haspopup', 'dialog');
-        this.toggle.setAttribute('aria-expanded', 'false');
-        const slot = document.createElement('slot');
-        slot.name = 'icon';
-        slot.append(icon());
-        this.toggle.append(slot);
-        this.toggle.addEventListener('click', () => {
-            if (this.panel.hidden)
-                this.show();
-            else
-                this.hide();
-        });
-        this.panel = el('div', 'panel');
-        this.panel.setAttribute('role', 'dialog');
-        this.panel.hidden = true;
-        this.panel.addEventListener('keydown', (event) => {
-            if (event.key !== 'Escape' || this.hasAttribute('inline'))
-                return;
-            event.preventDefault();
-            this.hide();
-            this.toggle.focus();
-        });
-        const head = el('div', 'head');
-        head.setAttribute('role', 'tablist');
-        this.tabs = {};
-        this.pages = {};
-        this.body = el('div', 'body');
-        for (const tab of TABS) {
-            const node = button(`tab tab-${tab}`, TAB_NAMES[tab]);
-            node.setAttribute('role', 'tab');
-            node.addEventListener('click', () => {
-                this.select(tab);
-            });
-            this.tabs[tab] = node;
-            head.append(node);
-            const page = el('div', `page page-${tab}`);
-            page.setAttribute('role', 'tabpanel');
-            page.hidden = true;
-            this.pages[tab] = page;
-            this.body.append(page);
-        }
-        this.copy = button('copy');
-        this.copy.addEventListener('click', () => {
-            void this.copyReport();
-        });
-        const close = button('close', '✕');
-        close.setAttribute('aria-label', 'Close');
-        close.addEventListener('click', () => {
-            this.hide();
-            this.toggle.focus();
-        });
-        head.append(this.copy, close);
-        // The charts page: its own tabs, the window, the canvas, the legend and the readout.
-        const chartTabs = el('div', 'chart-tabs');
-        chartTabs.setAttribute('role', 'tablist');
-        this.chartTabs = {};
-        for (const tab of CHART_TABS) {
-            const node = button(`chart-tab chart-tab-${tab}`, tab);
-            node.setAttribute('role', 'tab');
-            node.addEventListener('click', () => {
-                this.chartTab = tab;
-                this.markChartTab();
-                this.draw();
-            });
-            this.chartTabs[tab] = node;
-            chartTabs.append(node);
-        }
-        this.windowSelect = el('select', 'window');
-        this.windowSelect.setAttribute('aria-label', 'Window');
-        for (const seconds of WINDOWS) {
-            const option = document.createElement('option');
-            option.value = String(seconds);
-            option.textContent = seconds < 60 ? `${seconds} s` : `${seconds / 60} min`;
-            this.windowSelect.append(option);
-        }
-        this.windowSelect.addEventListener('change', () => {
-            this.draw();
-        });
-        chartTabs.append(this.windowSelect);
-        this.canvas = el('canvas', 'chart');
-        const legend = el('div', 'legend');
-        const readout = el('p', 'readout');
-        this.pages.charts.append(chartTabs, this.canvas, legend, readout);
-        this.charts = createCharts(this.canvas, legend, readout);
-        this.outside = (event) => {
-            if (!event.composedPath().includes(this))
-                this.hide();
-        };
-        this.refit = () => {
-            this.fit();
-        };
-        this.panel.append(head, this.body);
-        root.append(style, this.toggle, this.panel);
-        this.markTab();
-        this.markChartTab();
-        this.renderLabels();
-    }
-    connectedCallback() {
-        // In the bar, a button and a popup; anywhere else, the panel in flow.
-        this.toggleAttribute('inline', this.parentElement?.localName !== 'mbx-control-bar');
-        const found = findPlayer(this);
-        if (found === null)
-            return;
-        this.cancel?.();
-        this.cancel = whenPlayer(found, (player) => {
-            if (!this.isConnected)
-                return;
-            this.attach(player);
-        });
-    }
-    disconnectedCallback() {
-        this.cancel?.();
-        this.cancel = null;
-        this.detach();
-    }
-    attributeChangedCallback() {
-        this.renderLabels();
-    }
-    attach(player) {
-        this.player = player;
-        this.sampler.attach(player.video, player.engine);
-        const on = (target, name, fn) => {
-            target.addEventListener(name, fn);
-            this.offs.push(() => {
-                target.removeEventListener(name, fn);
-            });
-        };
-        on(player, 'sourcechange', () => {
-            this.sampler.attach(player.video, player.engine);
-            this.poll();
-        });
-        on(player, 'error', (event) => {
-            const error = event.detail;
-            if (error.fatal) {
-                this.dispatchEvent(new CustomEvent('report', { detail: this.report(), bubbles: true, composed: true }));
-            }
-        });
-        this.timer = setInterval(() => {
-            this.poll();
-        }, POLL_MS);
-        this.poll();
-        if (this.hasAttribute('inline'))
-            this.show();
-    }
-    detach() {
-        for (const off of this.offs)
-            off();
-        this.offs = [];
-        clearInterval(this.timer);
-        this.timer = undefined;
-        this.sampler.release();
-        this.hide();
-        this.player = null;
-    }
-    /** The report, as of now. */
-    report() {
-        const player = this.player;
-        if (player === null)
-            throw new Error('mbx-diagnostics is not inside a player');
-        return buildReport({
-            player,
-            samples: this.sampler.samples,
-            marks: this.sampler.marks,
-            counters: this.sampler.counters,
-            history: this.sampler.history,
-            support: this.support,
-        });
-    }
-    poll() {
-        const player = this.player;
-        if (player === null)
-            return;
-        this.sampler.poll(player.video, player.engine);
-        if (!this.panel.hidden)
-            this.paint();
-    }
-    show() {
-        if (!this.panel.hidden)
-            return;
-        this.panel.hidden = false;
-        if (!this.hasAttribute('inline')) {
-            this.setAttribute('open', '');
-            this.toggle.setAttribute('aria-expanded', 'true');
-            document.addEventListener('pointerdown', this.outside, true);
-            window.addEventListener('resize', this.refit);
-            this.fit();
-        }
-        this.paint();
-        this.drawer = setInterval(() => {
-            this.draw();
-        }, DRAW_MS);
-        if (!this.hasAttribute('inline'))
-            this.tabs[this.tab].focus();
-    }
-    hide() {
-        clearInterval(this.drawer);
-        this.drawer = undefined;
-        if (this.panel.hidden)
-            return;
-        this.panel.hidden = true;
-        this.removeAttribute('open');
-        this.toggle.setAttribute('aria-expanded', 'false');
-        document.removeEventListener('pointerdown', this.outside, true);
-        window.removeEventListener('resize', this.refit);
-    }
-    /** The panel never leaves the picture: fitted to the room above the button, within the player's width. */
-    fit() {
-        const player = this.player;
-        if (player === null)
-            return;
-        const box = player.getBoundingClientRect();
-        const host = this.getBoundingClientRect();
-        const top = player.video.getBoundingClientRect().top;
-        const room = host.top - top - AIR;
-        this.panel.style.maxHeight = `${Math.max(120, Math.floor(room))}px`;
-        const width = Math.min(PANEL_WIDTH, Math.max(200, box.width - AIR * 2));
-        this.panel.style.width = `${width}px`;
-        const left = Math.max(box.left + AIR, Math.min(host.right - width, box.right - AIR - width));
-        this.panel.style.right = 'auto';
-        this.panel.style.left = `${left - host.left}px`;
-    }
-    select(tab) {
-        this.tab = tab;
-        this.markTab();
-        this.tabs[tab].focus();
-        this.paint();
-        this.draw();
-    }
-    markTab() {
-        for (const tab of TABS) {
-            this.tabs[tab].setAttribute('aria-selected', String(tab === this.tab));
-            this.tabs[tab].tabIndex = tab === this.tab ? 0 : -1;
-            this.pages[tab].hidden = tab !== this.tab;
-        }
-    }
-    markChartTab() {
-        for (const tab of CHART_TABS) {
-            this.chartTabs[tab].setAttribute('aria-selected', String(tab === this.chartTab));
-        }
-    }
-    renderLabels() {
-        this.toggle.setAttribute('aria-label', this.getAttribute('label') ?? 'Diagnostics');
-        this.panel.setAttribute('aria-label', this.getAttribute('label') ?? 'Diagnostics');
-        if (this.copied === undefined) {
-            this.copy.textContent = this.getAttribute('label-copy') ?? 'Copy report';
-        }
-        const raw = Number(this.getAttribute('window'));
-        const seconds = Number.isFinite(raw) && raw > 0 ? raw : WINDOW;
-        if (!WINDOWS.includes(seconds)) {
-            const option = document.createElement('option');
-            option.value = String(seconds);
-            option.textContent = `${seconds} s`;
-            this.windowSelect.append(option);
-        }
-        this.windowSelect.value = String(seconds);
-    }
-    async copyReport() {
-        const text = JSON.stringify(this.report(), null, 2);
-        try {
-            await navigator.clipboard.writeText(text);
-        }
-        catch {
-            return;
-        }
-        this.copy.textContent = this.getAttribute('label-copied') ?? 'Copied';
-        clearTimeout(this.copied);
-        this.copied = setTimeout(() => {
-            this.copied = undefined;
-            this.renderLabels();
-        }, 1500);
-    }
-    /** The colours the charts draw with, off the element's tokens. */
-    palette() {
-        const computed = getComputedStyle(this);
-        const token = (name, fallback) => computed.getPropertyValue(name).trim() || fallback;
-        return {
-            ink: token('--mbx-text', '#f2f3f5'),
-            muted: token('--mbx-muted', '#9aa0a6'),
-            accent: token('--mbx-accent', '#5b8cff'),
-            warn: token('--mbx-chart-3', '#d9a83f'),
-            series: [1, 2, 3, 4, 5].map((i) => token(`--mbx-chart-${i}`, '#888')),
-        };
-    }
-    draw() {
-        const player = this.player;
-        if (player === null || this.panel.hidden || this.tab !== 'charts')
-            return;
-        this.charts.draw({
-            tab: this.chartTab,
-            window: Number(this.windowSelect.value) || WINDOW,
-            samples: this.sampler.samples,
-            marks: this.sampler.marks,
-            counters: this.sampler.counters,
-            video: player.video,
-            engine: player.engine,
-            palette: this.palette(),
-        });
-    }
-    /** The page shown, from the facts of the moment. */
-    paint() {
-        const player = this.player;
-        if (player === null || this.panel.hidden)
-            return;
-        switch (this.tab) {
-            case 'playback':
-                this.sections(this.pages.playback, this.playbackSections(player));
-                break;
-            case 'engine':
-                this.sections(this.pages.engine, this.engineSections(player.engine));
-                break;
-            case 'browser':
-                this.browser();
-                break;
-            default:
-                break;
-        }
-    }
-    playbackSections(player) {
-        const video = player.video;
-        const engine = player.engine;
-        const quality = video.getVideoPlaybackQuality?.();
-        const counters = this.sampler.counters;
-        const last = this.sampler.samples[this.sampler.samples.length - 1];
-        const state = video.paused ? (video.ended ? 'ended' : 'paused') : 'playing';
-        const source = [
-            ['source', player.getAttribute('src') ?? '–'],
-            ['type', player.getAttribute('type') ?? '–'],
-            ['handler', player.player?.session?.handler ?? '–'],
-        ];
-        if (engine !== null)
-            source.push(['phase', engine.stats.snapshot().lifecycle.phase]);
-        if (player.error !== null) {
-            source.push(['error', `${player.error.category}: ${player.error.code}`]);
-        }
-        else if (video.error !== null) {
-            source.push(['media error', `${video.error.code} ${video.error.message}`]);
-        }
-        const playback = [
-            ['time', `${clock(video.currentTime)} of ${clock(video.duration)}`],
-            [
-                'state',
-                `${state}, ${READY_STATES[video.readyState] ?? video.readyState}, network ${NETWORK_STATES[video.networkState] ?? video.networkState}`,
-            ],
-            ['rate', `${video.playbackRate}×`],
-            ['picture', video.videoWidth > 0 ? `${video.videoWidth}×${video.videoHeight}` : '–'],
-            [
-                'frames',
-                quality === undefined
-                    ? '–'
-                    : `${quality.totalVideoFrames} decoded, ${quality.droppedVideoFrames} dropped (${share(quality.droppedVideoFrames, quality.totalVideoFrames)})`,
-            ],
-            ['buffered', `${fixed(last?.ahead ?? 0)}s ahead: ${ranges(playbackRanges(video))}`],
-            ['stalls', `${counters.stalls}, ${counters.stalledSeconds.toFixed(1)}s in total`],
-        ];
-        if (engine !== null) {
-            const snapshot = engine.stats.snapshot();
-            playback.push([
-                'throughput',
-                `slow ${bitrate(snapshot.stats.throughputEwma)}, fast ${bitrate(snapshot.stats.throughputFastEwma)}`,
-            ], ['playing', rendition(engine.quality.playing)], ['switches', String(counters.switches)]);
-        }
-        return [
-            { title: 'Source', rows: source },
-            { title: 'Playback', rows: playback },
-        ];
-    }
-    engineSections(engine) {
-        if (engine === null) {
-            return [
-                {
-                    title: null,
-                    rows: [],
-                    note: 'A native session: the browser plays this, and there is no engine to ask.',
-                },
-            ];
-        }
-        const state = engine.stats.snapshot();
-        const optional = engine;
-        const live = state.live;
-        const rows = [
-            ['capabilities', [...engine.capabilities()].join(', ') || 'none'],
-            ['phase', state.lifecycle.phase],
-            ['buffer goal', `${state.scheduling.bufferGoal}s`],
-            [
-                'throughput',
-                `slow ${bitrate(state.stats.throughputEwma)}, fast ${bitrate(state.stats.throughputFastEwma)}`,
-            ],
-            [
-                'in flight',
-                [...state.scheduling.inflight.values()].map((r) => `${r.trackId} #${r.seq}`).join(', ') ||
-                    'none',
-            ],
-            [
-                'live',
-                live === null
-                    ? 'VOD'
-                    : `window ${clock(live.span.start)} to ${clock(live.span.end)}, edge ${clock(live.edge)}${optional.live?.latency === null || optional.live?.latency === undefined
-                        ? ''
-                        : `, ${optional.live.latency.toFixed(1)}s behind`}`,
-            ],
-            ['trace', `${engine.stats.trace().length} entries`],
-        ];
-        const error = engine.error;
-        if (error !== null)
-            rows.push(['last error', `${error.category}: ${error.code}`]);
-        const buffers = [...state.buffers.entries()].map(([id, buffer]) => [
-            id.replace('sb:', ''),
-            `${buffer.codecs}: ${ranges(buffer.ranges)}${buffer.pendingAppends > 0 ? `, ${buffer.pendingAppends} pending` : ''}`,
-        ]);
-        const tracks = engine.tracks.available.map((track) => {
-            const active = engine.tracks.active(track.contentType)?.id === track.id;
-            const name = [track.lang, track.role].filter((v) => v !== undefined).join(' · ');
-            return [
-                `${track.contentType}${active ? ' ●' : ''}`,
-                `${track.id}${name === '' ? '' : ` (${name})`}, ${track.renditions.length} renditions`,
-            ];
-        });
-        const playing = engine.quality.playing?.id ?? null;
-        const active = engine.quality.active?.id ?? null;
-        const allowed = new Set(engine.quality.allowed.map((r) => r.id));
-        const renditions = engine.quality.renditions.map((r) => {
-            const flags = [
-                r.id === playing ? 'playing' : '',
-                r.id === active && active !== playing ? 'next' : '',
-                r.id === engine.quality.pinned ? 'pinned' : '',
-                allowed.has(r.id) ? '' : 'capped',
-            ].filter((f) => f !== '');
-            const size = r.width !== undefined && r.height !== undefined ? `${r.width}×${r.height}` : '';
-            const text = [
-                size,
-                bitrate(r.bitrate),
-                r.frameRate === undefined ? '' : `${r.frameRate} fps`,
-                r.codecs ?? '',
-            ]
-                .filter((v) => v !== '')
-                .join(', ');
-            return [r.id, `${text}${flags.length > 0 ? ` [${flags.join(', ')}]` : ''}`];
-        });
-        const drm = optional.drm === undefined
-            ? []
-            : [
-                ['key system', optional.drm.keySystem ?? 'none yet'],
-                [
-                    'keys',
-                    optional.drm.sessions.length === 0
-                        ? 'none yet'
-                        : optional.drm.sessions.map((s) => `${s.keyId}: ${s.status}`).join(', '),
-                ],
-            ];
-        return [
-            { title: 'Engine', rows },
-            {
-                title: 'Source buffers',
-                rows: buffers,
-                note: buffers.length === 0 ? 'none yet' : undefined,
-            },
-            { title: 'Tracks', rows: tracks, note: tracks.length === 0 ? 'none yet' : undefined },
-            {
-                title: 'Renditions',
-                rows: renditions,
-                note: renditions.length === 0 ? 'none yet' : undefined,
-            },
-            ...(optional.drm === undefined ? [] : [{ title: 'DRM', rows: drm }]),
-        ];
-    }
-    /**
-     * Draws sections into a page, reusing what is there: a heading and a
-     * list per section, a row per pair, texts replaced only where they
-     * changed, so a page open for an hour neither flickers nor grows.
-     */
-    sections(page, sections) {
-        const wanted = sections.flatMap((section) => {
-            const nodes = [];
-            if (section.title !== null)
-                nodes.push(['heading', section.title]);
-            if (section.note !== undefined && section.rows.length === 0)
-                nodes.push(['note', section.note]);
-            else
-                nodes.push(['rows', section.rows]);
-            return nodes;
-        });
-        while (page.childElementCount > wanted.length)
-            page.lastElementChild?.remove();
-        wanted.forEach(([kind, content], i) => {
-            let node = page.children[i];
-            const tag = kind === 'heading' ? 'h3' : kind === 'note' ? 'p' : 'dl';
-            if (node === undefined || node.localName !== tag) {
-                const fresh = el(tag, kind);
-                if (node === undefined)
-                    page.append(fresh);
-                else
-                    node.replaceWith(fresh);
-                node = fresh;
-            }
-            if (typeof content === 'string') {
-                if (node.textContent !== content)
-                    node.textContent = content;
-                return;
-            }
-            // Rows: a key and a value each, as children of the list in pairs.
-            while (node.childElementCount > content.length * 2)
-                node.lastElementChild?.remove();
-            content.forEach(([key, value], j) => {
-                let dt = node.children[j * 2];
-                let dd = node.children[j * 2 + 1];
-                if (dt === undefined || dd === undefined) {
-                    dt = el('dt', 'key');
-                    dd = el('dd', 'value');
-                    node.append(dt, dd);
-                }
-                if (dt.textContent !== key)
-                    dt.textContent = key;
-                if (dd.textContent !== value)
-                    dd.textContent = value;
-            });
-        });
-    }
-    /** The browser page: probed once, the first time it is shown, then a set of tables. */
-    browser() {
-        const page = this.pages.browser;
-        if (this.support !== null || this.probing)
-            return;
-        this.probing = true;
-        page.replaceChildren(el('p', 'note', 'Probing the browser…'));
-        void probeSupport().then((support) => {
-            this.support = support;
-            this.probing = false;
-            this.tables(page, support);
-        });
-    }
-    tables(page, support) {
-        page.replaceChildren();
-        page.append(el('h3', 'heading', 'Platform'), el('p', 'note', support.userAgent));
-        const platform = el('table', 'table');
-        for (const row of support.platform) {
-            const tr = document.createElement('tr');
-            const [text, part] = cell(row.value);
-            tr.append(el('th', 'cell label', row.label), el('td', part, text));
-            platform.append(tr);
-        }
-        page.append(platform);
-        page.append(el('h3', 'heading', 'Codecs'));
-        const codecs = el('table', 'table');
-        const head = document.createElement('tr');
-        for (const name of ['Codec', 'MSE fMP4', 'MSE WebM', '<video>', 'Smooth', 'Efficient']) {
-            head.append(el('th', 'cell label', name));
-        }
-        codecs.append(head);
-        for (const row of support.codecs) {
-            const tr = document.createElement('tr');
-            const label = el('th', 'cell label', row.label);
-            label.title = row.codec;
-            tr.append(label);
-            for (const value of [row.mse, row.webm, row.element, row.smooth, row.efficient]) {
-                const [text, part] = cell(value);
-                tr.append(el('td', part, text));
-            }
-            codecs.append(tr);
-        }
-        page.append(codecs);
-        page.append(el('h3', 'heading', 'DRM'));
-        const drm = el('table', 'table');
-        const drmHead = document.createElement('tr');
-        for (const name of [
-            'System',
-            'Available',
-            'Level',
-            'Schemes',
-            'Persistent',
-            'Identifier',
-            'HDCP',
-        ]) {
-            drmHead.append(el('th', 'cell label', name));
-        }
-        drm.append(drmHead);
-        for (const row of support.drm) {
-            const tr = document.createElement('tr');
-            const label = el('th', 'cell label', row.label);
-            if (row.keySystem !== null)
-                label.title = row.keySystem;
-            tr.append(label);
-            const values = [
-                row.keySystem === null ? 'no' : 'yes',
-                row.level,
-                row.schemes,
-                row.persistent,
-                row.identifier,
-                row.hdcp,
-            ];
-            for (const value of values) {
-                const [text, part] = cell(value);
-                tr.append(el('td', part, text));
-            }
-            drm.append(tr);
-        }
-        page.append(drm);
-    }
+	switch (value) {
+		case "yes": return ["✓", "cell ok"];
+		case "no": return ["✕", "cell bad"];
+		case "na": return ["–", "cell na"];
+		case "maybe": return ["maybe", "cell maybe"];
+		default: return [value, "cell"];
+	}
 }
+var MbxDiagnostics = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"label",
+			"label-copy",
+			"label-copied",
+			"window"
+		];
+	}
+	constructor() {
+		super();
+		this.player = null;
+		this.cancel = null;
+		this.offs = [];
+		this.sampler = createSampler();
+		this.timer = void 0;
+		this.drawer = void 0;
+		this.copied = void 0;
+		this.tab = "playback";
+		this.chartTab = "buffer";
+		this.support = null;
+		this.probing = false;
+		const root = this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = STYLE;
+		this.toggle = button("button");
+		this.toggle.setAttribute("aria-haspopup", "dialog");
+		this.toggle.setAttribute("aria-expanded", "false");
+		const slot = document.createElement("slot");
+		slot.name = "icon";
+		slot.append(icon());
+		this.toggle.append(slot);
+		this.toggle.addEventListener("click", () => {
+			if (this.panel.hidden) this.show();
+			else this.hide();
+		});
+		this.panel = el("div", "panel");
+		this.panel.setAttribute("role", "dialog");
+		this.panel.hidden = true;
+		this.panel.addEventListener("keydown", (event) => {
+			if (event.key !== "Escape" || this.hasAttribute("inline")) return;
+			event.preventDefault();
+			this.hide();
+			this.toggle.focus();
+		});
+		const head = el("div", "head");
+		head.setAttribute("role", "tablist");
+		this.tabs = {};
+		this.pages = {};
+		this.body = el("div", "body");
+		for (const tab of TABS) {
+			const node = button(`tab tab-${tab}`, TAB_NAMES[tab]);
+			node.setAttribute("role", "tab");
+			node.addEventListener("click", () => {
+				this.select(tab);
+			});
+			this.tabs[tab] = node;
+			head.append(node);
+			const page = el("div", `page page-${tab}`);
+			page.setAttribute("role", "tabpanel");
+			page.hidden = true;
+			this.pages[tab] = page;
+			this.body.append(page);
+		}
+		this.copy = button("copy");
+		this.copy.addEventListener("click", () => {
+			this.copyReport();
+		});
+		const close = button("close", "✕");
+		close.setAttribute("aria-label", "Close");
+		close.addEventListener("click", () => {
+			this.hide();
+			this.toggle.focus();
+		});
+		head.append(this.copy, close);
+		const chartTabs = el("div", "chart-tabs");
+		chartTabs.setAttribute("role", "tablist");
+		this.chartTabs = {};
+		for (const tab of CHART_TABS) {
+			const node = button(`chart-tab chart-tab-${tab}`, tab);
+			node.setAttribute("role", "tab");
+			node.addEventListener("click", () => {
+				this.chartTab = tab;
+				this.markChartTab();
+				this.draw();
+			});
+			this.chartTabs[tab] = node;
+			chartTabs.append(node);
+		}
+		this.windowSelect = el("select", "window");
+		this.windowSelect.setAttribute("aria-label", "Window");
+		for (const seconds of WINDOWS) {
+			const option = document.createElement("option");
+			option.value = String(seconds);
+			option.textContent = seconds < 60 ? `${seconds} s` : `${seconds / 60} min`;
+			this.windowSelect.append(option);
+		}
+		this.windowSelect.addEventListener("change", () => {
+			this.draw();
+		});
+		chartTabs.append(this.windowSelect);
+		this.canvas = el("canvas", "chart");
+		const legend = el("div", "legend");
+		const readout = el("p", "readout");
+		this.pages.charts.append(chartTabs, this.canvas, legend, readout);
+		this.charts = createCharts(this.canvas, legend, readout);
+		this.outside = (event) => {
+			if (!event.composedPath().includes(this)) this.hide();
+		};
+		this.refit = () => {
+			this.fit();
+		};
+		this.panel.append(head, this.body);
+		root.append(style, this.toggle, this.panel);
+		this.markTab();
+		this.markChartTab();
+		this.renderLabels();
+	}
+	connectedCallback() {
+		this.toggleAttribute("inline", this.parentElement?.localName !== "mbx-control-bar");
+		const found = findPlayer(this);
+		if (found === null) return;
+		this.cancel?.();
+		this.cancel = whenPlayer(found, (player) => {
+			if (!this.isConnected) return;
+			this.attach(player);
+		});
+	}
+	disconnectedCallback() {
+		this.cancel?.();
+		this.cancel = null;
+		this.detach();
+	}
+	attributeChangedCallback() {
+		this.renderLabels();
+	}
+	attach(player) {
+		this.player = player;
+		this.sampler.attach(player.video, player.engine);
+		const on = (target, name, fn) => {
+			target.addEventListener(name, fn);
+			this.offs.push(() => {
+				target.removeEventListener(name, fn);
+			});
+		};
+		on(player, "sourcechange", () => {
+			this.sampler.attach(player.video, player.engine);
+			this.poll();
+		});
+		on(player, "error", (event) => {
+			if (event.detail.fatal) this.dispatchEvent(new CustomEvent("report", {
+				detail: this.report(),
+				bubbles: true,
+				composed: true
+			}));
+		});
+		this.timer = setInterval(() => {
+			this.poll();
+		}, POLL_MS);
+		this.poll();
+		if (this.hasAttribute("inline")) this.show();
+	}
+	detach() {
+		for (const off of this.offs) off();
+		this.offs = [];
+		clearInterval(this.timer);
+		this.timer = void 0;
+		this.sampler.release();
+		this.hide();
+		this.player = null;
+	}
+	/** The report, as of now. */
+	report() {
+		const player = this.player;
+		if (player === null) throw new Error("mbx-diagnostics is not inside a player");
+		return buildReport({
+			player,
+			samples: this.sampler.samples,
+			marks: this.sampler.marks,
+			counters: this.sampler.counters,
+			history: this.sampler.history,
+			support: this.support
+		});
+	}
+	poll() {
+		const player = this.player;
+		if (player === null) return;
+		this.sampler.poll(player.video, player.engine);
+		if (!this.panel.hidden) this.paint();
+	}
+	show() {
+		if (!this.panel.hidden) return;
+		this.panel.hidden = false;
+		if (!this.hasAttribute("inline")) {
+			this.setAttribute("open", "");
+			this.toggle.setAttribute("aria-expanded", "true");
+			document.addEventListener("pointerdown", this.outside, true);
+			window.addEventListener("resize", this.refit);
+			this.fit();
+		}
+		this.paint();
+		this.drawer = setInterval(() => {
+			this.draw();
+		}, DRAW_MS);
+		if (!this.hasAttribute("inline")) this.tabs[this.tab].focus();
+	}
+	hide() {
+		clearInterval(this.drawer);
+		this.drawer = void 0;
+		if (this.panel.hidden) return;
+		this.panel.hidden = true;
+		this.removeAttribute("open");
+		this.toggle.setAttribute("aria-expanded", "false");
+		document.removeEventListener("pointerdown", this.outside, true);
+		window.removeEventListener("resize", this.refit);
+	}
+	/** The panel never leaves the picture: fitted to the room above the button, within the player's width. */
+	fit() {
+		const player = this.player;
+		if (player === null) return;
+		const box = player.getBoundingClientRect();
+		const host = this.getBoundingClientRect();
+		const top = player.video.getBoundingClientRect().top;
+		const room = host.top - top - AIR;
+		this.panel.style.maxHeight = `${Math.max(120, Math.floor(room))}px`;
+		const width = Math.min(PANEL_WIDTH, Math.max(200, box.width - 16));
+		this.panel.style.width = `${width}px`;
+		const left = Math.max(box.left + AIR, Math.min(host.right - width, box.right - AIR - width));
+		this.panel.style.right = "auto";
+		this.panel.style.left = `${left - host.left}px`;
+	}
+	select(tab) {
+		this.tab = tab;
+		this.markTab();
+		this.tabs[tab].focus();
+		this.paint();
+		this.draw();
+	}
+	markTab() {
+		for (const tab of TABS) {
+			this.tabs[tab].setAttribute("aria-selected", String(tab === this.tab));
+			this.tabs[tab].tabIndex = tab === this.tab ? 0 : -1;
+			this.pages[tab].hidden = tab !== this.tab;
+		}
+	}
+	markChartTab() {
+		for (const tab of CHART_TABS) this.chartTabs[tab].setAttribute("aria-selected", String(tab === this.chartTab));
+	}
+	renderLabels() {
+		this.toggle.setAttribute("aria-label", this.getAttribute("label") ?? "Diagnostics");
+		this.panel.setAttribute("aria-label", this.getAttribute("label") ?? "Diagnostics");
+		if (this.copied === void 0) this.copy.textContent = this.getAttribute("label-copy") ?? "Copy report";
+		const raw = Number(this.getAttribute("window"));
+		const seconds = Number.isFinite(raw) && raw > 0 ? raw : WINDOW;
+		if (!WINDOWS.includes(seconds)) {
+			const option = document.createElement("option");
+			option.value = String(seconds);
+			option.textContent = `${seconds} s`;
+			this.windowSelect.append(option);
+		}
+		this.windowSelect.value = String(seconds);
+	}
+	async copyReport() {
+		const text = JSON.stringify(this.report(), null, 2);
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch {
+			return;
+		}
+		this.copy.textContent = this.getAttribute("label-copied") ?? "Copied";
+		clearTimeout(this.copied);
+		this.copied = setTimeout(() => {
+			this.copied = void 0;
+			this.renderLabels();
+		}, 1500);
+	}
+	/** The colours the charts draw with, off the element's tokens. */
+	palette() {
+		const computed = getComputedStyle(this);
+		const token = (name, fallback) => computed.getPropertyValue(name).trim() || fallback;
+		return {
+			ink: token("--mbx-text", "#f2f3f5"),
+			muted: token("--mbx-muted", "#9aa0a6"),
+			accent: token("--mbx-accent", "#5b8cff"),
+			warn: token("--mbx-chart-3", "#d9a83f"),
+			series: [
+				1,
+				2,
+				3,
+				4,
+				5
+			].map((i) => token(`--mbx-chart-${i}`, "#888"))
+		};
+	}
+	draw() {
+		const player = this.player;
+		if (player === null || this.panel.hidden || this.tab !== "charts") return;
+		this.charts.draw({
+			tab: this.chartTab,
+			window: Number(this.windowSelect.value) || WINDOW,
+			samples: this.sampler.samples,
+			marks: this.sampler.marks,
+			counters: this.sampler.counters,
+			video: player.video,
+			engine: player.engine,
+			palette: this.palette()
+		});
+	}
+	/** The page shown, from the facts of the moment. */
+	paint() {
+		const player = this.player;
+		if (player === null || this.panel.hidden) return;
+		switch (this.tab) {
+			case "playback":
+				this.sections(this.pages.playback, this.playbackSections(player));
+				break;
+			case "engine":
+				this.sections(this.pages.engine, this.engineSections(player.engine));
+				break;
+			case "browser": this.browser();
+		}
+	}
+	playbackSections(player) {
+		const video = player.video;
+		const engine = player.engine;
+		const quality = video.getVideoPlaybackQuality?.();
+		const counters = this.sampler.counters;
+		const last = this.sampler.samples[this.sampler.samples.length - 1];
+		const state = video.paused ? video.ended ? "ended" : "paused" : "playing";
+		const source = [
+			["source", player.getAttribute("src") ?? "–"],
+			["type", player.getAttribute("type") ?? "–"],
+			["handler", player.player?.session?.handler ?? "–"]
+		];
+		if (engine !== null) source.push(["phase", engine.stats.snapshot().lifecycle.phase]);
+		if (player.error !== null) source.push(["error", `${player.error.category}: ${player.error.code}`]);
+		else if (video.error !== null) source.push(["media error", `${video.error.code} ${video.error.message}`]);
+		const playback = [
+			["time", `${clock(video.currentTime)} of ${clock(video.duration)}`],
+			["state", `${state}, ${READY_STATES[video.readyState] ?? video.readyState}, network ${NETWORK_STATES[video.networkState] ?? video.networkState}`],
+			["rate", `${video.playbackRate}×`],
+			["picture", video.videoWidth > 0 ? `${video.videoWidth}×${video.videoHeight}` : "–"],
+			["frames", quality === void 0 ? "–" : `${quality.totalVideoFrames} decoded, ${quality.droppedVideoFrames} dropped (${share(quality.droppedVideoFrames, quality.totalVideoFrames)})`],
+			["buffered", `${fixed(last?.ahead ?? 0)}s ahead: ${ranges(playbackRanges(video))}`],
+			["stalls", `${counters.stalls}, ${counters.stalledSeconds.toFixed(1)}s in total`]
+		];
+		if (engine !== null) {
+			const snapshot = engine.stats.snapshot();
+			playback.push(["throughput", `slow ${bitrate(snapshot.stats.throughputEwma)}, fast ${bitrate(snapshot.stats.throughputFastEwma)}`], ["playing", rendition(engine.quality.playing)], ["switches", String(counters.switches)]);
+		}
+		return [{
+			title: "Source",
+			rows: source
+		}, {
+			title: "Playback",
+			rows: playback
+		}];
+	}
+	engineSections(engine) {
+		if (engine === null) return [{
+			title: null,
+			rows: [],
+			note: "A native session: the browser plays this, and there is no engine to ask."
+		}];
+		const state = engine.stats.snapshot();
+		const optional = engine;
+		const live = state.live;
+		const rows = [
+			["capabilities", [...engine.capabilities()].join(", ") || "none"],
+			["phase", state.lifecycle.phase],
+			["buffer goal", `${state.scheduling.bufferGoal}s`],
+			["throughput", `slow ${bitrate(state.stats.throughputEwma)}, fast ${bitrate(state.stats.throughputFastEwma)}`],
+			["in flight", [...state.scheduling.inflight.values()].map((r) => `${r.trackId} #${r.seq}`).join(", ") || "none"],
+			["live", live === null ? "VOD" : `window ${clock(live.span.start)} to ${clock(live.span.end)}, edge ${clock(live.edge)}${optional.live?.latency === null || optional.live?.latency === void 0 ? "" : `, ${optional.live.latency.toFixed(1)}s behind`}`],
+			["trace", `${engine.stats.trace().length} entries`]
+		];
+		const error = engine.error;
+		if (error !== null) rows.push(["last error", `${error.category}: ${error.code}`]);
+		const buffers = [...state.buffers.entries()].map(([id, buffer]) => [id.replace("sb:", ""), `${buffer.codecs}: ${ranges(buffer.ranges)}${buffer.pendingAppends > 0 ? `, ${buffer.pendingAppends} pending` : ""}`]);
+		const tracks = engine.tracks.available.map((track) => {
+			const active = engine.tracks.active(track.contentType)?.id === track.id;
+			const name = [track.lang, track.role].filter((v) => v !== void 0).join(" · ");
+			return [`${track.contentType}${active ? " ●" : ""}`, `${track.id}${name === "" ? "" : ` (${name})`}, ${track.renditions.length} renditions`];
+		});
+		const playing = engine.quality.playing?.id ?? null;
+		const active = engine.quality.active?.id ?? null;
+		const allowed = new Set(engine.quality.allowed.map((r) => r.id));
+		const renditions = engine.quality.renditions.map((r) => {
+			const flags = [
+				r.id === playing ? "playing" : "",
+				r.id === active && active !== playing ? "next" : "",
+				r.id === engine.quality.pinned ? "pinned" : "",
+				allowed.has(r.id) ? "" : "capped"
+			].filter((f) => f !== "");
+			const text = [
+				r.width !== void 0 && r.height !== void 0 ? `${r.width}×${r.height}` : "",
+				bitrate(r.bitrate),
+				r.frameRate === void 0 ? "" : `${r.frameRate} fps`,
+				r.codecs ?? ""
+			].filter((v) => v !== "").join(", ");
+			return [r.id, `${text}${flags.length > 0 ? ` [${flags.join(", ")}]` : ""}`];
+		});
+		const drm = optional.drm === void 0 ? [] : [["key system", optional.drm.keySystem ?? "none yet"], ["keys", optional.drm.sessions.length === 0 ? "none yet" : optional.drm.sessions.map((s) => `${s.keyId}: ${s.status}`).join(", ")]];
+		return [
+			{
+				title: "Engine",
+				rows
+			},
+			{
+				title: "Source buffers",
+				rows: buffers,
+				note: buffers.length === 0 ? "none yet" : void 0
+			},
+			{
+				title: "Tracks",
+				rows: tracks,
+				note: tracks.length === 0 ? "none yet" : void 0
+			},
+			{
+				title: "Renditions",
+				rows: renditions,
+				note: renditions.length === 0 ? "none yet" : void 0
+			},
+			...optional.drm === void 0 ? [] : [{
+				title: "DRM",
+				rows: drm
+			}]
+		];
+	}
+	/**
+	* Draws sections into a page, reusing what is there: a heading and a
+	* list per section, a row per pair, texts replaced only where they
+	* changed, so a page open for an hour neither flickers nor grows.
+	*/
+	sections(page, sections) {
+		const wanted = sections.flatMap((section) => {
+			const nodes = [];
+			if (section.title !== null) nodes.push(["heading", section.title]);
+			if (section.note !== void 0 && section.rows.length === 0) nodes.push(["note", section.note]);
+			else nodes.push(["rows", section.rows]);
+			return nodes;
+		});
+		while (page.childElementCount > wanted.length) page.lastElementChild?.remove();
+		wanted.forEach(([kind, content], i) => {
+			let node = page.children[i];
+			const tag = kind === "heading" ? "h3" : kind === "note" ? "p" : "dl";
+			if (node === void 0 || node.localName !== tag) {
+				const fresh = el(tag, kind);
+				if (node === void 0) page.append(fresh);
+				else node.replaceWith(fresh);
+				node = fresh;
+			}
+			if (typeof content === "string") {
+				if (node.textContent !== content) node.textContent = content;
+				return;
+			}
+			while (node.childElementCount > content.length * 2) node.lastElementChild?.remove();
+			content.forEach(([key, value], j) => {
+				let dt = node.children[j * 2];
+				let dd = node.children[j * 2 + 1];
+				if (dt === void 0 || dd === void 0) {
+					dt = el("dt", "key");
+					dd = el("dd", "value");
+					node.append(dt, dd);
+				}
+				if (dt.textContent !== key) dt.textContent = key;
+				if (dd.textContent !== value) dd.textContent = value;
+			});
+		});
+	}
+	/** The browser page: probed once, the first time it is shown, then a set of tables. */
+	browser() {
+		const page = this.pages.browser;
+		if (this.support !== null || this.probing) return;
+		this.probing = true;
+		setChildren(page, el("p", "note", "Probing the browser…"));
+		probeSupport().then((support) => {
+			this.support = support;
+			this.probing = false;
+			this.tables(page, support);
+		});
+	}
+	tables(page, support) {
+		setChildren(page);
+		page.append(el("h3", "heading", "Platform"), el("p", "note", support.userAgent));
+		const platform = el("table", "table");
+		for (const row of support.platform) {
+			const tr = document.createElement("tr");
+			const [text, part] = cell(row.value);
+			tr.append(el("th", "cell label", row.label), el("td", part, text));
+			platform.append(tr);
+		}
+		page.append(platform);
+		page.append(el("h3", "heading", "Codecs"));
+		const codecs = el("table", "table");
+		const head = document.createElement("tr");
+		for (const name of [
+			"Codec",
+			"MSE fMP4",
+			"MSE WebM",
+			"<video>",
+			"Smooth",
+			"Efficient"
+		]) head.append(el("th", "cell label", name));
+		codecs.append(head);
+		for (const row of support.codecs) {
+			const tr = document.createElement("tr");
+			const label = el("th", "cell label", row.label);
+			label.title = row.codec;
+			tr.append(label);
+			for (const value of [
+				row.mse,
+				row.webm,
+				row.element,
+				row.smooth,
+				row.efficient
+			]) {
+				const [text, part] = cell(value);
+				tr.append(el("td", part, text));
+			}
+			codecs.append(tr);
+		}
+		page.append(codecs);
+		page.append(el("h3", "heading", "DRM"));
+		const drm = el("table", "table");
+		const drmHead = document.createElement("tr");
+		for (const name of [
+			"System",
+			"Available",
+			"Level",
+			"Schemes",
+			"Persistent",
+			"Identifier",
+			"HDCP"
+		]) drmHead.append(el("th", "cell label", name));
+		drm.append(drmHead);
+		for (const row of support.drm) {
+			const tr = document.createElement("tr");
+			const label = el("th", "cell label", row.label);
+			if (row.keySystem !== null) label.title = row.keySystem;
+			tr.append(label);
+			const values = [
+				row.keySystem === null ? "no" : "yes",
+				row.level,
+				row.schemes,
+				row.persistent,
+				row.identifier,
+				row.hdcp
+			];
+			for (const value of values) {
+				const [text, part] = cell(value);
+				tr.append(el("td", part, text));
+			}
+			drm.append(tr);
+		}
+		page.append(drm);
+	}
+};
 function playbackRanges(video) {
-    return Array.from({ length: video.buffered.length }, (_, i) => ({
-        start: video.buffered.start(i),
-        end: video.buffered.end(i),
-    }));
+	return Array.from({ length: video.buffered.length }, (_, i) => ({
+		start: video.buffered.start(i),
+		end: video.buffered.end(i)
+	}));
 }
+//#endregion
+export { MbxDiagnostics };
+
 //# sourceMappingURL=element.js.map