@mattebox/player-diagnostics 0.1.0

package/dist/es2015/element.js

@@ -0,0 +1,651 @@
+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 _asyncToGenerator from "./_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/asyncToGenerator.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 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 !== void 0) 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"];
+	}
+}
+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() {
+		var _this$parentElement, _this$cancel;
+		this.toggleAttribute("inline", ((_this$parentElement = this.parentElement) === null || _this$parentElement === void 0 ? void 0 : _this$parentElement.localName) !== "mbx-control-bar");
+		const found = findPlayer(this);
+		if (found === null) return;
+		(_this$cancel = this.cancel) === null || _this$cancel === void 0 || _this$cancel.call(this);
+		this.cancel = whenPlayer(found, (player) => {
+			if (!this.isConnected) return;
+			this.attach(player);
+		});
+	}
+	disconnectedCallback() {
+		var _this$cancel2;
+		(_this$cancel2 = this.cancel) === null || _this$cancel2 === void 0 || _this$cancel2.call(this);
+		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() {
+		var _this$getAttribute, _this$getAttribute2;
+		this.toggle.setAttribute("aria-label", (_this$getAttribute = this.getAttribute("label")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Diagnostics");
+		this.panel.setAttribute("aria-label", (_this$getAttribute2 = this.getAttribute("label")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Diagnostics");
+		if (this.copied === void 0) {
+			var _this$getAttribute3;
+			this.copy.textContent = (_this$getAttribute3 = this.getAttribute("label-copy")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "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);
+	}
+	copyReport() {
+		var _this = this;
+		return _asyncToGenerator(function* () {
+			var _this$getAttribute4;
+			const text = JSON.stringify(_this.report(), null, 2);
+			try {
+				yield navigator.clipboard.writeText(text);
+			} catch (_unused) {
+				return;
+			}
+			_this.copy.textContent = (_this$getAttribute4 = _this.getAttribute("label-copied")) !== null && _this$getAttribute4 !== void 0 ? _this$getAttribute4 : "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) {
+		var _video$getVideoPlayba, _player$getAttribute, _player$getAttribute2, _player$player$sessio, _player$player, _READY_STATES$video$r, _NETWORK_STATES$video, _last$ahead;
+		const video = player.video;
+		const engine = player.engine;
+		const quality = (_video$getVideoPlayba = video.getVideoPlaybackQuality) === null || _video$getVideoPlayba === void 0 ? void 0 : _video$getVideoPlayba.call(video);
+		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 = player.getAttribute("src")) !== null && _player$getAttribute !== void 0 ? _player$getAttribute : "–"],
+			["type", (_player$getAttribute2 = player.getAttribute("type")) !== null && _player$getAttribute2 !== void 0 ? _player$getAttribute2 : "–"],
+			["handler", (_player$player$sessio = (_player$player = player.player) === null || _player$player === void 0 || (_player$player = _player$player.session) === null || _player$player === void 0 ? void 0 : _player$player.handler) !== null && _player$player$sessio !== void 0 ? _player$player$sessio : "–"]
+		];
+		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$r = READY_STATES[video.readyState]) !== null && _READY_STATES$video$r !== void 0 ? _READY_STATES$video$r : video.readyState}, network ${(_NETWORK_STATES$video = NETWORK_STATES[video.networkState]) !== null && _NETWORK_STATES$video !== void 0 ? _NETWORK_STATES$video : 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 = last === null || last === void 0 ? void 0 : last.ahead) !== null && _last$ahead !== void 0 ? _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) {
+		var _optional$live, _optional$live2, _engine$quality$playi, _engine$quality$playi2, _engine$quality$activ, _engine$quality$activ2, _optional$drm$keySyst;
+		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 = optional.live) === null || _optional$live === void 0 ? void 0 : _optional$live.latency) === null || ((_optional$live2 = optional.live) === null || _optional$live2 === void 0 ? void 0 : _optional$live2.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) => {
+			var _engine$tracks$active;
+			const active = ((_engine$tracks$active = engine.tracks.active(track.contentType)) === null || _engine$tracks$active === void 0 ? void 0 : _engine$tracks$active.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$playi = (_engine$quality$playi2 = engine.quality.playing) === null || _engine$quality$playi2 === void 0 ? void 0 : _engine$quality$playi2.id) !== null && _engine$quality$playi !== void 0 ? _engine$quality$playi : null;
+		const active = (_engine$quality$activ = (_engine$quality$activ2 = engine.quality.active) === null || _engine$quality$activ2 === void 0 ? void 0 : _engine$quality$activ2.id) !== null && _engine$quality$activ !== void 0 ? _engine$quality$activ : null;
+		const allowed = new Set(engine.quality.allowed.map((r) => r.id));
+		const renditions = engine.quality.renditions.map((r) => {
+			var _r$codecs;
+			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 = r.codecs) !== null && _r$codecs !== void 0 ? _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$keySyst = optional.drm.keySystem) !== null && _optional$drm$keySyst !== void 0 ? _optional$drm$keySyst : "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) {
+		var _page$lastElementChil;
+		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$lastElementChil = page.lastElementChild) === null || _page$lastElementChil === void 0 || _page$lastElementChil.remove();
+		wanted.forEach(([kind, content], i) => {
+			var _node$lastElementChil;
+			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$lastElementChil = node.lastElementChild) === null || _node$lastElementChil === void 0 || _node$lastElementChil.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;
+		page.replaceChildren(el("p", "note", "Probing the browser…"));
+		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)
+	}));
+}
+//#endregion
+export { MbxDiagnostics };

package/dist/es2015/format.js

@@ -0,0 +1,38 @@
+//#region src/format.ts
+/** The numbers as the panel and the charts print them. Pure. */
+/** Bits per second as "3.2 Mbps", "640 kbps" or "0 bps". */
+function bitrate(bps) {
+	if (!Number.isFinite(bps) || bps <= 0) return "0 bps";
+	if (bps >= 1e6) return `${(bps / 1e6).toFixed(bps >= 1e7 ? 0 : 1)} Mbps`;
+	if (bps >= 1e3) return `${Math.round(bps / 1e3)} kbps`;
+	return `${Math.round(bps)} bps`;
+}
+/** Seconds as "m:ss", or "h:mm:ss" from an hour up. Anything not finite reads as "–". */
+function clock(seconds) {
+	if (!Number.isFinite(seconds)) return "–";
+	const total = Math.max(0, Math.floor(seconds));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const rest = total % 60;
+	const pad = (n) => n < 10 ? `0${n}` : `${n}`;
+	return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;
+}
+/** A number with `digits` decimals, and "–" when it is not one. */
+function fixed(value, digits = 1) {
+	return value === null || value === void 0 || !Number.isFinite(value) ? "–" : value.toFixed(digits);
+}
+/** A share as "1.23%", zero when there is no whole. */
+function share(part, whole) {
+	return whole > 0 ? `${(part / whole * 100).toFixed(2)}%` : "0%";
+}
+/** Time ranges as "0.0–12.3, 40.0–52.1". */
+function ranges(list) {
+	return list.length === 0 ? "none" : list.map((range) => `${range.start.toFixed(1)}–${range.end.toFixed(1)}`).join(", ");
+}
+/** A rendition's name: its height, else its bitrate. */
+function rendition(r) {
+	if (r === null) return "–";
+	return r.height !== void 0 ? `${r.height}p, ${bitrate(r.bitrate)}` : bitrate(r.bitrate);
+}
+//#endregion
+export { bitrate, clock, fixed, ranges, rendition, share };