@mattebox/player 0.1.0 → 0.3.0

package/dist/es2015/element.js

@@ -1,23 +1,19 @@
+import { CONTROL_BAR, PANELS, PLAYER } from "./tags.js";
+import { composeBar, composePanels } from "./compose.js";
 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 { errorSurface } from "./surface.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"
+	"poster",
+	"crossorigin"
 ];
 /** Everything else the element watches. Changing any of them reloads. */
 const OWN = [
@@ -28,20 +24,28 @@ const OWN = [
 	"thumbnails"
 ];
 /**
+* The chapters track URL. A `<track kind="chapters">` on the video, hidden
+* so its cues load and nothing is drawn: chapters are the browser's own
+* text track, which the seek bar and the chapters menu read, and which a
+* page can also put there itself. Changing it swaps the track and never
+* reloads the source.
+*/
+const CHAPTERS = "chapters";
+/**
 * 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
+/** The video's state, as attributes on the element, read on the events the video fires for it. */
+const STATE_EVENTS = [
+	"play",
+	"pause",
+	"ended",
+	"emptied",
+	"volumechange",
+	"loadedmetadata"
 ];
 /** Every stage the engine ships. A narrower preset is optimization. */
 const DEFAULT_PRESET = "full";
@@ -63,39 +67,51 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 			...FORWARDED,
 			...OWN,
 			CONTROLS,
-			...KNOBS
+			CHAPTERS
 		];
 	}
-	/** Registers the element once, and records the stages markup-only pages get. */
+	/**
+	* Registers the element once, and records the stages markup-only pages
+	* get. The controls register through their own entries, the package's
+	* root entry importing every one; a control connected before its player
+	* is defined waits for the definition.
+	*/
 	static define(options) {
 		if (options !== void 0) defaults = options;
-		if (customElements.get(TAG) === void 0) customElements.define(TAG, MatteboxPlayerElement);
+		if (customElements.get("mattebox-player") === void 0) customElements.define(PLAYER, MatteboxPlayerElement);
 	}
 	constructor(options) {
 		super();
 		this.options = options !== null && options !== void 0 ? options : defaults;
-		this.panels = [];
-		this.controls = null;
+		this.composed = [];
+		this.settled = false;
 		this.focusable = false;
+		this.track = null;
 		this.core = null;
 		this.current = null;
+		this.failure = null;
+		this.reflecting = false;
 		this.offs = [];
 		this.queue = Promise.resolve();
 		this.pending = false;
 		this.media = document.createElement("video");
 		this.media.controls = true;
+		for (const name of STATE_EVENTS) this.media.addEventListener(name, () => {
+			this.reflect();
+		});
+		this.media.addEventListener("playing", () => {
+			this.failure = null;
+		});
 		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);
+		root.append(style, this.stage, this.surface.root);
 	}
 	/** The media element. Everything the browser already does is here. */
 	get video() {
@@ -110,57 +126,104 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 		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;
 	}
+	/**
+	* The fatal error of the current load, or null once a load starts or
+	* playback resumes. The `error` event says when; this says what, for a
+	* control that attaches after the event, such as the default composition
+	* behind a source that fails while the page is still parsing.
+	*/
+	get error() {
+		return this.failure;
+	}
 	connectedCallback() {
 		if (this.media.parentNode !== this) this.append(this.media);
 		for (const name of FORWARDED) this.forward(name);
+		this.reflect();
+		if (!this.settled) this.settle();
 		this.reload();
 	}
+	/** Decides on the default composition once the children are all in, then on every mode change. */
+	settle() {
+		const done = () => {
+			this.settled = true;
+			this.mode();
+		};
+		if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", done, { once: true });
+		else queueMicrotask(done);
+	}
+	/** The video's state on the element, for `mattebox-player[paused]` and the like. */
+	reflect() {
+		const video = this.media;
+		this.reflecting = true;
+		this.toggleAttribute("paused", video.paused);
+		this.toggleAttribute("playing", !video.paused);
+		this.toggleAttribute("ended", video.ended);
+		this.toggleAttribute("muted", video.muted);
+		this.reflecting = false;
+	}
 	disconnectedCallback() {
 		this.enqueue(() => this.teardown());
 	}
 	attributeChangedCallback(name) {
 		if (FORWARDED.includes(name)) {
-			this.forward(name);
+			if (!this.reflecting) this.forward(name);
 			return;
 		}
-		if (name === CONTROLS || KNOBS.includes(name)) {
+		if (name === CONTROLS) {
 			this.mode();
 			return;
 		}
+		if (name === CHAPTERS) {
+			this.chapters();
+			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.
+	* Applies the `controls` attribute: the video's own controls, the
+	* tabindex, and the default composition for the mode where the page
+	* wrote none. The controls themselves are elements and attach on their own.
 	*/
 	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 (custom) this.surface.clear();
+		if (!custom) {
 			if (this.focusable) this.removeAttribute("tabindex");
 			this.focusable = false;
-		}
-		if (!custom) return;
-		if (!this.hasAttribute("tabindex")) {
+		} else 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);
+		if (!this.settled) return;
+		for (const node of this.composed) node.remove();
+		this.composed = [];
+		const own = custom ? CONTROL_BAR : PANELS;
+		if (this.querySelector(`:scope > ${own}`) === null) {
+			this.composed = custom ? composeBar() : composePanels();
+			this.append(...this.composed);
+		}
+	}
+	/** Keeps a hidden chapters track on the video for the `chapters` attribute, or none. */
+	chapters() {
+		const url = this.getAttribute(CHAPTERS);
+		if (url === null) {
+			var _this$track;
+			(_this$track = this.track) === null || _this$track === void 0 || _this$track.remove();
+			this.track = null;
+			return;
+		}
+		const held = this.track;
+		if (held !== null && held.parentNode === this.media && held.getAttribute("src") === url) return;
+		held === null || held === void 0 || held.remove();
+		const track = document.createElement("track");
+		track.kind = "chapters";
+		track.src = url;
+		this.track = track;
+		this.media.append(track);
+		track.track.mode = "hidden";
 	}
 	forward(name) {
 		const value = this.getAttribute(name);
@@ -193,15 +256,14 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 	}
 	report(error) {
 		if (error.fatal) {
-			if (this.controls !== null) this.controls.error(error);
-			else this.surface.show(error);
+			this.failure = error;
+			if (this.getAttribute(CONTROLS) !== "custom") 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");
@@ -212,8 +274,8 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 				url,
 				type
 			};
+			_this.failure = null;
 			_this.surface.clear();
-			(_this$controls = _this.controls) === null || _this$controls === void 0 || _this$controls.clearError();
 			let session;
 			try {
 				session = yield core.load(source);
@@ -226,13 +288,7 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 			}
 			_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);
-			}
+			_this.chapters();
 		})();
 	}
 	ensure() {
@@ -241,6 +297,7 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 			if (_this2.core !== null) return _this2.core;
 			const core = createPlayer(_this2.media, { handlers: yield _this2.chain() });
 			_this2.offs.push(core.on("sourcechange", (session) => {
+				_this2.current = session;
 				_this2.emit("sourcechange", session);
 			}), core.on("error", (error) => {
 				_this2.report(error);
@@ -254,7 +311,8 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 		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 config = _this3.options.config === void 0 ? {} : { config: _this3.options.config };
+			if (_this3.options.stages !== void 0) return [matteboxHandler(_objectSpread2({ stages: _this3.options.stages }, config)), 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) {
@@ -268,7 +326,7 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 				});
 				return [nativeHandler()];
 			}
-			return [matteboxHandler(_objectSpread2({ preset }, drmGuard())), nativeHandler()];
+			return [matteboxHandler(_objectSpread2(_objectSpread2({ preset }, config), drmGuard())), nativeHandler()];
 		})();
 	}
 	/** What the attributes ask of the session's namespaces, once there is one. */
@@ -282,11 +340,6 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 		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() {

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

@@ -0,0 +1,68 @@
+import { show } from "./shared.js";
+import { MenuElement, single } from "./menu-element.js";
+//#region src/elements/audio-menu.ts
+/** 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 tracks of one content type as menu items, with the active one's id. */
+function trackItems(engine, contentType) {
+	var _tracks$active$id, _tracks$active;
+	const tracks = engine.tracks;
+	const available = tracks.available.filter((track) => track.contentType === contentType);
+	const items = [];
+	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 : null];
+}
+/** Subscribes `tick` to the track events, and answers the unsubscribe. */
+function onTracks(engine, tick) {
+	const offs = [engine.on("tracks:changed", tick), engine.on("tracks:selected", tick)];
+	return () => {
+		for (const off of offs) off();
+	};
+}
+var MbxAudioMenu = class extends MenuElement {
+	static get observedAttributes() {
+		return ["label", "label-back"];
+	}
+	constructor() {
+		super(...single("music"));
+		this.engine = null;
+		show(this.slots, "default");
+	}
+	name() {
+		return "Audio";
+	}
+	attach(player) {
+		this.follow(player, (engine) => {
+			this.engine = engine;
+			this.render();
+			if (engine === null) return void 0;
+			return onTracks(engine, () => {
+				this.render();
+			});
+		});
+	}
+	render() {
+		super.render();
+		const engine = this.engine;
+		if (engine === null) {
+			this.hidden = true;
+			return;
+		}
+		const [items, active] = trackItems(engine, "audio");
+		this.menu.fill([{
+			name: "track",
+			items,
+			value: active !== null && active !== void 0 ? active : "",
+			onSelect: (value) => {
+				engine.tracks.select(value);
+				this.render();
+			}
+		}]);
+		this.hidden = items.length < 2;
+	}
+};
+//#endregion
+export { MbxAudioMenu, onTracks, trackItems, trackLabel };

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

@@ -0,0 +1,68 @@
+import { show } from "./shared.js";
+import { MenuElement, single } from "./menu-element.js";
+import { chapterAt, chapters, followChapters } from "../controls/chapters.js";
+import { format } from "../controls/time.js";
+//#region src/elements/chapters-menu.ts
+/**
+* <mbx-chapters-menu>: the chapters of the video as a list, each with its
+* start time, the one the playhead is in checked; choosing one seeks to its
+* start. The chapters are the video's own chapters text track, from the
+* player's `chapters` attribute or a `<track>` the page put there, so the
+* menu works for every session, native included, and hides while the
+* video has none. The name comes from `label`.
+*/
+var MbxChaptersMenu = class extends MenuElement {
+	static get observedAttributes() {
+		return ["label", "label-back"];
+	}
+	constructor() {
+		super(...single("chapters"));
+		this.drawn = "";
+		show(this.slots, "default");
+	}
+	name() {
+		return "Chapters";
+	}
+	attach(player) {
+		const tick = () => {
+			this.render();
+		};
+		this.keep(followChapters(player.video, tick));
+		this.listen(player.video, [
+			"timeupdate",
+			"seeked",
+			"emptied",
+			"loadedmetadata"
+		], tick);
+		this.listen(player, ["sourcechange"], tick);
+		this.render();
+	}
+	render() {
+		var _this$player;
+		super.render();
+		const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+		if (video === void 0) return;
+		const list = chapters(video);
+		this.hidden = list.length === 0;
+		const current = String(chapterAt(list, video.currentTime));
+		const items = list.map((chapter, i) => [
+			String(i),
+			chapter.title,
+			format(chapter.start)
+		]);
+		const key = `${current}|${items.map(([, title, start]) => `${start} ${title}`).join("\n")}`;
+		if (key === this.drawn) return;
+		this.drawn = key;
+		this.menu.fill([{
+			name: "chapter",
+			items,
+			value: current,
+			onSelect: (value) => {
+				const chapter = list[Number(value)];
+				if (chapter !== void 0) video.currentTime = chapter.start;
+			}
+		}]);
+	}
+};
+//#endregion
+export { MbxChaptersMenu };

package/dist/es2015/elements/component.js

@@ -0,0 +1,85 @@
+import { PLAYER } from "../tags.js";
+import { findPlayer } from "../host.js";
+//#region src/elements/component.ts
+var Component = class extends HTMLElement {
+	constructor() {
+		super();
+		this.player = null;
+		this.offs = [];
+		this.epoch = 0;
+	}
+	connectedCallback() {
+		const found = findPlayer(this);
+		if (found === null) return;
+		this.epoch += 1;
+		const epoch = this.epoch;
+		const attach = () => {
+			if (epoch !== this.epoch || !this.isConnected) return;
+			customElements.upgrade(found);
+			if (!("video" in found)) return;
+			this.player = found;
+			this.attach(this.player);
+		};
+		if ("video" in found) attach();
+		else customElements.whenDefined(PLAYER).then(attach);
+	}
+	disconnectedCallback() {
+		this.epoch += 1;
+		for (const off of this.offs) off();
+		this.offs = [];
+		const player = this.player;
+		if (player === null) return;
+		this.player = null;
+		this.detach(player);
+	}
+	attributeChangedCallback() {
+		if (this.player !== null) this.render();
+	}
+	/** Adds `fn` for every name on `target`, to be removed on detach. */
+	listen(target, names, fn) {
+		for (const name of names) target.addEventListener(name, fn);
+		this.offs.push(() => {
+			for (const name of names) target.removeEventListener(name, fn);
+		});
+	}
+	/** Keeps `off` to run on detach. */
+	keep(off) {
+		this.offs.push(off);
+	}
+	/**
+	* Runs `fn` over the current engine now and on every session change,
+	* running what the last call returned first, so a control's engine
+	* subscriptions live exactly as long as the session. Detach runs it too.
+	*/
+	follow(player, fn) {
+		let off;
+		const run = () => {
+			off === null || off === void 0 || off();
+			off = fn(player.engine);
+		};
+		this.listen(player, ["sourcechange"], run);
+		this.offs.push(() => {
+			off === null || off === void 0 || off();
+			off = void 0;
+		});
+		run();
+	}
+	/** Runs `fn` when any of `names` changes on `target`, or under it with `subtree`, until detach. */
+	observe(target, names, fn, subtree = false) {
+		const observer = new MutationObserver(fn);
+		observer.observe(target, {
+			attributes: true,
+			attributeFilter: [...names],
+			subtree
+		});
+		this.offs.push(() => {
+			observer.disconnect();
+		});
+	}
+	/** The control left its player. Listeners are already gone; undo anything else. */
+	detach(_player) {}
+	/** Draws the current state. Called on every observed attribute change while attached. */
+	render() {}
+};
+//#endregion
+export { Component };