@mattebox/player 0.1.0

package/dist/es2015/element.js

@@ -0,0 +1,311 @@
+import { namespaces } from "./namespaces.js";
+import { ATTRIBUTES, resolve } from "./controls/options.js";
+import { controlBar } from "./controls/bar.js";
+import { drmPanel } from "./panels/drm.js";
+import { errorSurface } from "./panels/error.js";
+import { livePanel } from "./panels/live.js";
+import { qualityPanel } from "./panels/quality.js";
+import { tracksPanel } from "./panels/tracks.js";
+import _asyncToGenerator from "./_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/asyncToGenerator.js";
+import { drmGuard, resolvePreset } from "./presets.js";
+import { STYLE } from "./style.js";
+import _objectSpread2 from "./_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
+import { createPlayer, matteboxHandler, nativeHandler } from "@mattebox/player-core";
+//#region src/element.ts
+const TAG = "mattebox-player";
+/** Attributes forwarded onto the video as attributes, never as properties. */
+const FORWARDED = [
+	"autoplay",
+	"muted",
+	"poster"
+];
+/** Everything else the element watches. Changing any of them reloads. */
+const OWN = [
+	"src",
+	"type",
+	"preset",
+	"license-url",
+	"thumbnails"
+];
+/**
+* The one attribute whose meaning the element owns: `native` keeps the
+* browser's controls on the video, `custom` swaps them for the bar, `none`
+* leaves the video bare for a page that draws its own. Anything else is
+* `native`. Changing it swaps the bar without touching the session.
+*/
+const CONTROLS = "controls";
+/** The bar's knobs as attributes. Changing one rebuilds the bar with the new value. */
+const KNOBS = Object.values(ATTRIBUTES);
+/** Composed in this order, and each one answers null when its namespace is absent. */
+const PANELS = [
+	qualityPanel,
+	tracksPanel,
+	livePanel,
+	drmPanel
+];
+/** Every stage the engine ships. A narrower preset is optimization. */
+const DEFAULT_PRESET = "full";
+/**
+* What `define()` recorded, for the elements the parser creates. It is the
+* one value shared across elements, and the prompt asks for it: a page that
+* writes only markup still has to be able to say what the engine carries.
+*/
+let defaults = {};
+/**
+* The interface above merges only `addEventListener` and `removeEventListener`
+* overloads, which the class inherits from HTMLElement. The rule it suppresses
+* guards against properties an interface declares and a constructor never
+* assigns, and there are none.
+*/
+var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			...FORWARDED,
+			...OWN,
+			CONTROLS,
+			...KNOBS
+		];
+	}
+	/** Registers the element once, and records the stages markup-only pages get. */
+	static define(options) {
+		if (options !== void 0) defaults = options;
+		if (customElements.get(TAG) === void 0) customElements.define(TAG, MatteboxPlayerElement);
+	}
+	constructor(options) {
+		super();
+		this.options = options !== null && options !== void 0 ? options : defaults;
+		this.panels = [];
+		this.controls = null;
+		this.focusable = false;
+		this.core = null;
+		this.current = null;
+		this.offs = [];
+		this.queue = Promise.resolve();
+		this.pending = false;
+		this.media = document.createElement("video");
+		this.media.controls = true;
+		this.stage = document.createElement("div");
+		this.stage.setAttribute("part", "stage");
+		this.stage.append(document.createElement("slot"));
+		this.bar = document.createElement("div");
+		this.bar.setAttribute("part", "panels");
+		this.surface = errorSurface(() => {
+			this.reload();
+		});
+		const root = this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = STYLE;
+		root.append(style, this.stage, this.bar, this.surface.root);
+	}
+	/** The media element. Everything the browser already does is here. */
+	get video() {
+		return this.media;
+	}
+	/** The core, or null until the first source has been set up: resolving a preset is asynchronous. */
+	get player() {
+		return this.core;
+	}
+	/** The engine feeding the video, or null for a native session and before the first load. */
+	get engine() {
+		var _this$current$engine, _this$current;
+		return (_this$current$engine = (_this$current = this.current) === null || _this$current === void 0 ? void 0 : _this$current.engine) !== null && _this$current$engine !== void 0 ? _this$current$engine : null;
+	}
+	connectedCallback() {
+		if (this.media.parentNode !== this) this.append(this.media);
+		for (const name of FORWARDED) this.forward(name);
+		this.reload();
+	}
+	disconnectedCallback() {
+		this.enqueue(() => this.teardown());
+	}
+	attributeChangedCallback(name) {
+		if (FORWARDED.includes(name)) {
+			this.forward(name);
+			return;
+		}
+		if (name === CONTROLS || KNOBS.includes(name)) {
+			this.mode();
+			return;
+		}
+		if (name === "preset") this.enqueue(() => this.discard());
+		this.reload();
+	}
+	/**
+	* Applies the `controls` attribute and the knobs: the video's own
+	* controls, and the bar rebuilt from scratch. Rebuilding is cheap, the
+	* knobs are read once at build, and a session re-attaches in one call.
+	*/
+	mode() {
+		const value = this.getAttribute(CONTROLS);
+		const custom = value === "custom";
+		this.media.controls = !custom && value !== "none";
+		this.bar.hidden = custom;
+		if (this.controls !== null) {
+			this.controls.dispose();
+			this.controls = null;
+			this.removeAttribute("fullscreen");
+			if (this.focusable) this.removeAttribute("tabindex");
+			this.focusable = false;
+		}
+		if (!custom) return;
+		if (!this.hasAttribute("tabindex")) {
+			this.tabIndex = 0;
+			this.focusable = true;
+		}
+		const knobs = resolve(this.options.controls, (name) => this.getAttribute(name));
+		this.controls = controlBar(this, this.stage, this.media, knobs, (name, on) => {
+			this.toggleAttribute(name, on);
+		}, () => {
+			this.reload();
+		});
+		this.surface.clear();
+		this.stage.append(this.controls.root);
+		if (this.current !== null) this.controls.attach(this.current);
+	}
+	forward(name) {
+		const value = this.getAttribute(name);
+		if (value === null) this.media.removeAttribute(name);
+		else this.media.setAttribute(name, value);
+		if (name === "muted") this.media.muted = value !== null;
+	}
+	enqueue(task) {
+		this.queue = this.queue.then(task, task).catch(() => void 0);
+	}
+	/**
+	* One run per burst. The parser sets every attribute and then connects the
+	* element before any queued task starts, and each of those would load on
+	* its own; the flag folds them into the one run that sees the final state.
+	*/
+	reload() {
+		if (this.pending) return;
+		this.pending = true;
+		this.enqueue(() => {
+			this.pending = false;
+			return this.run();
+		});
+	}
+	emit(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	report(error) {
+		if (error.fatal) {
+			if (this.controls !== null) this.controls.error(error);
+			else this.surface.show(error);
+		}
+		this.emit("error", error);
+	}
+	run() {
+		var _this = this;
+		return _asyncToGenerator(function* () {
+			var _this$controls, _this$controls2;
+			_this.unmount();
+			if (!_this.isConnected) return;
+			const url = _this.getAttribute("src");
+			if (url === null) return;
+			const core = yield _this.ensure();
+			const type = _this.getAttribute("type");
+			const source = type === null ? { url } : {
+				url,
+				type
+			};
+			_this.surface.clear();
+			(_this$controls = _this.controls) === null || _this$controls === void 0 || _this$controls.clearError();
+			let session;
+			try {
+				session = yield core.load(source);
+			} catch (_unused) {
+				return;
+			}
+			if (!_this.isConnected) {
+				yield core.unload();
+				return;
+			}
+			_this.current = session;
+			_this.configure(session);
+			(_this$controls2 = _this.controls) === null || _this$controls2 === void 0 || _this$controls2.attach(session);
+			for (const factory of PANELS) {
+				const panel = factory(session, _this.media);
+				if (panel === null) continue;
+				_this.panels.push(panel);
+				_this.bar.append(panel.root);
+			}
+		})();
+	}
+	ensure() {
+		var _this2 = this;
+		return _asyncToGenerator(function* () {
+			if (_this2.core !== null) return _this2.core;
+			const core = createPlayer(_this2.media, { handlers: yield _this2.chain() });
+			_this2.offs.push(core.on("sourcechange", (session) => {
+				_this2.emit("sourcechange", session);
+			}), core.on("error", (error) => {
+				_this2.report(error);
+			}));
+			_this2.core = core;
+			return core;
+		})();
+	}
+	chain() {
+		var _this3 = this;
+		return _asyncToGenerator(function* () {
+			var _this$getAttribute;
+			if (_this3.options.handlers !== void 0) return _this3.options.handlers;
+			if (_this3.options.stages !== void 0) return [matteboxHandler({ stages: _this3.options.stages }), nativeHandler()];
+			const name = (_this$getAttribute = _this3.getAttribute("preset")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : DEFAULT_PRESET;
+			const preset = yield resolvePreset(name);
+			if (preset === null) {
+				_this3.report({
+					category: "config",
+					code: "CONFIG_INVALID",
+					fatal: true,
+					recoverable: false,
+					handler: null,
+					context: { preset: name }
+				});
+				return [nativeHandler()];
+			}
+			return [matteboxHandler(_objectSpread2({ preset }, drmGuard())), nativeHandler()];
+		})();
+	}
+	/** What the attributes ask of the session's namespaces, once there is one. */
+	configure(session) {
+		const engine = session.engine;
+		if (engine === null) return;
+		const optional = namespaces(engine);
+		const license = this.getAttribute("license-url");
+		if (license !== null && optional.drm !== void 0) optional.drm.setLicenseUrl(license);
+		const track = this.getAttribute("thumbnails");
+		if (track !== null && optional.thumbnails !== void 0) optional.thumbnails.load(track).catch(() => void 0);
+	}
+	unmount() {
+		var _this$controls3;
+		(_this$controls3 = this.controls) === null || _this$controls3 === void 0 || _this$controls3.detach();
+		for (const panel of this.panels) panel.dispose();
+		this.panels = [];
+		this.bar.replaceChildren();
+		this.current = null;
+	}
+	teardown() {
+		var _this4 = this;
+		return _asyncToGenerator(function* () {
+			_this4.unmount();
+			if (_this4.core !== null) yield _this4.core.unload();
+		})();
+	}
+	/** Drops the player itself, so the next run builds a chain from the new preset. */
+	discard() {
+		var _this5 = this;
+		return _asyncToGenerator(function* () {
+			yield _this5.teardown();
+			for (const off of _this5.offs) off();
+			_this5.offs = [];
+			_this5.core = null;
+		})();
+	}
+};
+//#endregion
+export { MatteboxPlayerElement };

package/dist/es2015/index.js

@@ -0,0 +1,10 @@
+import { LAYOUT } from "./controls/options.js";
+import { MatteboxPlayerElement } from "./element.js";
+//#region src/index.ts
+/**
+* @mattebox/player: the <mattebox-player> custom element. Importing this
+* module registers the element; that is the package's one side effect.
+*/
+MatteboxPlayerElement.define();
+//#endregion
+export { LAYOUT, MatteboxPlayerElement };

package/dist/es2015/namespaces.js

@@ -0,0 +1,7 @@
+//#region src/namespaces.ts
+/** The optional namespaces on an engine, each present exactly when its stage was composed. */
+function namespaces(engine) {
+	return engine;
+}
+//#endregion
+export { namespaces };

package/dist/es2015/panels/drm.js

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

package/dist/es2015/panels/error.js

@@ -0,0 +1,25 @@
+import { el } from "../dom.js";
+//#region src/panels/error.ts
+function errorSurface(retry) {
+	const root = el("div", "panel error");
+	const category = el("span", "value error-category");
+	const code = el("span", "value error-code");
+	const button = el("button", "button error-retry", "Retry");
+	button.type = "button";
+	button.addEventListener("click", retry);
+	root.append(category, code, button);
+	root.hidden = true;
+	return {
+		root,
+		show(error) {
+			category.textContent = error.category;
+			code.textContent = error.code;
+			root.hidden = false;
+		},
+		clear() {
+			root.hidden = true;
+		}
+	};
+}
+//#endregion
+export { errorSurface };

package/dist/es2015/panels/live.js

@@ -0,0 +1,48 @@
+import { el, state } from "../dom.js";
+import { namespaces } from "../namespaces.js";
+//#region src/panels/live.ts
+/**
+* The live badge over `engine.live`. Present only when a live stage is
+* composed, so the factory answers null for VOD-only engines and for native.
+*
+* Latency has no event; it moves with the playhead. The video's `timeupdate`
+* is the clock the browser already runs, so the badge reads on that.
+*/
+const livePanel = (session, video) => {
+	const engine = session.engine;
+	if (engine === null) return null;
+	const found = namespaces(engine).live;
+	if (found === void 0) return null;
+	const live = found;
+	const root = el("div", "panel live");
+	const badge = el("span", "badge live-badge", "Live");
+	const latency = el("span", "value live-latency");
+	const button = el("button", "button live-edge-button", "Go to live");
+	button.type = "button";
+	root.append(badge, latency, button);
+	let shown = "";
+	function tick() {
+		root.hidden = live.edge === null;
+		const atEdge = live.atEdge;
+		state(root, "panel live", { "at-edge": atEdge });
+		button.disabled = atEdge;
+		const seconds = live.latency;
+		const text = seconds === null ? "" : `${seconds.toFixed(1)}s behind`;
+		if (text === shown) return;
+		shown = text;
+		latency.textContent = text;
+	}
+	button.addEventListener("click", () => {
+		live.seekToEdge();
+	});
+	video.addEventListener("timeupdate", tick);
+	tick();
+	return {
+		root,
+		dispose() {
+			video.removeEventListener("timeupdate", tick);
+		}
+	};
+};
+//#endregion
+export { livePanel };

package/dist/es2015/panels/quality.js

@@ -0,0 +1,52 @@
+import { el, fill, menu } from "../dom.js";
+//#region src/panels/quality.ts
+const AUTO = "auto";
+/** A rendition's height when the manifest declared one, its bitrate otherwise. */
+function label(rendition) {
+	if (rendition.height !== void 0) return `${rendition.height}p`;
+	return `${Math.round(rendition.bitrate / 1e3)} kbps`;
+}
+const qualityPanel = (session, video) => {
+	const engine = session.engine;
+	if (engine === null) return null;
+	const quality = engine.quality;
+	const root = el("div", "panel quality");
+	const [wrapper, select] = menu("quality", "Quality");
+	const playing = el("span", "value quality-playing");
+	root.append(wrapper, playing);
+	let shown = "";
+	function render() {
+		var _quality$pinned;
+		const items = [[AUTO, "Auto"]];
+		for (const rendition of quality.renditions) items.push([rendition.id, label(rendition)]);
+		fill(select, items, (_quality$pinned = quality.pinned) !== null && _quality$pinned !== void 0 ? _quality$pinned : AUTO);
+		root.hidden = quality.renditions.length === 0;
+	}
+	function tick() {
+		const current = quality.playing === null ? "" : label(quality.playing);
+		if (current === shown) return;
+		shown = current;
+		playing.textContent = current;
+	}
+	select.addEventListener("change", () => {
+		if (select.value === AUTO) quality.auto();
+		else quality.pin(select.value);
+	});
+	const offs = [
+		engine.on("tracks:changed", render),
+		engine.on("quality:constraints-unsatisfiable", render),
+		engine.on("quality:pin-unsatisfiable", render)
+	];
+	video.addEventListener("timeupdate", tick);
+	render();
+	tick();
+	return {
+		root,
+		dispose() {
+			for (const off of offs) off();
+			video.removeEventListener("timeupdate", tick);
+		}
+	};
+};
+//#endregion
+export { qualityPanel };

package/dist/es2015/panels/tracks.js

@@ -0,0 +1,47 @@
+import { el, fill, menu } from "../dom.js";
+//#region src/panels/tracks.ts
+const OFF = "off";
+/** The language, then the role, then the id: whichever the manifest gave. */
+function label(track) {
+	const parts = [track.lang, track.role].filter((part) => part !== void 0);
+	return parts.length === 0 ? track.id : parts.join(" · ");
+}
+const tracksPanel = (session) => {
+	const engine = session.engine;
+	if (engine === null) return null;
+	const tracks = engine.tracks;
+	const root = el("div", "panel tracks");
+	const [audioLabel, audio] = menu("audio", "Audio");
+	const [textLabel, text] = menu("text", "Subtitles");
+	root.append(audioLabel, textLabel);
+	function renderOne(select, wrapper, contentType, off) {
+		var _tracks$active$id, _tracks$active;
+		const available = tracks.available.filter((track) => track.contentType === contentType);
+		const items = off ? [[OFF, "Off"]] : [];
+		for (const track of available) items.push([track.id, label(track)]);
+		fill(select, 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);
+		wrapper.hidden = available.length === 0;
+		return available.length;
+	}
+	function render() {
+		const count = renderOne(audio, audioLabel, "audio", false) + renderOne(text, textLabel, "text", true);
+		root.hidden = count === 0;
+	}
+	audio.addEventListener("change", () => {
+		tracks.select(audio.value);
+	});
+	text.addEventListener("change", () => {
+		if (text.value === OFF) tracks.deselect("text");
+		else tracks.select(text.value);
+	});
+	const offs = [engine.on("tracks:changed", render), engine.on("tracks:selected", render)];
+	render();
+	return {
+		root,
+		dispose() {
+			for (const off of offs) off();
+		}
+	};
+};
+//#endregion
+export { tracksPanel };

package/dist/es2015/presets.js

@@ -0,0 +1,46 @@
+import _asyncToGenerator from "./_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/asyncToGenerator.js";
+//#region src/presets.ts
+/** eme-core's teardown calls `element.setMediaKeys(null)` unguarded, so a build without EME throws out of `detach`. */
+const DRM_STAGES = [
+	"eme-core",
+	"eme-cenc",
+	"eme-fairplay"
+];
+/** The engine's preset matrix: a protocol line, a `-ts` tier, a `-drm` tier, plus `full` and `kernel`. */
+const PRESETS = {
+	dash: () => import("mattebox/presets/dash"),
+	"dash-drm": () => import("mattebox/presets/dash-drm"),
+	dual: () => import("mattebox/presets/dual"),
+	"dual-drm": () => import("mattebox/presets/dual-drm"),
+	"dual-ts": () => import("mattebox/presets/dual-ts"),
+	"dual-ts-drm": () => import("mattebox/presets/dual-ts-drm"),
+	full: () => import("mattebox/presets/full"),
+	hls: () => import("mattebox/presets/hls"),
+	"hls-drm": () => import("mattebox/presets/hls-drm"),
+	"hls-ts": () => import("mattebox/presets/hls-ts"),
+	"hls-ts-drm": () => import("mattebox/presets/hls-ts-drm"),
+	kernel: () => import("mattebox/presets/kernel")
+};
+function resolvePreset(_x) {
+	return _resolvePreset.apply(this, arguments);
+}
+function _resolvePreset() {
+	_resolvePreset = _asyncToGenerator(function* (name) {
+		const engine = globalThis.mattebox;
+		if ((engine === null || engine === void 0 ? void 0 : engine.preset) !== void 0) return engine.preset;
+		const load = PRESETS[name];
+		if (load === void 0) return null;
+		try {
+			return (yield load()).default;
+		} catch (_unused) {
+			return null;
+		}
+	});
+	return _resolvePreset.apply(this, arguments);
+}
+/** The DRM stages to leave out of a preset on a browser that cannot use them. */
+function drmGuard() {
+	return "setMediaKeys" in HTMLMediaElement.prototype ? {} : { without: DRM_STAGES };
+}
+//#endregion
+export { drmGuard, resolvePreset };