@mattebox/player-diagnostics 0.1.0

package/dist/element.js

@@ -0,0 +1,677 @@
+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';
+const POLL_MS = 500;
+const DRAW_MS = 250;
+const WINDOW = 120;
+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 TAB_NAMES = {
+    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'];
+function el(tag, part, text) {
+    const node = document.createElement(tag);
+    node.setAttribute('part', part);
+    if (text !== undefined)
+        node.textContent = text;
+    return node;
+}
+function button(part, text) {
+    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);
+    }
+}
+function playbackRanges(video) {
+    return Array.from({ length: video.buffered.length }, (_, i) => ({
+        start: video.buffered.start(i),
+        end: video.buffered.end(i),
+    }));
+}
+//# sourceMappingURL=element.js.map