@mattebox/player 0.1.0 → 0.3.0

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

@@ -0,0 +1,314 @@
+import { el } from "../dom.js";
+import { fill } from "../labels.js";
+import { Component } from "./component.js";
+import { SLIDER_STYLE, number, seekRow, style } from "./shared.js";
+import { chapterAt, chapters, followChapters } from "../controls/chapters.js";
+import { format } from "../controls/time.js";
+import { EMPTY, at, clip, fraction } from "../controls/ranges.js";
+import { bufferGoal, live, optional, span, wall } from "../controls/session.js";
+import { slider } from "../controls/slider.js";
+//#region src/elements/seek-bar.ts
+const STEP = 5;
+const PAGE = 30;
+const LIVE_WINDOW = 3;
+/** 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 gap cut at a chapter boundary, in pixels. */
+const GAP = 2;
+const EVENTS = [
+	"timeupdate",
+	"progress",
+	"durationchange",
+	"loadedmetadata",
+	"seeking",
+	"seeked",
+	"emptied"
+];
+const STYLE = `${SLIDER_STYLE}
+:host { flex: 1; }
+[part~="slider"] { flex: 1; }
+[part~="thumb"] { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
+[part~="buffered"] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
+[part~="buffered-range"] { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.3); }
+[part~="hover"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-text); }
+[part~="edge"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-live); }
+[part~="preview"] {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 4px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  background: var(--mbx-surface);
+  border-radius: var(--mbx-radius);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: none;
+}
+[part~="preview-image"] { position: relative; overflow: hidden; border-radius: 2px; }
+[part~="preview-tile"] { position: absolute; top: 0; left: 0; transform-origin: top left; background-repeat: no-repeat; }
+[part~="preview-time"] { padding: 0 4px; }
+[part~="preview-title"] { max-width: 240px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; }
+[hidden] { display: none; }
+`;
+function percent(part) {
+	return `${part * 100}%`;
+}
+/**
+* A mask that cuts a gap at each boundary between chapters, as stops along
+* the track: opaque up to a boundary, clear for the gap, opaque after.
+*/
+function gaps(list, span) {
+	const stops = ["#000 0"];
+	for (const chapter of list.slice(1)) {
+		const at = percent(fraction(chapter.start, span));
+		const before = `calc(${at} - ${GAP / 2}px)`;
+		const after = `calc(${at} + ${GAP / 2}px)`;
+		stops.push(`#000 ${before}`, `transparent ${before}`, `transparent ${after}`, `#000 ${after}`);
+	}
+	stops.push("#000 100%");
+	return `linear-gradient(to right, ${stops.join(", ")})`;
+}
+var MbxSeekBar = class extends Component {
+	static get observedAttributes() {
+		return [
+			"label",
+			"label-of",
+			"label-behind",
+			"live-window",
+			"chapters"
+		];
+	}
+	constructor() {
+		super();
+		this.range = EMPTY;
+		this.pending = null;
+		this.frame = 0;
+		this.divided = "";
+		this.list = [];
+		const root = this.attachShadow({ mode: "open" });
+		this.bar = slider({
+			step: () => number(this, "step", STEP),
+			page: () => number(this, "page", PAGE),
+			onInput: (value) => {
+				this.input(value);
+			},
+			onDrag: (on) => {
+				this.toggleAttribute("dragging", on);
+			}
+		});
+		this.buffered = el("div", "buffered");
+		this.hover = el("div", "hover");
+		this.edge = el("div", "edge");
+		this.hover.hidden = true;
+		this.edge.hidden = true;
+		this.bar.track.prepend(this.buffered);
+		this.bar.track.append(this.hover, this.edge);
+		this.preview = el("div", "preview");
+		this.image = el("div", "preview-image");
+		this.tile = el("div", "preview-tile");
+		this.time = el("span", "preview-time");
+		this.caption = el("span", "preview-title");
+		this.caption.hidden = true;
+		this.image.append(this.tile);
+		this.image.hidden = true;
+		this.preview.append(this.image, this.caption, this.time);
+		this.preview.hidden = true;
+		this.bar.root.append(this.preview);
+		this.bar.root.addEventListener("pointermove", (event) => {
+			this.point(event);
+		});
+		this.bar.root.addEventListener("pointerleave", () => {
+			this.leave();
+		});
+		root.append(style(STYLE), this.bar.root);
+	}
+	connectedCallback() {
+		seekRow(this);
+		super.connectedCallback();
+	}
+	isLive() {
+		var _this$player$engine, _this$player;
+		return 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) !== void 0;
+	}
+	/** Whether the chapters divide the track and name the preview. */
+	chaptered() {
+		return this.getAttribute("chapters") !== "none" && this.list.length > 0;
+	}
+	/** The gaps at the chapter boundaries, on every layer of the track at once. */
+	paintChapters() {
+		const mask = this.chaptered() && this.list.length > 1 ? gaps(this.list, this.range) : "";
+		const key = `${mask}|${this.range.start}|${this.range.end}`;
+		if (key === this.divided) return;
+		this.divided = key;
+		const track = this.bar.track.style;
+		track.setProperty("mask-image", mask === "" ? "" : mask);
+		track.setProperty("-webkit-mask-image", mask === "" ? "" : mask);
+	}
+	/** What a screen reader hears at a time. */
+	say(time) {
+		var _this$player$engine2, _this$player2, _this$getAttribute2;
+		const engine = (_this$player$engine2 = (_this$player2 = this.player) === null || _this$player2 === void 0 ? void 0 : _this$player2.engine) !== null && _this$player$engine2 !== void 0 ? _this$player$engine2 : null;
+		if (!this.isLive()) {
+			var _this$getAttribute;
+			const template = (_this$getAttribute = this.getAttribute("label-of")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "{current} of {duration}";
+			return Number.isFinite(this.range.end) && this.range.end > 0 ? fill(template, {
+				current: format(time),
+				duration: format(this.range.end)
+			}) : format(time);
+		}
+		const behind = fill((_this$getAttribute2 = this.getAttribute("label-behind")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "{time} behind live", { time: format(this.range.end - time) });
+		const clock = wall(engine, time);
+		return clock === null ? behind : `${clock}, ${behind}`;
+	}
+	/** What the preview shows at a time. */
+	label(time) {
+		var _wall, _this$player$engine3, _this$player3;
+		if (!this.isLive()) return format(time);
+		return (_wall = wall((_this$player$engine3 = (_this$player3 = this.player) === null || _this$player3 === void 0 ? void 0 : _this$player3.engine) !== null && _this$player$engine3 !== void 0 ? _this$player$engine3 : null, time)) !== null && _wall !== void 0 ? _wall : `-${format(this.range.end - time)}`;
+	}
+	input(value) {
+		var _this$player4;
+		const video = (_this$player4 = this.player) === null || _this$player4 === void 0 ? void 0 : _this$player4.video;
+		if (video === void 0) return;
+		this.bar.set(value, this.say(value));
+		if (!this.bar.dragging()) {
+			this.pending = null;
+			video.currentTime = value;
+			return;
+		}
+		this.pending = value;
+		if (this.frame === 0) this.frame = requestAnimationFrame(() => {
+			this.flush();
+		});
+	}
+	flush() {
+		var _this$player5;
+		this.frame = 0;
+		const video = (_this$player5 = this.player) === null || _this$player5 === void 0 ? void 0 : _this$player5.video;
+		if (this.pending === null || video === void 0) return;
+		video.currentTime = this.pending;
+		this.pending = null;
+	}
+	/** The width the page asked for through the token, or the default. */
+	previewWidth() {
+		const set = Number.parseFloat(getComputedStyle(this.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. */
+	paintTile(when) {
+		var _optional$thumbnails$, _optional$thumbnails, _this$player$engine4, _this$player6;
+		const found = (_optional$thumbnails$ = (_optional$thumbnails = optional((_this$player$engine4 = (_this$player6 = this.player) === null || _this$player6 === void 0 ? void 0 : _this$player6.engine) !== null && _this$player$engine4 !== void 0 ? _this$player$engine4 : null).thumbnails) === null || _optional$thumbnails === void 0 ? void 0 : _optional$thumbnails.at(when)) !== null && _optional$thumbnails$ !== void 0 ? _optional$thumbnails$ : null;
+		this.image.hidden = found === null;
+		if (found === null) return;
+		const scale = this.previewWidth() / found.width;
+		this.image.style.width = `${found.width * scale}px`;
+		this.image.style.height = `${found.height * scale}px`;
+		this.tile.style.width = `${found.width}px`;
+		this.tile.style.height = `${found.height}px`;
+		this.tile.style.backgroundImage = `url("${found.url}")`;
+		this.tile.style.backgroundPosition = `-${found.x}px -${found.y}px`;
+		this.tile.style.transform = `scale(${scale})`;
+	}
+	paintBuffered(video) {
+		var _buffered$lastElement;
+		const parts = clip(Array.from({ length: video.buffered.length }, (_, i) => ({
+			start: video.buffered.start(i),
+			end: video.buffered.end(i)
+		})), this.range);
+		const buffered = this.buffered;
+		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"));
+		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. */
+	worthSeeking() {
+		var _bufferGoal, _this$player$engine5, _this$player7;
+		const goals = number(this, "live-window", LIVE_WINDOW);
+		if (goals === 0) return true;
+		const goal = (_bufferGoal = bufferGoal((_this$player$engine5 = (_this$player7 = this.player) === null || _this$player7 === void 0 ? void 0 : _this$player7.engine) !== null && _this$player$engine5 !== void 0 ? _this$player$engine5 : null)) !== null && _bufferGoal !== void 0 ? _bufferGoal : BUFFER_GOAL;
+		return this.range.end - this.range.start >= goals * goal;
+	}
+	/** The hover marker and the preview follow the pointer, clamped to the bar. */
+	point(event) {
+		var _chapter$title;
+		const rect = this.bar.rail.getBoundingClientRect();
+		if (rect.width === 0 || this.range.end <= this.range.start) return;
+		const part = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+		this.hover.hidden = false;
+		this.hover.style.left = percent(part);
+		this.preview.hidden = false;
+		const when = at(part, this.range);
+		this.time.textContent = this.label(when);
+		const chapter = this.chaptered() ? this.list[chapterAt(this.list, when)] : void 0;
+		this.caption.hidden = chapter === void 0 || chapter.title === "";
+		this.caption.textContent = (_chapter$title = chapter === null || chapter === void 0 ? void 0 : chapter.title) !== null && _chapter$title !== void 0 ? _chapter$title : "";
+		this.paintTile(when);
+		const whole = this.bar.root.getBoundingClientRect();
+		const half = this.preview.offsetWidth / 2;
+		const x = rect.left - whole.left + part * rect.width;
+		this.preview.style.left = `${Math.min(whole.width - half, Math.max(half, x))}px`;
+	}
+	leave() {
+		this.hover.hidden = true;
+		this.preview.hidden = true;
+	}
+	attach(player) {
+		const tick = () => {
+			this.render();
+		};
+		this.listen(player.video, EVENTS, tick);
+		this.keep(followChapters(player.video, tick));
+		this.listen(player, ["sourcechange"], () => {
+			this.leave();
+			this.render();
+		});
+		this.render();
+	}
+	detach(player) {
+		cancelAnimationFrame(this.frame);
+		this.frame = 0;
+		this.pending = null;
+		this.leave();
+		player.removeAttribute("live");
+		player.removeAttribute("seekable");
+	}
+	render() {
+		var _this$getAttribute3;
+		const player = this.player;
+		if (player === null) return;
+		const video = player.video;
+		const engine = player.engine;
+		const api = live(engine);
+		const on = api !== void 0;
+		this.range = span(video, engine);
+		this.list = chapters(video);
+		this.bar.label((_this$getAttribute3 = this.getAttribute("label")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "Seek");
+		this.bar.range(this.range.start, this.range.end);
+		this.paintBuffered(video);
+		this.paintChapters();
+		this.edge.hidden = !on;
+		if (api !== void 0 && api.edge !== null) this.edge.style.left = percent(fraction(api.edge, this.range));
+		const seekable = !on || this.worthSeeking();
+		this.hidden = !seekable;
+		player.toggleAttribute("live", on);
+		player.toggleAttribute("seekable", seekable);
+		if (!this.bar.dragging()) this.bar.set(video.currentTime, this.say(video.currentTime));
+	}
+};
+//#endregion
+export { MbxSeekBar };

package/dist/es2015/elements/shared.js

@@ -0,0 +1,155 @@
+//#region src/elements/shared.ts
+/**
+* The style every button control shares. Each element carries its own
+* copy in its shadow root, so the rules are short and the tokens come
+* through the `--mbx-*` custom properties the player sets, which inherit
+* through light DOM into every control.
+*
+* Nothing carries `!important`: a page's `::part()` rule must win.
+*/
+const BUTTON_STYLE = `
+:host { display: inline-flex; }
+:host([hidden]) { display: none; }
+[part~="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  opacity: 0.9;
+}
+[part~="button"]:hover { opacity: 1; }
+[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
+slot[hidden] { display: none; }
+`;
+/** The style of a slider: the rail, the track with its fill, and the thumb. */
+const SLIDER_STYLE = `
+:host { display: block; }
+:host([hidden]) { display: none; }
+[part~="slider"] {
+  position: relative;
+  height: 40px;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  touch-action: none;
+}
+[part~="slider"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="rail"] { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }
+[part~="track"] {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.35);
+  border-radius: 2px;
+  overflow: hidden;
+}
+[part~="fill"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }
+[part~="thumb"] {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  margin: -6px 0 0 -6px;
+  border-radius: 50%;
+  background: var(--mbx-text);
+  pointer-events: none;
+}
+`;
+/** A non-negative number from an attribute, else the default. */
+function number(node, name, fallback) {
+	const raw = node.getAttribute(name);
+	const value = raw === null ? NaN : Number(raw);
+	return Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+/** The style of a menu: the button from BUTTON_STYLE, and the popup above it with its items. */
+const MENU_STYLE = `${BUTTON_STYLE}
+:host { position: relative; }
+[part~="popup"] {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 8px;
+  min-width: 160px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: rgba(16, 17, 20, 0.95);
+  border-radius: var(--mbx-radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  font-size: 14px;
+}
+[part~="popup"][hidden] { display: none; }
+[part~="section"] { display: flex; flex-direction: column; }
+[part~="section"] + [part~="section"] { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
+[part~="section-label"] { padding: 4px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mbx-muted); }
+[part~="item"] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 12px 8px 28px;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+}
+[part~="item"]:hover { background: rgba(255, 255, 255, 0.12); }
+[part~="item-detail"] { margin-left: auto; color: var(--mbx-muted); font-variant-numeric: tabular-nums; }
+[part~="item"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="page-item"] { position: relative; padding-right: 28px; }
+[part~="page-item"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: 0.7; }
+[part~="back-item"] { position: relative; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; margin-bottom: 6px; }
+[part~="back-item"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 0 0 1.5px; transform: rotate(-45deg); opacity: 0.7; }
+[part~="checked"] { position: relative; }
+[part~="checked"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mbx-accent); }
+`;
+/** Puts a control in the bar's seek row when it is in a bar, unless the page wrote a `slot` of its own. */
+function seekRow(node) {
+	var _node$parentElement;
+	if (((_node$parentElement = node.parentElement) === null || _node$parentElement === void 0 ? void 0 : _node$parentElement.localName) === "mbx-control-bar" && !node.hasAttribute("slot")) node.slot = "seek";
+}
+/** A `<style>` with `text`, for a shadow root. */
+function style(text) {
+	const node = document.createElement("style");
+	node.textContent = text;
+	return node;
+}
+/**
+* A named slot per state with the default glyph as its fallback, so a page
+* drops its own SVG into `slot="icon-<state>"` and the button keeps the
+* name. Returns the slots by state; `show` hides all but one.
+*/
+function iconSlots(states, fallback) {
+	const out = {};
+	for (const state of states) {
+		const slot = document.createElement("slot");
+		slot.name = `icon-${state}`;
+		slot.append(fallback(state));
+		slot.hidden = true;
+		out[state] = slot;
+	}
+	return out;
+}
+function show(slots, state) {
+	for (const key of Object.keys(slots)) slots[key].hidden = key !== state;
+}
+//#endregion
+export { BUTTON_STYLE, MENU_STYLE, SLIDER_STYLE, iconSlots, number, seekRow, show, style };

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

@@ -0,0 +1,59 @@
+import { icon } from "../controls/icons.js";
+import { fill } from "../labels.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, style } from "./shared.js";
+//#region src/elements/skip-button.ts
+const SECONDS = 10;
+/** The glyph for a skip amount: the set draws 10 and 30, and a plain arrow says the rest. */
+function glyphFor(back, amount) {
+	const side = back ? "seek-backward" : "seek-forward";
+	if (amount === 10 || amount === 30) return `${side}-${amount}`;
+	return side;
+}
+var MbxSkipButton = class extends Component {
+	static get observedAttributes() {
+		return ["seconds", "label"];
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.setAttribute("part", "button");
+		this.glyph = document.createElement("slot");
+		this.glyph.name = "icon";
+		this.button.append(this.glyph);
+		this.button.addEventListener("click", () => {
+			this.skip();
+		});
+		root.append(style(BUTTON_STYLE), this.button);
+	}
+	/** The amount, signed. A value that is not a number is the default. */
+	seconds() {
+		var _this$getAttribute;
+		const value = Number((_this$getAttribute = this.getAttribute("seconds")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : SECONDS);
+		return Number.isFinite(value) ? value : SECONDS;
+	}
+	skip() {
+		var _this$player;
+		const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+		if (video === void 0) return;
+		const ranges = video.seekable;
+		const end = Number.isFinite(video.duration) ? video.duration : ranges.length > 0 ? ranges.end(ranges.length - 1) : video.currentTime;
+		video.currentTime = Math.min(end, Math.max(0, video.currentTime + this.seconds()));
+	}
+	attach(_player) {
+		this.render();
+	}
+	render() {
+		var _this$getAttribute2;
+		const seconds = this.seconds();
+		const back = seconds < 0;
+		const amount = Math.abs(seconds);
+		this.glyph.replaceChildren(icon(glyphFor(back, amount)));
+		const template = (_this$getAttribute2 = this.getAttribute("label")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : back ? "Back {seconds} seconds" : "Forward {seconds} seconds";
+		this.button.setAttribute("aria-label", fill(template, { seconds: amount }));
+	}
+};
+//#endregion
+export { MbxSkipButton };

package/dist/es2015/elements/spacer.js

@@ -0,0 +1,11 @@
+import { style } from "./shared.js";
+//#region src/elements/spacer.ts
+/** <mbx-spacer>: takes the room in a row, so what follows sits at the far end. */
+var MbxSpacer = class extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" }).append(style(":host { display: block; flex: 1 1 auto; }"));
+	}
+};
+//#endregion
+export { MbxSpacer };

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

@@ -0,0 +1,60 @@
+import { show } from "./shared.js";
+import { MenuElement, single } from "./menu-element.js";
+//#region src/elements/speed-menu.ts
+const RATES = [
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2
+];
+var MbxSpeedMenu = class extends MenuElement {
+	static get observedAttributes() {
+		return [
+			"rates",
+			"label",
+			"label-normal",
+			"label-back"
+		];
+	}
+	constructor() {
+		super(...single("playback-speed"));
+		show(this.slots, "default");
+	}
+	name() {
+		return "Playback speed";
+	}
+	rates() {
+		const raw = this.getAttribute("rates");
+		if (raw === null) return RATES;
+		const out = raw.split(/\s+/).map(Number).filter((rate) => Number.isFinite(rate) && rate > 0);
+		return out.length === 0 ? RATES : out;
+	}
+	attach(player) {
+		this.listen(player.video, ["ratechange"], () => {
+			this.render();
+		});
+		this.render();
+	}
+	render() {
+		var _this$player, _this$getAttribute;
+		super.render();
+		const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+		if (video === void 0) return;
+		const normal = (_this$getAttribute = this.getAttribute("label-normal")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Normal";
+		const items = this.rates().map((rate) => [String(rate), rate === 1 ? normal : `${rate}×`]);
+		const current = String(video.playbackRate);
+		if (!items.some(([id]) => id === current)) items.push([current, `${current}×`]);
+		this.menu.fill([{
+			name: "rate",
+			items,
+			value: current,
+			onSelect: (value) => {
+				video.playbackRate = Number(value);
+			}
+		}]);
+	}
+};
+//#endregion
+export { MbxSpeedMenu };