@mattebox/player 0.1.0 → 0.2.0

package/dist/es2015/elements/control-bar.js

@@ -0,0 +1,178 @@
+import { Component } from "./component.js";
+import { number, style } from "./shared.js";
+import { cueLift, cueStyle } from "../controls/cues.js";
+import { fullscreen } from "../controls/fullscreen.js";
+//#region src/elements/control-bar.ts
+const IDLE_MS = 3e3;
+const SEEK_STEP = 5;
+const STYLE = `
+:host {
+  position: absolute;
+  inset: auto 0 0 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 40px 16px 12px;
+  color: var(--mbx-text);
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+  font: 500 16px/1.2 var(--mbx-font);
+  transition: opacity 0.2s;
+}
+:host([idle]) { opacity: 0; pointer-events: none; }
+[part~="row"] { display: flex; align-items: center; gap: 8px; }
+[part~="seek-row"] { gap: 16px; }
+@media (prefers-reduced-motion: reduce) {
+  :host { transition: none; }
+}
+`;
+function end(video) {
+	if (Number.isFinite(video.duration)) return video.duration;
+	const ranges = video.seekable;
+	return ranges.length > 0 ? ranges.end(ranges.length - 1) : video.currentTime;
+}
+function toggle(video) {
+	if (video.paused) video.play().catch(() => void 0);
+	else video.pause();
+}
+var MbxControlBar = class extends Component {
+	static get observedAttributes() {
+		return ["idle-ms", "seek-step"];
+	}
+	constructor() {
+		super();
+		this.timer = void 0;
+		this.keyboard = false;
+		this.cues = null;
+		this.screen = null;
+		const root = this.attachShadow({ mode: "open" });
+		this.seekRow = document.createElement("div");
+		this.seekRow.setAttribute("part", "row seek-row");
+		const seek = document.createElement("slot");
+		seek.name = "seek";
+		this.seekRow.append(seek);
+		const buttons = document.createElement("div");
+		buttons.setAttribute("part", "row buttons-row");
+		buttons.append(document.createElement("slot"));
+		root.append(style(STYLE), this.seekRow, buttons);
+	}
+	/** From the first row's top to the bar's bottom: what the bar covers of the picture. */
+	covered() {
+		return {
+			top: this.seekRow.getBoundingClientRect().top,
+			bottom: this.getBoundingClientRect().bottom
+		};
+	}
+	held(player) {
+		if (player.video.paused) return true;
+		if (this.querySelector("[open]") !== null) return true;
+		if (!this.keyboard) return false;
+		const active = this.getRootNode().activeElement;
+		return active !== null && this.contains(active);
+	}
+	idle(player, on) {
+		var _this$cues;
+		if (this.hasAttribute("idle") === on) return;
+		this.toggleAttribute("idle", on);
+		player.toggleAttribute("idle", on);
+		(_this$cues = this.cues) === null || _this$cues === void 0 || _this$cues.lifted(!on);
+	}
+	sleep(player) {
+		this.timer = void 0;
+		if (this.held(player)) {
+			this.timer = setTimeout(() => this.sleep(player), number(this, "idle-ms", IDLE_MS));
+			return;
+		}
+		this.idle(player, true);
+	}
+	wake(player) {
+		clearTimeout(this.timer);
+		this.idle(player, false);
+		this.timer = setTimeout(() => this.sleep(player), number(this, "idle-ms", IDLE_MS));
+	}
+	key(player, event) {
+		this.keyboard = true;
+		this.wake(player);
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		const video = player.video;
+		const onButton = event.composedPath()[0] instanceof HTMLButtonElement;
+		switch (event.key) {
+			case " ":
+				if (onButton) return;
+				toggle(video);
+				break;
+			case "k":
+			case "K":
+				toggle(video);
+				break;
+			case "m":
+			case "M":
+				video.muted = !video.muted;
+				break;
+			case "f":
+			case "F":
+				var _this$screen;
+				(_this$screen = this.screen) === null || _this$screen === void 0 || _this$screen.toggle();
+				break;
+			case "ArrowLeft":
+				video.currentTime = Math.max(0, video.currentTime - number(this, "seek-step", SEEK_STEP));
+				break;
+			case "ArrowRight":
+				video.currentTime = Math.min(end(video), video.currentTime + number(this, "seek-step", SEEK_STEP));
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	}
+	attach(player) {
+		const video = player.video;
+		cueStyle();
+		this.cues = cueLift(video, player, () => this.covered());
+		const screen = fullscreen(player, video);
+		this.screen = screen;
+		const reflect = () => {
+			player.toggleAttribute("fullscreen", screen.active());
+		};
+		this.keep(screen.watch(reflect));
+		reflect();
+		const pointer = () => {
+			this.keyboard = false;
+			this.wake(player);
+		};
+		const key = (event) => {
+			this.key(player, event);
+		};
+		const click = (event) => {
+			if (event.composedPath()[0] === video) toggle(video);
+		};
+		this.listen(player, ["pointermove", "pointerdown"], pointer);
+		player.addEventListener("keydown", key);
+		player.addEventListener("click", click);
+		this.keep(() => {
+			player.removeEventListener("keydown", key);
+			player.removeEventListener("click", click);
+		});
+		this.listen(video, [
+			"play",
+			"pause",
+			"ended"
+		], () => {
+			this.wake(player);
+		});
+		this.wake(player);
+		this.cues.lifted(true);
+	}
+	detach(player) {
+		var _this$cues2;
+		clearTimeout(this.timer);
+		this.timer = void 0;
+		(_this$cues2 = this.cues) === null || _this$cues2 === void 0 || _this$cues2.dispose();
+		this.cues = null;
+		this.screen = null;
+		this.removeAttribute("idle");
+		player.removeAttribute("idle");
+		player.removeAttribute("fullscreen");
+	}
+};
+//#endregion
+export { MbxControlBar };

package/dist/es2015/elements/current-time.js

@@ -0,0 +1,27 @@
+import { format } from "../controls/time.js";
+import { live, span, wall } from "../controls/session.js";
+import { TimeElement } from "./time-element.js";
+//#region src/elements/current-time.ts
+/**
+* <mbx-current-time>: the position, "1:23". On a live stream it reads the
+* wall clock when `engine.pdt` can say it, "14:23:05", which is what a
+* viewer of a broadcast wants to know, and the distance behind the edge
+* otherwise, "-0:10". While the player says the stream is live but not
+* seekable, which the seek bar decides, there is no position to show and
+* the element hides.
+*/
+var MbxCurrentTime = class extends TimeElement {
+	render() {
+		var _wall;
+		const player = this.player;
+		if (player === null) return;
+		const video = player.video;
+		const engine = player.engine;
+		const on = live(engine) !== void 0;
+		const time = video.currentTime;
+		this.text.data = on ? (_wall = wall(engine, time)) !== null && _wall !== void 0 ? _wall : `-${format(span(video, engine).end - time)}` : format(time);
+		this.hidden = on && player.hasAttribute("live") && !player.hasAttribute("seekable");
+	}
+};
+//#endregion
+export { MbxCurrentTime };

package/dist/es2015/elements/drm-badge.js

@@ -0,0 +1,138 @@
+import { namespaces } from "../namespaces.js";
+import { el } from "../dom.js";
+import { icon } from "../controls/icons.js";
+import { fill } from "../labels.js";
+import { Component } from "./component.js";
+import { style } from "./shared.js";
+//#region src/elements/drm-badge.ts
+const STYLE = `
+:host { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--mbx-muted); border-radius: var(--mbx-radius); cursor: default; }
+:host([hidden]) { display: none; }
+:host(:focus-visible) { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
+[part~="tooltip"] {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 8px;
+  padding: 8px 10px;
+  background: rgba(16, 17, 20, 0.95);
+  border-radius: var(--mbx-radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  color: var(--mbx-text);
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: left;
+  white-space: nowrap;
+  pointer-events: none;
+}
+[part~="tooltip"][hidden] { display: none; }
+[part~="tooltip-title"] { font-weight: 600; }
+[part~="tooltip-text"] { color: var(--mbx-muted); }
+`;
+/** 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;
+}
+var MbxDrmBadge = class extends Component {
+	static get observedAttributes() {
+		return [
+			"label",
+			"label-key",
+			"label-keys",
+			"label-no-key"
+		];
+	}
+	constructor() {
+		super();
+		this.engine = null;
+		const root = this.attachShadow({ mode: "open" });
+		const slot = document.createElement("slot");
+		slot.name = "icon";
+		slot.append(icon("lock-closed"));
+		this.tooltip = el("div", "tooltip");
+		this.tooltip.setAttribute("role", "tooltip");
+		this.system = el("div", "tooltip-title");
+		this.system_id = el("div", "tooltip-text");
+		this.keys = el("div", "tooltip-text");
+		this.tooltip.append(this.system, this.system_id, this.keys);
+		this.tooltip.hidden = true;
+		root.append(style(STYLE), slot, this.tooltip);
+		const show = () => {
+			this.tooltip.hidden = false;
+		};
+		const hide = () => {
+			this.tooltip.hidden = true;
+		};
+		this.addEventListener("pointerenter", show);
+		this.addEventListener("pointerleave", hide);
+		this.addEventListener("focus", show);
+		this.addEventListener("blur", hide);
+	}
+	/** Named and focusable before attaching: a constructor must not add attributes. */
+	connectedCallback() {
+		if (!this.hasAttribute("role")) this.setAttribute("role", "img");
+		if (!this.hasAttribute("tabindex")) this.tabIndex = 0;
+		if (this.player === null) this.hidden = true;
+		super.connectedCallback();
+	}
+	/** "3 keys: usable ×2, expired", or "no key yet". */
+	sessionsText(sessions) {
+		var _this$getAttribute, _this$getAttribute2, _this$getAttribute3;
+		if (sessions.length === 0) return (_this$getAttribute = this.getAttribute("label-no-key")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "no key yet";
+		const counts = /* @__PURE__ */ new Map();
+		for (const session of sessions) {
+			var _counts$get;
+			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);
+		const template = sessions.length === 1 ? (_this$getAttribute2 = this.getAttribute("label-key")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "{count} key: {statuses}" : (_this$getAttribute3 = this.getAttribute("label-keys")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "{count} keys: {statuses}";
+		return fill(template, {
+			count: sessions.length,
+			statuses: parts.join(", ")
+		});
+	}
+	attach(player) {
+		this.follow(player, (engine) => {
+			this.engine = engine;
+			this.render();
+			if (engine === null || namespaces(engine).drm === void 0) return void 0;
+			const tick = () => {
+				this.render();
+			};
+			const offs = [
+				engine.on("drm:keysystem", tick),
+				engine.on("drm:keystatus", tick),
+				engine.on("drm:encrypted", tick)
+			];
+			return () => {
+				for (const off of offs) off();
+			};
+		});
+	}
+	detach() {
+		this.tooltip.hidden = true;
+	}
+	render() {
+		var _drm$keySystem, _this$getAttribute4;
+		const drm = this.engine === null ? void 0 : namespaces(this.engine).drm;
+		const name = (_drm$keySystem = drm === null || drm === void 0 ? void 0 : drm.keySystem) !== null && _drm$keySystem !== void 0 ? _drm$keySystem : null;
+		this.hidden = name === null;
+		if (drm === void 0 || name === null) return;
+		const keys = this.sessionsText(drm.sessions);
+		const system = keySystemName(name);
+		this.system.textContent = system;
+		this.system_id.textContent = name;
+		this.keys.textContent = keys;
+		this.setAttribute("aria-label", fill((_this$getAttribute4 = this.getAttribute("label")) !== null && _this$getAttribute4 !== void 0 ? _this$getAttribute4 : "Protected by {system}, {keys}", {
+			system,
+			keys
+		}));
+	}
+};
+//#endregion
+export { MbxDrmBadge };

package/dist/es2015/elements/duration.js

@@ -0,0 +1,23 @@
+import { format } from "../controls/time.js";
+import { live, span } from "../controls/session.js";
+import { TimeElement } from "./time-element.js";
+//#region src/elements/duration.ts
+/**
+* <mbx-duration>: the duration, "4:56", once the metadata is in. A live
+* stream has none, so the element hides while the stream is live.
+*/
+var MbxDuration = class extends TimeElement {
+	constructor() {
+		super(":host { text-align: right; }");
+	}
+	render() {
+		const player = this.player;
+		if (player === null) return;
+		const engine = player.engine;
+		const on = live(engine) !== void 0;
+		this.hidden = on;
+		if (!on) this.text.data = format(span(player.video, engine).end);
+	}
+};
+//#endregion
+export { MbxDuration };

package/dist/es2015/elements/error-screen.js

@@ -0,0 +1,97 @@
+import { el } from "../dom.js";
+import { Component } from "./component.js";
+import { style } from "./shared.js";
+//#region src/elements/error-screen.ts
+const STYLE = `
+:host {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.75);
+  color: var(--mbx-text);
+  font: 400 15px/1.4 var(--mbx-font);
+  text-align: center;
+}
+:host([hidden]) { display: none; }
+[part~="box"] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+[part~="title"] { font-size: 18px; font-weight: 600; }
+[part~="detail"] { font-family: monospace; font-size: 13px; color: var(--mbx-error); }
+[part~="retry"] {
+  height: 36px;
+  padding: 0 16px;
+  font: inherit;
+  font-weight: 600;
+  color: inherit;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+}
+[part~="retry"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+`;
+var MbxErrorScreen = class extends Component {
+	static get observedAttributes() {
+		return ["label-title", "label-retry"];
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		const box = el("div", "box");
+		this.title_ = el("div", "title");
+		this.category = el("span", "category");
+		this.code = el("span", "code");
+		const detail = el("div", "detail");
+		detail.append(this.category, el("span", "separator", " · "), this.code);
+		this.retry = el("button", "retry");
+		this.retry.type = "button";
+		this.retry.addEventListener("click", () => {
+			const player = this.player;
+			const src = player === null || player === void 0 ? void 0 : player.getAttribute("src");
+			if (player !== null && player !== void 0 && src !== null && src !== void 0) player.setAttribute("src", src);
+		});
+		box.append(this.title_, detail, this.retry);
+		root.append(style(STYLE), box);
+	}
+	/** Hidden and named before attaching: a constructor must not add attributes. */
+	connectedCallback() {
+		if (this.player === null) this.hidden = true;
+		if (!this.hasAttribute("role")) this.setAttribute("role", "alert");
+		super.connectedCallback();
+	}
+	show(error) {
+		this.category.textContent = error.category;
+		this.code.textContent = error.code;
+		this.hidden = false;
+	}
+	attach(player) {
+		const failure = (event) => {
+			const error = event.detail;
+			if (error.fatal) this.show(error);
+		};
+		player.addEventListener("error", failure);
+		this.keep(() => {
+			player.removeEventListener("error", failure);
+		});
+		this.listen(player.video, ["playing", "loadstart"], () => {
+			this.hidden = true;
+		});
+		this.listen(player, ["sourcechange"], () => {
+			this.hidden = true;
+		});
+		if (player.error !== null) this.show(player.error);
+		this.render();
+	}
+	detach() {
+		this.hidden = true;
+	}
+	render() {
+		var _this$getAttribute, _this$getAttribute2;
+		this.title_.textContent = (_this$getAttribute = this.getAttribute("label-title")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Playback failed";
+		this.retry.textContent = (_this$getAttribute2 = this.getAttribute("label-retry")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Retry";
+	}
+};
+//#endregion
+export { MbxErrorScreen };

package/dist/es2015/elements/fullscreen-button.js

@@ -0,0 +1,49 @@
+import { icon } from "../controls/icons.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+import { fullscreen } from "../controls/fullscreen.js";
+//#region src/elements/fullscreen-button.ts
+const STATES = ["enter", "exit"];
+var MbxFullscreenButton = class extends Component {
+	static get observedAttributes() {
+		return ["label-enter", "label-exit"];
+	}
+	constructor() {
+		super();
+		this.api = null;
+		const root = this.attachShadow({ mode: "open" });
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.setAttribute("part", "button");
+		this.slots = iconSlots(STATES, (state) => icon(state === "enter" ? "fullscreen" : "fullscreen-exit"));
+		for (const state of STATES) this.button.append(this.slots[state]);
+		this.button.addEventListener("click", () => {
+			var _this$api;
+			(_this$api = this.api) === null || _this$api === void 0 || _this$api.toggle();
+		});
+		root.append(style(BUTTON_STYLE), this.button);
+	}
+	attach(player) {
+		const api = fullscreen(player, player.video);
+		this.api = api;
+		this.hidden = !api.supported;
+		this.keep(api.watch(() => {
+			this.render();
+		}));
+		this.render();
+	}
+	detach() {
+		this.api = null;
+	}
+	render() {
+		var _this$getAttribute, _this$getAttribute2;
+		const player = this.player;
+		if (player === null || this.api === null) return;
+		const active = this.api.active();
+		show(this.slots, active ? "exit" : "enter");
+		this.button.setAttribute("aria-label", active ? (_this$getAttribute = this.getAttribute("label-exit")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Exit fullscreen" : (_this$getAttribute2 = this.getAttribute("label-enter")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Enter fullscreen");
+		player.toggleAttribute("fullscreen", active);
+	}
+};
+//#endregion
+export { MbxFullscreenButton };

package/dist/es2015/elements/live-button.js

@@ -0,0 +1,97 @@
+import { el } from "../dom.js";
+import { Component } from "./component.js";
+import { seekRow, style } from "./shared.js";
+import { live } from "../controls/session.js";
+//#region src/elements/live-button.ts
+/**
+* <mbx-live-button>: a dot and the word, the dot red at the edge and grey
+* behind it, the way viewers read it everywhere. Shown once the stream has
+* an availability window, which is what makes it live; disabled at the
+* edge, where there is nowhere to go; a click seeks to the edge, the one
+* engine write the row makes. The element carries `at-edge` meanwhile.
+*
+* Without a seek bar, when the player says the stream is not seekable,
+* there is nowhere to come back from either: the dot stays red and the
+* button stays inert, whatever the playhead does. The word comes from
+* `text`, the name from `label-live` and `label-at-edge`. It sits in the
+* bar's seek row unless the page says otherwise.
+*/
+const STYLE = `
+:host { display: inline-flex; }
+:host([hidden]) { display: none; }
+[part~="button"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 8px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  opacity: 0.9;
+}
+[part~="button"]:hover { opacity: 1; }
+[part~="button"]:disabled { cursor: default; opacity: 1; }
+[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="dot"] { width: 10px; height: 10px; border-radius: 50%; background: var(--mbx-muted); transition: background 0.2s; }
+:host([at-edge]) [part~="dot"] { background: var(--mbx-live); box-shadow: 0 0 6px var(--mbx-live); }
+@media (prefers-reduced-motion: reduce) {
+  [part~="dot"] { transition: none; }
+}
+`;
+var MbxLiveButton = class extends Component {
+	static get observedAttributes() {
+		return [
+			"text",
+			"label-live",
+			"label-at-edge"
+		];
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.button = el("button", "button");
+		this.button.type = "button";
+		this.text = el("span", "text");
+		this.button.append(el("span", "dot"), this.text);
+		this.button.addEventListener("click", () => {
+			var _live, _this$player$engine, _this$player;
+			(_live = live((_this$player$engine = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.engine) !== null && _this$player$engine !== void 0 ? _this$player$engine : null)) === null || _live === void 0 || _live.seekToEdge();
+		});
+		root.append(style(STYLE), this.button);
+	}
+	connectedCallback() {
+		seekRow(this);
+		super.connectedCallback();
+	}
+	attach(player) {
+		const tick = () => {
+			this.render();
+		};
+		this.listen(player.video, ["timeupdate", "emptied"], tick);
+		this.listen(player, ["sourcechange"], tick);
+		this.observe(player, ["live", "seekable"], tick);
+		this.render();
+	}
+	render() {
+		var _this$getAttribute, _this$getAttribute2, _this$getAttribute3;
+		const player = this.player;
+		if (player === null) return;
+		const api = live(player.engine);
+		this.hidden = api === void 0;
+		this.text.textContent = (_this$getAttribute = this.getAttribute("text")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "LIVE";
+		if (api === void 0) return;
+		const atEdge = player.hasAttribute("live") && !player.hasAttribute("seekable") || api.atEdge;
+		this.button.disabled = atEdge;
+		this.toggleAttribute("at-edge", atEdge);
+		this.button.setAttribute("aria-label", atEdge ? (_this$getAttribute2 = this.getAttribute("label-at-edge")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "At the live edge" : (_this$getAttribute3 = this.getAttribute("label-live")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "Go to the live edge");
+	}
+};
+//#endregion
+export { MbxLiveButton };

package/dist/es2015/elements/menu-element.js

@@ -0,0 +1,39 @@
+import { icon } from "../controls/icons.js";
+import { menu } from "../controls/menu.js";
+import { fill } from "../labels.js";
+import { Component } from "./component.js";
+import { MENU_STYLE, iconSlots, style } from "./shared.js";
+//#region src/elements/menu-element.ts
+var MenuElement = class extends Component {
+	constructor(states, glyphs) {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.menu = menu({
+			host: this,
+			ceiling: () => {
+				var _this$player$video$ge, _this$player;
+				return (_this$player$video$ge = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video.getBoundingClientRect().top) !== null && _this$player$video$ge !== void 0 ? _this$player$video$ge : null;
+			},
+			back: (page) => {
+				var _this$getAttribute;
+				return fill((_this$getAttribute = this.getAttribute("label-back")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Back from {page}", { page });
+			}
+		});
+		this.slots = iconSlots(states, glyphs);
+		for (const state of states) this.menu.button.append(this.slots[state]);
+		root.append(style(MENU_STYLE), this.menu.button, this.menu.popup);
+	}
+	detach() {
+		this.menu.close();
+	}
+	render() {
+		var _this$getAttribute2;
+		this.menu.label((_this$getAttribute2 = this.getAttribute("label")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : this.name());
+	}
+};
+/** A glyph that never changes, for a menu of one state. */
+function single(name) {
+	return [["default"], () => icon(name)];
+}
+//#endregion
+export { MenuElement, single };