@mattebox/player 0.1.0

package/dist/es2015/controls/menu.js

@@ -0,0 +1,226 @@
+import { el, state } from "../dom.js";
+import { glyph, icon } from "./icons.js";
+//#region src/controls/menu.ts
+/**
+* The menu primitive the quality, audio, subtitles and speed menus share: a
+* button that opens a popup of radio items above it, in one or more groups
+* 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.
+*
+* 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
+* hands focus to the button. A choice closes the popup. A pointer down
+* 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.
+*/
+/** Air between the popup's top and the stage'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`);
+	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`);
+	popup.setAttribute("role", "menu");
+	popup.setAttribute("aria-label", options.label);
+	popup.hidden = true;
+	root.append(button, popup);
+	let open = false;
+	let first = [];
+	/** The pages opened, the first being the menu itself. */
+	let stack = [];
+	const handlers = /* @__PURE__ */ new WeakMap();
+	function items() {
+		return [...popup.querySelectorAll("button")];
+	}
+	function checked() {
+		return items().find((item) => item.getAttribute("aria-checked") === "true");
+	}
+	/** The focused element as this tree sees it: inside shadow DOM, `document.activeElement` is the host. */
+	function focused() {
+		return popup.getRootNode().activeElement;
+	}
+	function outside(event) {
+		if (!event.composedPath().includes(root)) close();
+	}
+	/** Whatever room there is above the button inside the stage, 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;
+		popup.style.maxHeight = `${Math.max(0, Math.floor(room))}px`;
+	}
+	function clear() {
+		for (const item of items()) {
+			const handler = handlers.get(item);
+			if (handler !== void 0) item.removeEventListener("click", handler);
+		}
+		popup.replaceChildren();
+	}
+	function item(part, text, handler) {
+		const node = el("button", part, text);
+		node.type = "button";
+		node.tabIndex = -1;
+		handlers.set(node, handler);
+		node.addEventListener("click", handler);
+		return node;
+	}
+	/** Draws the page on top of the stack. */
+	function render() {
+		clear();
+		const page = stack[stack.length - 1];
+		if (page === void 0) return;
+		let tab = true;
+		if (stack.length > 1) {
+			const back = item(`item back-item ${name}-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}`);
+			popup.append(back);
+		}
+		for (const entry of page.entries) {
+			if (isPage(entry)) {
+				const link = item(`item page-item ${name}-${entry.name}-item`, entry.label, () => {
+					var _items$2;
+					stack.push(entry);
+					render();
+					(_items$2 = items()[0]) === null || _items$2 === void 0 || _items$2.focus();
+				});
+				link.setAttribute("role", "menuitem");
+				link.setAttribute("aria-haspopup", "menu");
+				popup.append(link);
+				continue;
+			}
+			const section = el("div", `section ${name}-${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));
+			}
+			for (const [id, text] of entry.items) {
+				const choice = item(`item ${name}-item ${name}-${entry.name}-item`, text, () => {
+					close();
+					button.focus();
+					entry.onSelect(id);
+				});
+				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 });
+				if (on && tab) {
+					choice.tabIndex = 0;
+					tab = false;
+				}
+				section.append(choice);
+			}
+			popup.append(section);
+		}
+		fit();
+	}
+	function close() {
+		if (!open) return;
+		open = false;
+		popup.hidden = true;
+		button.setAttribute("aria-expanded", "false");
+		state(root, `menu ${name}-menu`, { open: false });
+		document.removeEventListener("pointerdown", outside, true);
+		if (stack.length > 1) {
+			stack = stack.slice(0, 1);
+			render();
+		}
+	}
+	function show() {
+		var _ref, _checked;
+		if (open) return;
+		open = true;
+		popup.hidden = false;
+		button.setAttribute("aria-expanded", "true");
+		state(root, `menu ${name}-menu`, { open: true });
+		document.addEventListener("pointerdown", outside, true);
+		fit();
+		(_ref = (_checked = checked()) !== null && _checked !== void 0 ? _checked : items()[0]) === null || _ref === void 0 || _ref.focus();
+	}
+	function toggle() {
+		if (open) close();
+		else show();
+	}
+	function key(event) {
+		var _list$next;
+		const list = items();
+		const index = list.indexOf(focused());
+		let next;
+		switch (event.key) {
+			case "ArrowDown":
+				next = (index + 1) % list.length;
+				break;
+			case "ArrowUp":
+				next = (index - 1 + list.length) % list.length;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = list.length - 1;
+				break;
+			case "Escape":
+				event.preventDefault();
+				if (stack.length > 1) {
+					var _items$3;
+					stack.pop();
+					render();
+					(_items$3 = items()[0]) === null || _items$3 === void 0 || _items$3.focus();
+					return;
+				}
+				close();
+				button.focus();
+				return;
+			default: return;
+		}
+		event.preventDefault();
+		(_list$next = list[next]) === null || _list$next === void 0 || _list$next.focus();
+	}
+	button.addEventListener("click", toggle);
+	popup.addEventListener("keydown", key);
+	return {
+		root,
+		fill(entries) {
+			first = entries;
+			stack = [{
+				name,
+				label: options.label,
+				entries: first
+			}];
+			render();
+		},
+		show(glyphName) {
+			glyph(svg, glyphName);
+		},
+		close,
+		dispose() {
+			close();
+			clear();
+			button.removeEventListener("click", toggle);
+			popup.removeEventListener("keydown", key);
+		}
+	};
+}
+//#endregion
+export { menu };

package/dist/es2015/controls/menus.js

@@ -0,0 +1,258 @@
+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

@@ -0,0 +1,46 @@
+//#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/pip.js

@@ -0,0 +1,39 @@
+//#region src/controls/pip.ts
+function watching(target, names) {
+	return (fn) => {
+		for (const name of names) target.addEventListener(name, fn);
+		return () => {
+			for (const name of names) target.removeEventListener(name, fn);
+		};
+	};
+}
+function pictureInPicture(video) {
+	var _safari$webkitSupport;
+	const safari = video;
+	if (typeof video.requestPictureInPicture === "function" && document.pictureInPictureEnabled) return {
+		supported: true,
+		active: () => document.pictureInPictureElement === video,
+		toggle() {
+			(document.pictureInPictureElement === video ? document.exitPictureInPicture() : video.requestPictureInPicture()).catch(() => void 0);
+		},
+		watch: watching(video, ["enterpictureinpicture", "leavepictureinpicture"])
+	};
+	if (typeof safari.webkitSetPresentationMode === "function" && ((_safari$webkitSupport = safari.webkitSupportsPresentationMode) === null || _safari$webkitSupport === void 0 ? void 0 : _safari$webkitSupport.call(safari, "picture-in-picture")) === true) return {
+		supported: true,
+		active: () => safari.webkitPresentationMode === "picture-in-picture",
+		toggle() {
+			var _safari$webkitSetPres;
+			const next = safari.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture";
+			(_safari$webkitSetPres = safari.webkitSetPresentationMode) === null || _safari$webkitSetPres === void 0 || _safari$webkitSetPres.call(safari, next);
+		},
+		watch: watching(video, ["webkitpresentationmodechanged"])
+	};
+	return {
+		supported: false,
+		active: () => false,
+		toggle() {},
+		watch: () => () => {}
+	};
+}
+//#endregion
+export { pictureInPicture };

package/dist/es2015/controls/ranges.js

@@ -0,0 +1,51 @@
+//#region src/controls/ranges.ts
+const EMPTY = {
+	start: 0,
+	end: 0
+};
+/** A `TimeRanges` as spans. */
+function spans(ranges) {
+	const out = [];
+	for (let i = 0; i < ranges.length; i += 1) out.push({
+		start: ranges.start(i),
+		end: ranges.end(i)
+	});
+	return out;
+}
+/**
+* The span the bar maps: the last seekable range for live, which is the
+* availability window the engine sets on the MediaSource; zero to the
+* duration for VOD; empty while neither is known.
+*/
+function window(duration, seekable, live) {
+	if (live) {
+		const last = seekable[seekable.length - 1];
+		if (last !== void 0 && last.end > last.start) return last;
+	}
+	return Number.isFinite(duration) && duration > 0 ? {
+		start: 0,
+		end: duration
+	} : EMPTY;
+}
+/** Where a time sits on a span, clamped to it. Zero on an empty span. */
+function fraction(time, span) {
+	const length = span.end - span.start;
+	if (length <= 0) return 0;
+	return Math.min(1, Math.max(0, (time - span.start) / length));
+}
+/** The time at a fraction of a span. */
+function at(part, span) {
+	return span.start + Math.min(1, Math.max(0, part)) * (span.end - span.start);
+}
+/** Ranges clipped to a span, as fraction pairs, dropping what falls outside or collapses. */
+function clip(ranges, span) {
+	const out = [];
+	for (const range of ranges) {
+		const start = fraction(range.start, span);
+		const end = fraction(range.end, span);
+		if (end > start) out.push([start, end]);
+	}
+	return out;
+}
+//#endregion
+export { EMPTY, at, clip, fraction, spans, window };

package/dist/es2015/controls/screens.js

@@ -0,0 +1,74 @@
+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 };