@mattebox/player 0.1.0 → 0.2.0

package/dist/es2015/controls/menus.js

@@ -1,258 +0,0 @@
-import { el } from "../dom.js";
-import { namespaces } from "../namespaces.js";
-import { icon } from "./icons.js";
-import { menu } from "./menu.js";
-//#region src/controls/menus.ts
-const AUTO = "auto";
-const OFF = "off";
-/** The subtitle looks, as attribute name, choices, and default. */
-const SUBTITLE_SIZE = "subtitle-size";
-const SUBTITLE_BACKGROUND = "subtitle-background";
-const SIZES = [
-	["small", "Small"],
-	["medium", "Medium"],
-	["large", "Large"],
-	["xlarge", "Extra large"]
-];
-const BACKGROUNDS = [
-	["none", "None"],
-	["dark", "Dark"],
-	["solid", "Solid"]
-];
-/** A rendition's height when the manifest declared one, its bitrate otherwise. */
-function renditionLabel(rendition) {
-	if (rendition.height !== void 0) return `${rendition.height}p`;
-	return `${Math.round(rendition.bitrate / 1e3)} kbps`;
-}
-/** The language, then the role, then the id: whichever the manifest gave. */
-function trackLabel(track) {
-	const parts = [track.lang, track.role].filter((part) => part !== void 0);
-	return parts.length === 0 ? track.id : parts.join(" · ");
-}
-/** The quality menu: the pin, where "auto" means none. Hidden without renditions. */
-const qualityMenu = ({ engine }) => {
-	const quality = engine.quality;
-	const control = menu({
-		name: "quality",
-		label: "Quality",
-		icon: "settings"
-	});
-	function render() {
-		var _quality$pinned;
-		const items = [[AUTO, "Auto"]];
-		for (const rendition of quality.renditions) items.push([rendition.id, renditionLabel(rendition)]);
-		control.fill([{
-			name: "rendition",
-			items,
-			value: (_quality$pinned = quality.pinned) !== null && _quality$pinned !== void 0 ? _quality$pinned : AUTO,
-			onSelect(value) {
-				if (value === AUTO) quality.auto();
-				else quality.pin(value);
-				render();
-			}
-		}]);
-		control.root.hidden = quality.renditions.length === 0;
-	}
-	const offs = [
-		engine.on("tracks:changed", render),
-		engine.on("quality:constraints-unsatisfiable", render),
-		engine.on("quality:pin-unsatisfiable", render)
-	];
-	render();
-	return {
-		root: control.root,
-		dispose() {
-			for (const off of offs) off();
-			control.dispose();
-		}
-	};
-};
-/** The tracks of one content type as menu items, with the active one. */
-function trackItems(engine, contentType, off) {
-	var _tracks$active$id, _tracks$active;
-	const tracks = engine.tracks;
-	const available = tracks.available.filter((track) => track.contentType === contentType);
-	const items = off ? [[OFF, "Off"]] : [];
-	for (const track of available) items.push([track.id, trackLabel(track)]);
-	return [
-		items,
-		(_tracks$active$id = (_tracks$active = tracks.active(contentType)) === null || _tracks$active === void 0 ? void 0 : _tracks$active.id) !== null && _tracks$active$id !== void 0 ? _tracks$active$id : OFF,
-		available.length
-	];
-}
-/** The audio menu. Hidden unless there is a choice to make. */
-const audioMenu = ({ engine }) => {
-	const control = menu({
-		name: "audio",
-		label: "Audio",
-		icon: "music"
-	});
-	function render() {
-		const [items, active, count] = trackItems(engine, "audio", false);
-		control.fill([{
-			name: "track",
-			items,
-			value: active,
-			onSelect(value) {
-				engine.tracks.select(value);
-				render();
-			}
-		}]);
-		control.root.hidden = count < 2;
-	}
-	const offs = [engine.on("tracks:changed", render), engine.on("tracks:selected", render)];
-	render();
-	return {
-		root: control.root,
-		dispose() {
-			for (const off of offs) off();
-			control.dispose();
-		}
-	};
-};
-/** An attribute's value where it is one of the choices, else the default. */
-function choice(host, attribute, choices, fallback) {
-	const value = host.getAttribute(attribute);
-	return value !== null && choices.some(([id]) => id === value) ? value : fallback;
-}
-/**
-* The subtitles menu, with "off" because a text selection is releasable
-* and an audio one is not, and a Settings page behind it with the size and
-* the background. The glyph says whether a track is on.
-*/
-const textMenu = ({ engine, host }) => {
-	const control = menu({
-		name: "text",
-		label: "Subtitles",
-		icon: "closed-captions"
-	});
-	function looks(attribute, name, label, choices, fallback) {
-		return {
-			name,
-			label,
-			items: choices,
-			value: choice(host, attribute, choices, fallback),
-			onSelect(value) {
-				host.setAttribute(attribute, value);
-				render();
-			}
-		};
-	}
-	function render() {
-		const [items, active, count] = trackItems(engine, "text", true);
-		control.fill([{
-			name: "track",
-			label: "Track",
-			items,
-			value: active,
-			onSelect(value) {
-				if (value === OFF) engine.tracks.deselect("text");
-				else engine.tracks.select(value);
-				render();
-			}
-		}, {
-			name: "settings",
-			label: "Settings",
-			entries: [looks(SUBTITLE_SIZE, "size", "Size", SIZES, "medium"), looks(SUBTITLE_BACKGROUND, "background", "Background", BACKGROUNDS, "dark")]
-		}]);
-		control.show(active === OFF ? "closed-captions" : "closed-captions-on");
-		control.root.hidden = count === 0;
-	}
-	const offs = [engine.on("tracks:changed", render), engine.on("tracks:selected", render)];
-	render();
-	return {
-		root: control.root,
-		dispose() {
-			for (const off of offs) off();
-			control.dispose();
-		}
-	};
-};
-/** The name a viewer knows a key system by. */
-function keySystemName(id) {
-	if (id.startsWith("com.widevine")) return "Widevine";
-	if (id.startsWith("com.microsoft.playready")) return "PlayReady";
-	if (id.startsWith("com.apple.fps")) return "FairPlay";
-	return id;
-}
-/** "3 keys: usable ×2, expired ×1", or "no key yet". */
-function sessionsText(sessions) {
-	var _counts$get;
-	if (sessions.length === 0) return "no key yet";
-	const counts = /* @__PURE__ */ new Map();
-	for (const session of sessions) counts.set(session.status, ((_counts$get = counts.get(session.status)) !== null && _counts$get !== void 0 ? _counts$get : 0) + 1);
-	const parts = [];
-	for (const [status, count] of counts) parts.push(count > 1 ? `${status} ×${count}` : status);
-	return `${sessions.length} ${sessions.length === 1 ? "key" : "keys"}: ${parts.join(", ")}`;
-}
-/**
-* A lock over `engine.drm`, hidden until a key session opens and absent
-* without the EME stages. Hover or focus shows what it knows: the key
-* system, and the key sessions with their statuses.
-*/
-const drmBadge = ({ engine }) => {
-	const drm = namespaces(engine).drm;
-	const root = el("span", "badge drm-badge");
-	root.setAttribute("role", "img");
-	root.append(icon("lock-closed"));
-	root.hidden = true;
-	if (drm === void 0) return {
-		root,
-		dispose() {}
-	};
-	const tooltip = el("div", "tooltip drm-tooltip");
-	tooltip.setAttribute("role", "tooltip");
-	const system = el("div", "tooltip-title drm-tooltip-title");
-	const id = el("div", "tooltip-text drm-tooltip-id");
-	const keys = el("div", "tooltip-text drm-tooltip-keys");
-	tooltip.append(system, id, keys);
-	tooltip.hidden = true;
-	root.append(tooltip);
-	root.tabIndex = 0;
-	function render() {
-		var _drm$keySystem, _drm$sessions;
-		const name = (_drm$keySystem = drm === null || drm === void 0 ? void 0 : drm.keySystem) !== null && _drm$keySystem !== void 0 ? _drm$keySystem : null;
-		root.hidden = name === null;
-		if (name === null) return;
-		const sessions = (_drm$sessions = drm === null || drm === void 0 ? void 0 : drm.sessions) !== null && _drm$sessions !== void 0 ? _drm$sessions : [];
-		system.textContent = keySystemName(name);
-		id.textContent = name;
-		keys.textContent = sessionsText(sessions);
-		root.setAttribute("aria-label", `Protected by ${keySystemName(name)}, ${sessionsText(sessions)}`);
-	}
-	function show() {
-		tooltip.hidden = false;
-	}
-	function hide() {
-		tooltip.hidden = true;
-	}
-	root.addEventListener("pointerenter", show);
-	root.addEventListener("pointerleave", hide);
-	root.addEventListener("focus", show);
-	root.addEventListener("blur", hide);
-	const offs = [
-		engine.on("drm:keysystem", render),
-		engine.on("drm:keystatus", render),
-		engine.on("drm:encrypted", render)
-	];
-	render();
-	return {
-		root,
-		dispose() {
-			for (const off of offs) off();
-			root.removeEventListener("pointerenter", show);
-			root.removeEventListener("pointerleave", hide);
-			root.removeEventListener("focus", show);
-			root.removeEventListener("blur", hide);
-		}
-	};
-};
-/** By the name the layout knows them by. */
-const MENUS = {
-	subtitles: textMenu,
-	audio: audioMenu,
-	quality: qualityMenu,
-	drm: drmBadge
-};
-//#endregion
-export { MENUS, SUBTITLE_BACKGROUND, SUBTITLE_SIZE, audioMenu, drmBadge, qualityMenu, textMenu };

package/dist/es2015/controls/options.js

@@ -1,46 +0,0 @@
-//#region src/controls/options.ts
-/** The buttons row by default. `drm`, the lock, is a control the row can carry and does not by default. */
-const LAYOUT = "skip-back play skip-forward volume | speed subtitles audio quality pip fullscreen";
-const DEFAULTS = {
-	idleMs: 3e3,
-	seekStep: 5,
-	seekPage: 30,
-	skipBack: 10,
-	skipForward: 10,
-	start: 1,
-	liveWindow: 3,
-	layout: LAYOUT
-};
-/** Each option's attribute. */
-const ATTRIBUTES = {
-	idleMs: "idle-ms",
-	seekStep: "seek-step",
-	seekPage: "seek-page",
-	skipBack: "skip-back",
-	skipForward: "skip-forward",
-	start: "start",
-	liveWindow: "live-window",
-	layout: "layout"
-};
-const NUMERIC = Object.keys(DEFAULTS).filter((key) => key !== "layout");
-/** The attribute where it is a non-negative number, else the option, else the default; the layout as given. */
-function resolve(options, attribute) {
-	var _ref, _attribute;
-	const out = {};
-	for (const key of NUMERIC) {
-		const raw = attribute(ATTRIBUTES[key]);
-		const set = raw === null ? NaN : Number(raw);
-		const given = options === null || options === void 0 ? void 0 : options[key];
-		out[key] = Number.isFinite(set) && set >= 0 ? set : given !== void 0 && Number.isFinite(given) && given >= 0 ? given : DEFAULTS[key];
-	}
-	out.layout = (_ref = (_attribute = attribute(ATTRIBUTES.layout)) !== null && _attribute !== void 0 ? _attribute : options === null || options === void 0 ? void 0 : options.layout) !== null && _ref !== void 0 ? _ref : DEFAULTS.layout;
-	return out;
-}
-/** A layout as two lists of names, left and right of the `|`. Unknown names are the caller's to drop. */
-function clusters(layout) {
-	const [left = "", right = ""] = layout.split("|");
-	const names = (part) => part.split(/\s+/).filter((name) => name !== "");
-	return [names(left), names(right)];
-}
-//#endregion
-export { ATTRIBUTES, DEFAULTS, LAYOUT, clusters, resolve };

package/dist/es2015/controls/screens.js

@@ -1,74 +0,0 @@
-import { el } from "../dom.js";
-import { glyph, icon } from "./icons.js";
-//#region src/controls/screens.ts
-/** `shown` false keeps it out entirely, which is what the `start` knob at zero asks. */
-function startButton(video, flag, shown = true) {
-	const root = el("button", "control start-button");
-	root.type = "button";
-	const svg = icon("play");
-	root.append(svg);
-	function render() {
-		const paused = video.paused;
-		const name = video.ended ? "replay" : "play";
-		glyph(svg, name);
-		root.setAttribute("aria-label", video.ended ? "Replay" : "Play");
-		root.hidden = !shown || !paused;
-		flag("paused", paused);
-	}
-	function click() {
-		video.play().catch(() => void 0);
-	}
-	const names = [
-		"play",
-		"pause",
-		"ended",
-		"emptied"
-	];
-	root.addEventListener("click", click);
-	for (const name of names) video.addEventListener(name, render);
-	render();
-	return {
-		root,
-		dispose() {
-			root.removeEventListener("click", click);
-			for (const name of names) video.removeEventListener(name, render);
-			root.remove();
-		}
-	};
-}
-function errorScreen(retry) {
-	const root = el("div", "error-screen");
-	root.setAttribute("role", "alert");
-	const box = el("div", "error-box");
-	const title = el("div", "error-title", "Playback failed");
-	const category = el("span", "value error-category");
-	const code = el("span", "value error-code");
-	const detail = el("div", "error-detail");
-	detail.append(category, el("span", "error-separator", " · "), code);
-	const button = el("button", "control error-retry", "Retry");
-	button.type = "button";
-	button.addEventListener("click", retry);
-	box.append(title, detail, button);
-	root.append(box);
-	root.hidden = true;
-	return {
-		root,
-		show(error) {
-			category.textContent = error.category;
-			code.textContent = error.code;
-			root.hidden = false;
-		},
-		clear() {
-			root.hidden = true;
-		},
-		shown() {
-			return !root.hidden;
-		},
-		dispose() {
-			button.removeEventListener("click", retry);
-			root.remove();
-		}
-	};
-}
-//#endregion
-export { errorScreen, startButton };

package/dist/es2015/controls/seek.js

@@ -1,203 +0,0 @@
-import { el } from "../dom.js";
-import { EMPTY, at, clip, fraction, spans, window } from "./ranges.js";
-import { slider } from "./slider.js";
-import { clock, describe, format } from "./time.js";
-//#region src/controls/seek.ts
-/** What the tile scales down to when the page sets no `--mbx-preview-width`. */
-const PREVIEW_WIDTH = 160;
-/** The buffer goal assumed for a session that reports none. */
-const BUFFER_GOAL = 30;
-/** The events on which the row re-reads the video. */
-const EVENTS = [
-	"timeupdate",
-	"progress",
-	"durationchange",
-	"loadedmetadata",
-	"seeking",
-	"seeked",
-	"emptied"
-];
-function percent(part) {
-	return `${part * 100}%`;
-}
-function seekBar(video, flag, options) {
-	let source = {};
-	let span = EMPTY;
-	let pending = null;
-	let frame = 0;
-	function isLive() {
-		const live = source.live;
-		return live !== void 0 && live.edge !== null;
-	}
-	/** The wall clock at a presentation time, when the session can say it. */
-	function wall(time) {
-		var _source$pdt$toWallClo, _source$pdt;
-		const epoch = (_source$pdt$toWallClo = (_source$pdt = source.pdt) === null || _source$pdt === void 0 ? void 0 : _source$pdt.toWallClock(time)) !== null && _source$pdt$toWallClo !== void 0 ? _source$pdt$toWallClo : null;
-		return epoch === null ? null : clock(epoch);
-	}
-	/** What a screen reader hears at a time. */
-	function say(time) {
-		if (!isLive()) return describe(time, span.end);
-		const behind = `${format(span.end - time)} behind live`;
-		const at = wall(time);
-		return at === null ? behind : `${at}, ${behind}`;
-	}
-	/** What the preview and the time show at a time. */
-	function label(time) {
-		var _wall;
-		if (!isLive()) return format(time);
-		return (_wall = wall(time)) !== null && _wall !== void 0 ? _wall : `-${format(span.end - time)}`;
-	}
-	function flush() {
-		frame = 0;
-		if (pending === null) return;
-		video.currentTime = pending;
-		pending = null;
-	}
-	const current = el("span", "current-time", "0:00");
-	const duration = el("span", "duration", "0:00");
-	const bar = slider({
-		name: "seek",
-		label: "Seek",
-		step: options.seekStep,
-		page: options.seekPage,
-		onInput(value) {
-			bar.set(value, say(value));
-			current.textContent = label(value);
-			if (!bar.dragging()) {
-				pending = null;
-				video.currentTime = value;
-				return;
-			}
-			pending = value;
-			if (frame === 0) frame = requestAnimationFrame(flush);
-		}
-	});
-	const root = el("div", "row seek-row");
-	root.append(current, bar.root, duration);
-	const buffered = el("div", "buffered seek-buffered");
-	const hover = el("div", "hover seek-hover");
-	const edge = el("div", "edge seek-edge");
-	hover.hidden = true;
-	edge.hidden = true;
-	bar.track.prepend(buffered);
-	bar.track.append(hover, edge);
-	const preview = el("div", "preview seek-preview");
-	const image = el("div", "preview-image seek-preview-image");
-	const tile = el("div", "preview-tile seek-preview-tile");
-	const time = el("span", "preview-time seek-preview-time");
-	image.append(tile);
-	image.hidden = true;
-	preview.append(image, time);
-	preview.hidden = true;
-	bar.root.append(preview);
-	/** The width the page asked for through the token, or the default. */
-	function previewWidth() {
-		const set = Number.parseFloat(getComputedStyle(preview).getPropertyValue("--mbx-preview-width"));
-		return Number.isFinite(set) && set > 0 ? set : PREVIEW_WIDTH;
-	}
-	/** The tile for a time, if the track has one, drawn at its size and scaled to fit. */
-	function paintTile(when) {
-		var _source$thumbnails$at, _source$thumbnails;
-		const found = (_source$thumbnails$at = (_source$thumbnails = source.thumbnails) === null || _source$thumbnails === void 0 ? void 0 : _source$thumbnails.at(when)) !== null && _source$thumbnails$at !== void 0 ? _source$thumbnails$at : null;
-		image.hidden = found === null;
-		if (found === null) return;
-		const scale = previewWidth() / found.width;
-		image.style.width = `${found.width * scale}px`;
-		image.style.height = `${found.height * scale}px`;
-		tile.style.width = `${found.width}px`;
-		tile.style.height = `${found.height}px`;
-		tile.style.backgroundImage = `url("${found.url}")`;
-		tile.style.backgroundPosition = `-${found.x}px -${found.y}px`;
-		tile.style.transform = `scale(${scale})`;
-	}
-	function paintBuffered() {
-		var _buffered$lastElement;
-		const parts = clip(spans(video.buffered), span);
-		while (buffered.childElementCount > parts.length) (_buffered$lastElement = buffered.lastElementChild) === null || _buffered$lastElement === void 0 || _buffered$lastElement.remove();
-		while (buffered.childElementCount < parts.length) buffered.append(el("div", "buffered-range seek-buffered-range"));
-		let i = 0;
-		for (const child of buffered.children) {
-			const part = parts[i];
-			i += 1;
-			if (part === void 0) break;
-			const node = child;
-			node.style.left = percent(part[0]);
-			node.style.width = percent(part[1] - part[0]);
-		}
-	}
-	/** Whether a live window is wide enough to be worth a bar. */
-	function worthSeeking() {
-		var _source$bufferGoal, _source$bufferGoal2;
-		if (options.liveWindow === 0) return true;
-		const goal = (_source$bufferGoal = (_source$bufferGoal2 = source.bufferGoal) === null || _source$bufferGoal2 === void 0 ? void 0 : _source$bufferGoal2.call(source)) !== null && _source$bufferGoal !== void 0 ? _source$bufferGoal : BUFFER_GOAL;
-		return span.end - span.start >= options.liveWindow * goal;
-	}
-	function tick() {
-		var _source$window, _source$window2;
-		const on = isLive();
-		const own = on ? (_source$window = (_source$window2 = source.window) === null || _source$window2 === void 0 ? void 0 : _source$window2.call(source)) !== null && _source$window !== void 0 ? _source$window : null : null;
-		span = own !== null && own.end > own.start ? own : window(video.duration, spans(video.seekable), on);
-		bar.range(span.start, span.end);
-		paintBuffered();
-		const live = source.live;
-		edge.hidden = !on;
-		if (on && live !== void 0 && live.edge !== null) edge.style.left = percent(fraction(live.edge, span));
-		const seekable = !on || worthSeeking();
-		bar.root.hidden = !seekable;
-		current.hidden = !seekable;
-		duration.hidden = on;
-		flag("live", on);
-		flag("seekable", seekable);
-		if (!on) duration.textContent = format(span.end);
-		if (!bar.dragging()) {
-			bar.set(video.currentTime, say(video.currentTime));
-			current.textContent = label(video.currentTime);
-		}
-	}
-	/** The hover marker and the preview follow the pointer, clamped to the bar. */
-	function point(event) {
-		const rect = bar.rail.getBoundingClientRect();
-		if (rect.width === 0 || span.end <= span.start) return;
-		const part = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
-		hover.hidden = false;
-		hover.style.left = percent(part);
-		preview.hidden = false;
-		const when = at(part, span);
-		time.textContent = label(when);
-		paintTile(when);
-		const whole = bar.root.getBoundingClientRect();
-		const half = preview.offsetWidth / 2;
-		const x = rect.left - whole.left + part * rect.width;
-		preview.style.left = `${Math.min(whole.width - half, Math.max(half, x))}px`;
-	}
-	function leave() {
-		hover.hidden = true;
-		preview.hidden = true;
-	}
-	bar.root.addEventListener("pointermove", point);
-	bar.root.addEventListener("pointerleave", leave);
-	for (const name of EVENTS) video.addEventListener(name, tick);
-	tick();
-	return {
-		root,
-		attach(found) {
-			source = found;
-			tick();
-		},
-		detach() {
-			source = {};
-			leave();
-			tick();
-		},
-		dispose() {
-			cancelAnimationFrame(frame);
-			bar.root.removeEventListener("pointermove", point);
-			bar.root.removeEventListener("pointerleave", leave);
-			for (const name of EVENTS) video.removeEventListener(name, tick);
-			bar.dispose();
-		}
-	};
-}
-//#endregion
-export { seekBar };

package/dist/es2015/controls/speed.js

@@ -1,41 +0,0 @@
-import { menu } from "./menu.js";
-//#region src/controls/speed.ts
-const RATES = [
-	.5,
-	.75,
-	1,
-	1.25,
-	1.5,
-	2
-];
-function speedMenu(video) {
-	const control = menu({
-		name: "speed",
-		label: "Playback speed",
-		icon: "playback-speed"
-	});
-	function render() {
-		const items = RATES.map((rate) => [String(rate), rate === 1 ? "Normal" : `${rate}×`]);
-		const current = String(video.playbackRate);
-		if (!RATES.some((rate) => String(rate) === current)) items.push([current, `${current}×`]);
-		control.fill([{
-			name: "rate",
-			items,
-			value: current,
-			onSelect(value) {
-				video.playbackRate = Number(value);
-			}
-		}]);
-	}
-	video.addEventListener("ratechange", render);
-	render();
-	return {
-		root: control.root,
-		dispose() {
-			video.removeEventListener("ratechange", render);
-			control.dispose();
-		}
-	};
-}
-//#endregion
-export { speedMenu };

package/dist/es2015/controls/volume.js

@@ -1,30 +0,0 @@
-import { slider } from "./slider.js";
-//#region src/controls/volume.ts
-function volumeSlider(video) {
-	const bar = slider({
-		name: "volume",
-		label: "Volume",
-		step: .05,
-		page: .2,
-		onInput(value) {
-			video.volume = value;
-			if (value > 0) video.muted = false;
-		}
-	});
-	bar.range(0, 1);
-	function render() {
-		const level = video.muted ? 0 : video.volume;
-		bar.set(level, `${Math.round(level * 100)}%`);
-	}
-	video.addEventListener("volumechange", render);
-	render();
-	return {
-		root: bar.root,
-		dispose() {
-			video.removeEventListener("volumechange", render);
-			bar.dispose();
-		}
-	};
-}
-//#endregion
-export { volumeSlider };

package/dist/es2015/panels/drm.js

@@ -1,29 +0,0 @@
-import { el } from "../dom.js";
-import { namespaces } from "../namespaces.js";
-//#region src/panels/drm.ts
-const drmPanel = (session) => {
-	const engine = session.engine;
-	if (engine === null) return null;
-	const found = namespaces(engine).drm;
-	if (found === void 0) return null;
-	const drm = found;
-	const root = el("div", "panel drm");
-	root.append(el("span", "text drm-text", "DRM"));
-	const keySystem = el("span", "value drm-key-system");
-	root.append(keySystem);
-	function render() {
-		const name = drm.keySystem;
-		keySystem.textContent = name !== null && name !== void 0 ? name : "";
-		root.hidden = name === null;
-	}
-	const off = engine.on("drm:keysystem", render);
-	render();
-	return {
-		root,
-		dispose() {
-			off();
-		}
-	};
-};
-//#endregion
-export { drmPanel };