@mattebox/player 0.1.0 → 0.3.0

package/dist/es2015/controls/menu.js

@@ -1,5 +1,5 @@
 import { el, state } from "../dom.js";
-import { glyph, icon } from "./icons.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
 //#region src/controls/menu.ts
 /**
 * The menu primitive the quality, audio, subtitles and speed menus share: a
@@ -7,8 +7,9 @@ import { glyph, icon } from "./icons.js";
 * with a heading each, and pages behind entries that open them. The button
 * carries the name and `aria-expanded`; the popup is `role="menu"`, every
 * choice a `menuitemradio` with `aria-checked`, the checked one also
-* carrying `checked` on its part name; an entry that opens a page is a
-* `menuitem` with `aria-haspopup`, and the page starts with a Back.
+* carrying `checked` on its part name, because an item inside a shadow
+* root has no other seam a page can style; an entry that opens a page is
+* a `menuitem` with `aria-haspopup`, and the page starts with a Back.
 *
 * Open on click. Inside, the arrows move focus across every item, Home and
 * End jump, Enter and Space choose, Escape goes back a page or closes and
@@ -16,29 +17,26 @@ import { glyph, icon } from "./icons.js";
 * anywhere else closes it too.
 *
 * The popup never leaves the picture: on opening it takes the room above
-* the button inside the stage as its height and scrolls past that.
+* the button down to `ceiling()` as its height and scrolls past that. The
+* element that owns the menu carries `open` while the popup shows, which
+* the bar reads to hold its fade.
 */
-/** Air between the popup's top and the stage's. */
+/** Air between the popup's top and the picture's. */
 const AIR = 8;
 function isPage(entry) {
 	return "entries" in entry;
 }
 function menu(options) {
-	const { name } = options;
-	const root = el("div", `menu ${name}-menu`);
-	const button = el("button", `control ${name}-button`);
+	const { host } = options;
+	const button = el("button", "button");
 	button.type = "button";
-	button.setAttribute("aria-label", options.label);
 	button.setAttribute("aria-haspopup", "menu");
 	button.setAttribute("aria-expanded", "false");
-	const svg = icon(options.icon);
-	button.append(svg);
-	const popup = el("div", `popup ${name}-popup`);
+	const popup = el("div", "popup");
 	popup.setAttribute("role", "menu");
-	popup.setAttribute("aria-label", options.label);
 	popup.hidden = true;
-	root.append(button, popup);
 	let open = false;
+	let name = "";
 	let first = [];
 	/** The pages opened, the first being the menu itself. */
 	let stack = [];
@@ -54,13 +52,13 @@ function menu(options) {
 		return popup.getRootNode().activeElement;
 	}
 	function outside(event) {
-		if (!event.composedPath().includes(root)) close();
+		if (!event.composedPath().includes(host)) close();
 	}
-	/** Whatever room there is above the button inside the stage, so the popup never leaves the picture. */
+	/** Whatever room there is above the button down to the ceiling, so the popup never leaves the picture. */
 	function fit() {
-		const stage = root.closest("[part~=\"stage\"]");
-		if (stage === null) return;
-		const room = button.getBoundingClientRect().top - stage.getBoundingClientRect().top - AIR;
+		const top = options.ceiling();
+		if (top === null) return;
+		const room = button.getBoundingClientRect().top - top - AIR;
 		popup.style.maxHeight = `${Math.max(0, Math.floor(room))}px`;
 	}
 	function clear() {
@@ -85,19 +83,19 @@ function menu(options) {
 		if (page === void 0) return;
 		let tab = true;
 		if (stack.length > 1) {
-			const back = item(`item back-item ${name}-back-item`, page.label, () => {
+			const back = item("item back-item", page.label, () => {
 				var _items$;
 				stack.pop();
 				render();
 				(_items$ = items()[0]) === null || _items$ === void 0 || _items$.focus();
 			});
 			back.setAttribute("role", "menuitem");
-			back.setAttribute("aria-label", `Back from ${page.label}`);
+			back.setAttribute("aria-label", options.back(page.label));
 			popup.append(back);
 		}
 		for (const entry of page.entries) {
 			if (isPage(entry)) {
-				const link = item(`item page-item ${name}-${entry.name}-item`, entry.label, () => {
+				const link = item(`item page-item ${entry.name}-item`, entry.label, () => {
 					var _items$2;
 					stack.push(entry);
 					render();
@@ -108,23 +106,24 @@ function menu(options) {
 				popup.append(link);
 				continue;
 			}
-			const section = el("div", `section ${name}-${entry.name}-section`);
+			const section = el("div", `section ${entry.name}-section`);
 			section.setAttribute("role", "group");
 			if (entry.label !== void 0) {
 				section.setAttribute("aria-label", entry.label);
-				section.append(el("div", `section-label ${name}-${entry.name}-label`, entry.label));
+				section.append(el("div", `section-label ${entry.name}-label`, entry.label));
 			}
-			for (const [id, text] of entry.items) {
-				const choice = item(`item ${name}-item ${name}-${entry.name}-item`, text, () => {
+			for (const [id, text, detail] of entry.items) {
+				const choice = item(`item ${entry.name}-item`, text, () => {
 					close();
 					button.focus();
 					entry.onSelect(id);
 				});
+				if (detail !== void 0) choice.append(el("span", "item-detail", detail));
 				choice.value = id;
 				choice.setAttribute("role", "menuitemradio");
 				const on = id === entry.value;
 				choice.setAttribute("aria-checked", String(on));
-				state(choice, `item ${name}-item ${name}-${entry.name}-item`, { checked: on });
+				state(choice, `item ${entry.name}-item`, { checked: on });
 				if (on && tab) {
 					choice.tabIndex = 0;
 					tab = false;
@@ -140,7 +139,7 @@ function menu(options) {
 		open = false;
 		popup.hidden = true;
 		button.setAttribute("aria-expanded", "false");
-		state(root, `menu ${name}-menu`, { open: false });
+		host.removeAttribute("open");
 		document.removeEventListener("pointerdown", outside, true);
 		if (stack.length > 1) {
 			stack = stack.slice(0, 1);
@@ -153,7 +152,7 @@ function menu(options) {
 		open = true;
 		popup.hidden = false;
 		button.setAttribute("aria-expanded", "true");
-		state(root, `menu ${name}-menu`, { open: true });
+		host.setAttribute("open", "");
 		document.addEventListener("pointerdown", outside, true);
 		fit();
 		(_ref = (_checked = checked()) !== null && _checked !== void 0 ? _checked : items()[0]) === null || _ref === void 0 || _ref.focus();
@@ -200,19 +199,24 @@ function menu(options) {
 	button.addEventListener("click", toggle);
 	popup.addEventListener("keydown", key);
 	return {
-		root,
+		button,
+		popup,
+		label(text) {
+			name = text;
+			button.setAttribute("aria-label", text);
+			popup.setAttribute("aria-label", text);
+			const root = stack[0];
+			if (root !== void 0) stack[0] = _objectSpread2(_objectSpread2({}, root), {}, { label: text });
+		},
 		fill(entries) {
 			first = entries;
 			stack = [{
-				name,
-				label: options.label,
+				name: "menu",
+				label: name,
 				entries: first
 			}];
 			render();
 		},
-		show(glyphName) {
-			glyph(svg, glyphName);
-		},
 		close,
 		dispose() {
 			close();

package/dist/es2015/controls/session.js

@@ -0,0 +1,40 @@
+import { namespaces } from "../namespaces.js";
+import { clock } from "./time.js";
+import { spans, window } from "./ranges.js";
+//#region src/controls/session.ts
+/** The optional namespaces of an engine, or none for a native session. */
+function optional(engine) {
+	return engine === null ? {} : namespaces(engine);
+}
+/** The live namespace once the stream has an availability window, which is what makes it live. */
+function live(engine) {
+	const api = optional(engine).live;
+	return api !== void 0 && api.edge !== null ? api : void 0;
+}
+/**
+* The span the bar maps: the engine's own availability window for live,
+* where the session offers it, because the browser's seekable range on a
+* live MediaSource is the union of that window and whatever is buffered
+* and grows behind a paused playhead; the seekable range otherwise; zero
+* to the duration for VOD.
+*/
+function span(video, engine) {
+	var _engine$stats$snapsho, _engine$stats$snapsho2;
+	const on = live(engine) !== void 0;
+	const own = on ? (_engine$stats$snapsho = engine === null || engine === void 0 || (_engine$stats$snapsho2 = engine.stats.snapshot().live) === null || _engine$stats$snapsho2 === void 0 ? void 0 : _engine$stats$snapsho2.span) !== null && _engine$stats$snapsho !== void 0 ? _engine$stats$snapsho : null : null;
+	if (own !== null && own.end > own.start) return own;
+	return window(video.duration, spans(video.seekable), on);
+}
+/** The engine's forward buffer goal in seconds, which lives on the diagnostics snapshot and nowhere else. */
+function bufferGoal(engine) {
+	var _engine$stats$snapsho3;
+	return (_engine$stats$snapsho3 = engine === null || engine === void 0 ? void 0 : engine.stats.snapshot().scheduling.bufferGoal) !== null && _engine$stats$snapsho3 !== void 0 ? _engine$stats$snapsho3 : null;
+}
+/** The wall clock at a presentation time, when the session can say it. */
+function wall(engine, time) {
+	var _optional$pdt$toWallC, _optional$pdt;
+	const epoch = (_optional$pdt$toWallC = (_optional$pdt = optional(engine).pdt) === null || _optional$pdt === void 0 ? void 0 : _optional$pdt.toWallClock(time)) !== null && _optional$pdt$toWallC !== void 0 ? _optional$pdt$toWallC : null;
+	return epoch === null ? null : clock(epoch);
+}
+//#endregion
+export { bufferGoal, live, optional, span, wall };

package/dist/es2015/controls/slider.js

@@ -1,4 +1,4 @@
-import { el, state } from "../dom.js";
+import { el } from "../dom.js";
 //#region src/controls/slider.ts
 /**
 * The slider primitive the seek bar and the volume share: a `div` with
@@ -14,20 +14,22 @@ import { el, state } from "../dom.js";
 * The track and the thumb sit on a rail inset from the root's edges by half
 * a thumb, so the thumb at either end is whole and not clipped, and every
 * fraction is measured against the rail.
+*
+* The steps are read on every key, so an element can take them from its
+* attributes as they change.
 */
 function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
 function slider(options) {
-	const { name, onInput } = options;
-	const root = el("div", `slider ${name}`);
+	const { onInput } = options;
+	const root = el("div", "slider");
 	root.setAttribute("role", "slider");
-	root.setAttribute("aria-label", options.label);
 	root.tabIndex = 0;
-	const rail = el("div", `rail ${name}-rail`);
-	const track = el("div", `track ${name}-track`);
-	const fill = el("div", `fill ${name}-fill`);
-	const thumb = el("div", `thumb ${name}-thumb`);
+	const rail = el("div", "rail");
+	const track = el("div", "track");
+	const fill = el("div", "fill");
+	const thumb = el("div", "thumb");
 	track.append(fill);
 	rail.append(track, thumb);
 	root.append(rail);
@@ -48,7 +50,7 @@ function slider(options) {
 	}
 	function hold(on) {
 		held = on;
-		state(root, `slider ${name}`, { dragging: on });
+		options.onDrag(on);
 	}
 	function down(event) {
 		if (event.button !== 0) return;
@@ -75,17 +77,17 @@ function slider(options) {
 		switch (event.key) {
 			case "ArrowRight":
 			case "ArrowUp":
-				next = value + options.step;
+				next = value + options.step();
 				break;
 			case "ArrowLeft":
 			case "ArrowDown":
-				next = value - options.step;
+				next = value - options.step();
 				break;
 			case "PageUp":
-				next = value + options.page;
+				next = value + options.page();
 				break;
 			case "PageDown":
-				next = value - options.page;
+				next = value - options.page();
 				break;
 			case "Home":
 				next = min;
@@ -107,6 +109,9 @@ function slider(options) {
 		root,
 		track,
 		rail,
+		label(text) {
+			root.setAttribute("aria-label", text);
+		},
 		dragging() {
 			return held;
 		},

package/dist/es2015/controls/time.js

@@ -19,9 +19,5 @@ function clock(epochSeconds) {
 		second: "2-digit"
 	});
 }
-/** What a screen reader hears for a position: "1:23 of 4:56", or the position alone when the duration is unknown or infinite. */
-function describe(current, duration) {
-	return Number.isFinite(duration) ? `${format(current)} of ${format(duration)}` : format(current);
-}
 //#endregion
-export { clock, describe, format };
+export { clock, format };

package/dist/es2015/dom.js

@@ -1,12 +1,10 @@
 //#region src/dom.ts
 /**
-* The DOM helpers the panels share.
+* The DOM helpers the controls share.
 *
-* Every element a panel creates carries a `part`, because `::part()` cannot
-* descend: `::part(quality) select` matches nothing, so an element without a
-* name of its own is unreachable from the page's stylesheet. Names are public
-* API from the first release. Each element also carries a generic name before
-* its specific one, so `::part(select)` reaches every menu at once.
+* Every element a control creates carries a `part`, because `::part()`
+* cannot descend: an element without a name of its own is unreachable from
+* the page's stylesheet. Names are public API.
 */
 /** An element with its part names, and its text when it has any. */
 function el(tag, part, text) {
@@ -15,24 +13,6 @@ function el(tag, part, text) {
 	if (text !== void 0) node.textContent = text;
 	return node;
 }
-/** A `<select>` inside its `<label>`, so neither needs an id to be associated. */
-function menu(name, text) {
-	const label = el("label", `label ${name}-label`);
-	label.append(el("span", `text ${name}-text`, text));
-	const select = el("select", `select ${name}-select`);
-	label.append(select);
-	return [label, select];
-}
-/** Replaces a menu's options and selects `value`. */
-function fill(select, items, value) {
-	select.replaceChildren();
-	for (const [id, text] of items) {
-		const option = el("option", "option", text);
-		option.value = id;
-		select.append(option);
-	}
-	select.value = value;
-}
 /** Sets `part` to a base plus the state names that are on. State rides the part name because `::part()` takes no attribute selector. */
 function state(node, base, on) {
 	const names = [base];
@@ -40,4 +20,4 @@ function state(node, base, on) {
 	node.setAttribute("part", names.join(" "));
 }
 //#endregion
-export { el, fill, menu, state };
+export { el, state };

package/dist/es2015/element-entry.js

@@ -0,0 +1,10 @@
+import { MatteboxPlayerElement } from "./element.js";
+//#region src/element-entry.ts
+/**
+* `@mattebox/player/element`: registers <mattebox-player> and nothing else.
+* A page that takes this entry writes its own composition from the
+* `@mattebox/player/elements/*` entries it imports, and carries only those.
+*/
+MatteboxPlayerElement.define();
+//#endregion
+export { MatteboxPlayerElement };