@mattebox/player 0.1.0

package/dist/es2015/controls/seek.js

@@ -0,0 +1,203 @@
+import { el } from "../dom.js";
+import { EMPTY, at, clip, fraction, spans, window } from "./ranges.js";
+import { slider } from "./slider.js";
+import { clock, describe, format } from "./time.js";
+//#region src/controls/seek.ts
+/** 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 events on which the row re-reads the video. */
+const EVENTS = [
+	"timeupdate",
+	"progress",
+	"durationchange",
+	"loadedmetadata",
+	"seeking",
+	"seeked",
+	"emptied"
+];
+function percent(part) {
+	return `${part * 100}%`;
+}
+function seekBar(video, flag, options) {
+	let source = {};
+	let span = EMPTY;
+	let pending = null;
+	let frame = 0;
+	function isLive() {
+		const live = source.live;
+		return live !== void 0 && live.edge !== null;
+	}
+	/** The wall clock at a presentation time, when the session can say it. */
+	function wall(time) {
+		var _source$pdt$toWallClo, _source$pdt;
+		const epoch = (_source$pdt$toWallClo = (_source$pdt = source.pdt) === null || _source$pdt === void 0 ? void 0 : _source$pdt.toWallClock(time)) !== null && _source$pdt$toWallClo !== void 0 ? _source$pdt$toWallClo : null;
+		return epoch === null ? null : clock(epoch);
+	}
+	/** What a screen reader hears at a time. */
+	function say(time) {
+		if (!isLive()) return describe(time, span.end);
+		const behind = `${format(span.end - time)} behind live`;
+		const at = wall(time);
+		return at === null ? behind : `${at}, ${behind}`;
+	}
+	/** What the preview and the time show at a time. */
+	function label(time) {
+		var _wall;
+		if (!isLive()) return format(time);
+		return (_wall = wall(time)) !== null && _wall !== void 0 ? _wall : `-${format(span.end - time)}`;
+	}
+	function flush() {
+		frame = 0;
+		if (pending === null) return;
+		video.currentTime = pending;
+		pending = null;
+	}
+	const current = el("span", "current-time", "0:00");
+	const duration = el("span", "duration", "0:00");
+	const bar = slider({
+		name: "seek",
+		label: "Seek",
+		step: options.seekStep,
+		page: options.seekPage,
+		onInput(value) {
+			bar.set(value, say(value));
+			current.textContent = label(value);
+			if (!bar.dragging()) {
+				pending = null;
+				video.currentTime = value;
+				return;
+			}
+			pending = value;
+			if (frame === 0) frame = requestAnimationFrame(flush);
+		}
+	});
+	const root = el("div", "row seek-row");
+	root.append(current, bar.root, duration);
+	const buffered = el("div", "buffered seek-buffered");
+	const hover = el("div", "hover seek-hover");
+	const edge = el("div", "edge seek-edge");
+	hover.hidden = true;
+	edge.hidden = true;
+	bar.track.prepend(buffered);
+	bar.track.append(hover, edge);
+	const preview = el("div", "preview seek-preview");
+	const image = el("div", "preview-image seek-preview-image");
+	const tile = el("div", "preview-tile seek-preview-tile");
+	const time = el("span", "preview-time seek-preview-time");
+	image.append(tile);
+	image.hidden = true;
+	preview.append(image, time);
+	preview.hidden = true;
+	bar.root.append(preview);
+	/** The width the page asked for through the token, or the default. */
+	function previewWidth() {
+		const set = Number.parseFloat(getComputedStyle(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. */
+	function paintTile(when) {
+		var _source$thumbnails$at, _source$thumbnails;
+		const found = (_source$thumbnails$at = (_source$thumbnails = source.thumbnails) === null || _source$thumbnails === void 0 ? void 0 : _source$thumbnails.at(when)) !== null && _source$thumbnails$at !== void 0 ? _source$thumbnails$at : null;
+		image.hidden = found === null;
+		if (found === null) return;
+		const scale = previewWidth() / found.width;
+		image.style.width = `${found.width * scale}px`;
+		image.style.height = `${found.height * scale}px`;
+		tile.style.width = `${found.width}px`;
+		tile.style.height = `${found.height}px`;
+		tile.style.backgroundImage = `url("${found.url}")`;
+		tile.style.backgroundPosition = `-${found.x}px -${found.y}px`;
+		tile.style.transform = `scale(${scale})`;
+	}
+	function paintBuffered() {
+		var _buffered$lastElement;
+		const parts = clip(spans(video.buffered), span);
+		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 seek-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. */
+	function worthSeeking() {
+		var _source$bufferGoal, _source$bufferGoal2;
+		if (options.liveWindow === 0) return true;
+		const goal = (_source$bufferGoal = (_source$bufferGoal2 = source.bufferGoal) === null || _source$bufferGoal2 === void 0 ? void 0 : _source$bufferGoal2.call(source)) !== null && _source$bufferGoal !== void 0 ? _source$bufferGoal : BUFFER_GOAL;
+		return span.end - span.start >= options.liveWindow * goal;
+	}
+	function tick() {
+		var _source$window, _source$window2;
+		const on = isLive();
+		const own = on ? (_source$window = (_source$window2 = source.window) === null || _source$window2 === void 0 ? void 0 : _source$window2.call(source)) !== null && _source$window !== void 0 ? _source$window : null : null;
+		span = own !== null && own.end > own.start ? own : window(video.duration, spans(video.seekable), on);
+		bar.range(span.start, span.end);
+		paintBuffered();
+		const live = source.live;
+		edge.hidden = !on;
+		if (on && live !== void 0 && live.edge !== null) edge.style.left = percent(fraction(live.edge, span));
+		const seekable = !on || worthSeeking();
+		bar.root.hidden = !seekable;
+		current.hidden = !seekable;
+		duration.hidden = on;
+		flag("live", on);
+		flag("seekable", seekable);
+		if (!on) duration.textContent = format(span.end);
+		if (!bar.dragging()) {
+			bar.set(video.currentTime, say(video.currentTime));
+			current.textContent = label(video.currentTime);
+		}
+	}
+	/** The hover marker and the preview follow the pointer, clamped to the bar. */
+	function point(event) {
+		const rect = bar.rail.getBoundingClientRect();
+		if (rect.width === 0 || span.end <= span.start) return;
+		const part = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+		hover.hidden = false;
+		hover.style.left = percent(part);
+		preview.hidden = false;
+		const when = at(part, span);
+		time.textContent = label(when);
+		paintTile(when);
+		const whole = bar.root.getBoundingClientRect();
+		const half = preview.offsetWidth / 2;
+		const x = rect.left - whole.left + part * rect.width;
+		preview.style.left = `${Math.min(whole.width - half, Math.max(half, x))}px`;
+	}
+	function leave() {
+		hover.hidden = true;
+		preview.hidden = true;
+	}
+	bar.root.addEventListener("pointermove", point);
+	bar.root.addEventListener("pointerleave", leave);
+	for (const name of EVENTS) video.addEventListener(name, tick);
+	tick();
+	return {
+		root,
+		attach(found) {
+			source = found;
+			tick();
+		},
+		detach() {
+			source = {};
+			leave();
+			tick();
+		},
+		dispose() {
+			cancelAnimationFrame(frame);
+			bar.root.removeEventListener("pointermove", point);
+			bar.root.removeEventListener("pointerleave", leave);
+			for (const name of EVENTS) video.removeEventListener(name, tick);
+			bar.dispose();
+		}
+	};
+}
+//#endregion
+export { seekBar };

package/dist/es2015/controls/slider.js

@@ -0,0 +1,136 @@
+import { el, state } from "../dom.js";
+//#region src/controls/slider.ts
+/**
+* The slider primitive the seek bar and the volume share: a `div` with
+* `role="slider"`, pointer capture for the drag, and the arrow keys. It
+* owns geometry only. What the value means and what happens on change is
+* the caller's, through `onInput`.
+*
+* Not `<input type="range">`: a range input cannot carry layers such as
+* buffered ranges, its geometry is not readable for a preview anchor, and
+* it renders differently per browser. The track is exposed so a caller can
+* lay its own layers on it.
+*
+* 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.
+*/
+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}`);
+	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`);
+	track.append(fill);
+	rail.append(track, thumb);
+	root.append(rail);
+	let min = 0;
+	let max = 1;
+	let value = 0;
+	let held = false;
+	function paint() {
+		const percent = `${(max > min ? (value - min) / (max - min) : 0) * 100}%`;
+		fill.style.width = percent;
+		thumb.style.left = percent;
+	}
+	/** The value under a horizontal pointer position. */
+	function at(clientX) {
+		const rect = rail.getBoundingClientRect();
+		if (rect.width === 0) return min;
+		return min + clamp((clientX - rect.left) / rect.width, 0, 1) * (max - min);
+	}
+	function hold(on) {
+		held = on;
+		state(root, `slider ${name}`, { dragging: on });
+	}
+	function down(event) {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		hold(true);
+		try {
+			root.setPointerCapture(event.pointerId);
+		} catch (_unused) {}
+		onInput(at(event.clientX));
+	}
+	function move(event) {
+		if (held) onInput(at(event.clientX));
+	}
+	function up(event) {
+		if (!held) return;
+		hold(false);
+		onInput(at(event.clientX));
+	}
+	function cancel() {
+		if (held) hold(false);
+	}
+	function key(event) {
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				next = value + options.step;
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				next = value - options.step;
+				break;
+			case "PageUp":
+				next = value + options.page;
+				break;
+			case "PageDown":
+				next = value - options.page;
+				break;
+			case "Home":
+				next = min;
+				break;
+			case "End":
+				next = max;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		onInput(clamp(next, min, max));
+	}
+	root.addEventListener("pointerdown", down);
+	root.addEventListener("pointermove", move);
+	root.addEventListener("pointerup", up);
+	root.addEventListener("pointercancel", cancel);
+	root.addEventListener("keydown", key);
+	return {
+		root,
+		track,
+		rail,
+		dragging() {
+			return held;
+		},
+		range(low, high) {
+			min = low;
+			max = high;
+			root.setAttribute("aria-valuemin", String(low));
+			root.setAttribute("aria-valuemax", String(high));
+			paint();
+		},
+		set(next, text) {
+			value = clamp(next, min, max);
+			root.setAttribute("aria-valuenow", String(value));
+			root.setAttribute("aria-valuetext", text);
+			paint();
+		},
+		dispose() {
+			root.removeEventListener("pointerdown", down);
+			root.removeEventListener("pointermove", move);
+			root.removeEventListener("pointerup", up);
+			root.removeEventListener("pointercancel", cancel);
+			root.removeEventListener("keydown", key);
+		}
+	};
+}
+//#endregion
+export { slider };

package/dist/es2015/controls/speed.js

@@ -0,0 +1,41 @@
+import { menu } from "./menu.js";
+//#region src/controls/speed.ts
+const RATES = [
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2
+];
+function speedMenu(video) {
+	const control = menu({
+		name: "speed",
+		label: "Playback speed",
+		icon: "playback-speed"
+	});
+	function render() {
+		const items = RATES.map((rate) => [String(rate), rate === 1 ? "Normal" : `${rate}×`]);
+		const current = String(video.playbackRate);
+		if (!RATES.some((rate) => String(rate) === current)) items.push([current, `${current}×`]);
+		control.fill([{
+			name: "rate",
+			items,
+			value: current,
+			onSelect(value) {
+				video.playbackRate = Number(value);
+			}
+		}]);
+	}
+	video.addEventListener("ratechange", render);
+	render();
+	return {
+		root: control.root,
+		dispose() {
+			video.removeEventListener("ratechange", render);
+			control.dispose();
+		}
+	};
+}
+//#endregion
+export { speedMenu };

package/dist/es2015/controls/time.js

@@ -0,0 +1,27 @@
+//#region src/controls/time.ts
+/** Time as the bar shows it and as a screen reader hears it. Pure, node-tested. */
+function pad(n) {
+	return n < 10 ? `0${n}` : `${n}`;
+}
+/** `m:ss`, or `h:mm:ss` from an hour up. Anything not a finite positive number reads as zero. */
+function format(seconds) {
+	const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const rest = total % 60;
+	return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;
+}
+/** A wall-clock time in the viewer's locale, seconds included: "14:23:05". */
+function clock(epochSeconds) {
+	return (/* @__PURE__ */ new Date(epochSeconds * 1e3)).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		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 };

package/dist/es2015/controls/volume.js

@@ -0,0 +1,30 @@
+import { slider } from "./slider.js";
+//#region src/controls/volume.ts
+function volumeSlider(video) {
+	const bar = slider({
+		name: "volume",
+		label: "Volume",
+		step: .05,
+		page: .2,
+		onInput(value) {
+			video.volume = value;
+			if (value > 0) video.muted = false;
+		}
+	});
+	bar.range(0, 1);
+	function render() {
+		const level = video.muted ? 0 : video.volume;
+		bar.set(level, `${Math.round(level * 100)}%`);
+	}
+	video.addEventListener("volumechange", render);
+	render();
+	return {
+		root: bar.root,
+		dispose() {
+			video.removeEventListener("volumechange", render);
+			bar.dispose();
+		}
+	};
+}
+//#endregion
+export { volumeSlider };

package/dist/es2015/dom.js

@@ -0,0 +1,43 @@
+//#region src/dom.ts
+/**
+* The DOM helpers the panels 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.
+*/
+/** An element with its part names, and its text when it has any. */
+function el(tag, part, text) {
+	const node = document.createElement(tag);
+	node.setAttribute("part", part);
+	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];
+	for (const key of Object.keys(on)) if (on[key] === true) names.push(key);
+	node.setAttribute("part", names.join(" "));
+}
+//#endregion
+export { el, fill, menu, state };