@mattebox/player 0.1.0 → 0.2.0

package/dist/es2015/controls/bar.js

@@ -1,227 +0,0 @@
-import { el, state } from "../dom.js";
-import { namespaces } from "../namespaces.js";
-import { fullscreenButton, muteButton, pipButton, playButton, skipButton } from "./buttons.js";
-import { cueLift, cueStyle } from "./cues.js";
-import { fullscreen } from "./fullscreen.js";
-import { keys } from "./keys.js";
-import { liveButton } from "./live.js";
-import { MENUS } from "./menus.js";
-import { clusters } from "./options.js";
-import { pictureInPicture } from "./pip.js";
-import { errorScreen, startButton } from "./screens.js";
-import { seekBar } from "./seek.js";
-import { speedMenu } from "./speed.js";
-import { volumeSlider } from "./volume.js";
-//#region src/controls/bar.ts
-function controlBar(host, stage, video, options, reflect, retry) {
-	const root = el("div", "controls");
-	const flags = {};
-	let timer;
-	/** Whether the last input was a key, so focus inside is a keyboard user's and holds the bar. */
-	let keyboard = false;
-	function render() {
-		state(root, "controls", flags);
-	}
-	function flag(name, on) {
-		if (flags[name] === on) return;
-		flags[name] = on;
-		render();
-		if (name === "fullscreen") reflect(name, on);
-		if (name === "idle") cues.lifted(!on);
-		if (name === "seekable") live.seekable(on);
-	}
-	/** What keeps the bar up when the timer fires. Read then, never remembered. */
-	function held() {
-		if (video.paused) return true;
-		if (root.querySelector("[part~=\"open\"]") !== null) return true;
-		if (!keyboard) return false;
-		const active = root.getRootNode().activeElement;
-		return active !== null && root.contains(active);
-	}
-	function sleep() {
-		timer = void 0;
-		if (held()) {
-			timer = setTimeout(sleep, options.idleMs);
-			return;
-		}
-		flag("idle", true);
-	}
-	/** Shows the bar and arms the timer again. */
-	function wake() {
-		clearTimeout(timer);
-		if (flags.idle === true) flag("idle", false);
-		timer = setTimeout(sleep, options.idleMs);
-	}
-	function pointer() {
-		keyboard = false;
-		wake();
-	}
-	function key() {
-		keyboard = true;
-		wake();
-	}
-	cueStyle();
-	const cues = cueLift(video, root, host);
-	const live = liveButton(video);
-	const seek = seekBar(video, flag, options);
-	seek.root.append(live.root);
-	const screen = fullscreen(host, stage, video);
-	const start = startButton(video, flag, options.start !== 0);
-	const failure = errorScreen(retry);
-	/** An error over a picture that then plays is wrong by definition: playback resuming clears it. */
-	function played() {
-		if (failure.shown()) {
-			failure.clear();
-			start.root.hidden = !video.paused;
-		}
-	}
-	video.addEventListener("playing", played);
-	stage.append(start.root, failure.root);
-	/** The menus' places in the row, filled per session. */
-	const slots = /* @__PURE__ */ new Map();
-	let session = [];
-	/** A control by the name the layout gives it, or null for a name that is not one. */
-	function build(name) {
-		switch (name) {
-			case "skip-back": return options.skipBack > 0 ? skipButton(video, -options.skipBack) : null;
-			case "skip-forward": return options.skipForward > 0 ? skipButton(video, options.skipForward) : null;
-			case "play": return playButton(video, flag);
-			case "volume": {
-				const group = el("div", "group volume-group");
-				const sound = [muteButton(video, flag), volumeSlider(video)];
-				for (const control of sound) group.append(control.root);
-				return {
-					root: group,
-					dispose() {
-						for (const control of sound) control.dispose();
-					}
-				};
-			}
-			case "speed": return speedMenu(video);
-			case "pip": return pipButton(pictureInPicture(video), flag);
-			case "fullscreen": return fullscreenButton(screen, flag);
-			default: {
-				if (!(name in MENUS)) return null;
-				const slot = el("div", `slot ${name}-slot`);
-				slots.set(name, slot);
-				return {
-					root: slot,
-					dispose() {}
-				};
-			}
-		}
-	}
-	const row = el("div", "row buttons");
-	const cluster = el("div", "cluster");
-	const built = [];
-	const [leftNames, rightNames] = clusters(options.layout);
-	for (const name of leftNames) {
-		const control = build(name);
-		if (control === null) continue;
-		built.push(control);
-		row.append(control.root);
-	}
-	for (const name of rightNames) {
-		const control = build(name);
-		if (control === null) continue;
-		built.push(control);
-		cluster.append(control.root);
-	}
-	row.append(cluster);
-	root.append(seek.root, row);
-	const controls = [
-		...built,
-		live,
-		start,
-		failure,
-		keys({
-			host,
-			stage,
-			own: [
-				root,
-				start.root,
-				failure.root
-			],
-			video,
-			step: options.seekStep,
-			fullscreen: screen
-		}),
-		cues
-	];
-	function drop() {
-		for (const control of session) control.dispose();
-		session = [];
-		for (const slot of slots.values()) slot.replaceChildren();
-	}
-	stage.addEventListener("pointermove", pointer);
-	stage.addEventListener("pointerdown", pointer);
-	host.addEventListener("keydown", key);
-	video.addEventListener("play", wake);
-	video.addEventListener("pause", wake);
-	video.addEventListener("ended", wake);
-	wake();
-	cues.lifted(true);
-	return {
-		root,
-		attach(current) {
-			drop();
-			const engine = current.engine;
-			if (engine === null) {
-				seek.attach({});
-				live.attach(void 0);
-				return;
-			}
-			const found = namespaces(engine);
-			seek.attach({
-				live: found.live,
-				thumbnails: found.thumbnails,
-				pdt: found.pdt,
-				bufferGoal: () => engine.stats.snapshot().scheduling.bufferGoal,
-				window: () => {
-					var _engine$stats$snapsho, _engine$stats$snapsho2;
-					return (_engine$stats$snapsho = (_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;
-				}
-			});
-			live.attach(found.live);
-			for (const [name, slot] of slots) {
-				const factory = MENUS[name];
-				if (factory === void 0) continue;
-				const control = factory({
-					engine,
-					host
-				});
-				session.push(control);
-				slot.append(control.root);
-			}
-		},
-		detach() {
-			drop();
-			seek.detach();
-			live.detach();
-		},
-		error(error) {
-			failure.show(error);
-			start.root.hidden = true;
-		},
-		clearError() {
-			failure.clear();
-			start.root.hidden = options.start === 0 || !video.paused;
-		},
-		dispose() {
-			clearTimeout(timer);
-			drop();
-			seek.dispose();
-			for (const control of controls) control.dispose();
-			stage.removeEventListener("pointermove", pointer);
-			stage.removeEventListener("pointerdown", pointer);
-			host.removeEventListener("keydown", key);
-			video.removeEventListener("play", wake);
-			video.removeEventListener("pause", wake);
-			video.removeEventListener("ended", wake);
-			video.removeEventListener("playing", played);
-			root.remove();
-		}
-	};
-}
-//#endregion
-export { controlBar };

package/dist/es2015/controls/buttons.js

@@ -1,146 +0,0 @@
-import { el } from "../dom.js";
-import { glyph, icon } from "./icons.js";
-//#region src/controls/buttons.ts
-/**
-* The buttons: play/pause, mute, fullscreen. Each reads the video on the
-* events the video already fires, swaps its glyph and its name, and writes
-* one thing back on click. The glyph is decoration; the name is on the
-* button, where a screen reader reads it.
-*/
-/** A button with its glyph. `control` is the generic name, so `::part(control)` reaches every one. */
-function button(name, first) {
-	const node = el("button", `control ${name}-button`);
-	node.type = "button";
-	const svg = icon(first);
-	node.append(svg);
-	return [node, svg];
-}
-function listen(target, names, fn) {
-	for (const name of names) target.addEventListener(name, fn);
-	return () => {
-		for (const name of names) target.removeEventListener(name, fn);
-	};
-}
-function playButton(video, flag) {
-	const [root, svg] = button("play", "play");
-	function render() {
-		const paused = video.paused;
-		const name = video.ended ? "replay" : paused ? "play" : "pause";
-		glyph(svg, name);
-		root.setAttribute("aria-label", video.ended ? "Replay" : paused ? "Play" : "Pause");
-		flag("playing", !paused);
-	}
-	function click() {
-		if (video.paused) video.play().catch(() => void 0);
-		else video.pause();
-	}
-	root.addEventListener("click", click);
-	const off = listen(video, [
-		"play",
-		"pause",
-		"ended",
-		"emptied"
-	], render);
-	render();
-	return {
-		root,
-		dispose() {
-			root.removeEventListener("click", click);
-			off();
-		}
-	};
-}
-function muteButton(video, flag) {
-	const [root, svg] = button("mute", "volume-high");
-	function render() {
-		const silent = video.muted || video.volume === 0;
-		const name = silent ? "mute" : video.volume <= .5 ? "volume-low" : "volume-high";
-		glyph(svg, name);
-		root.setAttribute("aria-label", silent ? "Unmute" : "Mute");
-		root.setAttribute("aria-pressed", String(video.muted));
-		flag("muted", silent);
-	}
-	function click() {
-		if (video.muted) {
-			video.muted = false;
-			if (video.volume === 0) video.volume = 1;
-		} else video.muted = true;
-	}
-	root.addEventListener("click", click);
-	const off = listen(video, ["volumechange", "emptied"], render);
-	render();
-	return {
-		root,
-		dispose() {
-			root.removeEventListener("click", click);
-			off();
-		}
-	};
-}
-/** The glyph for a skip amount: the set draws 10 and 30, and a plain arrow says the rest. */
-function skipGlyph(back, amount) {
-	const side = back ? "seek-backward" : "seek-forward";
-	if (amount === 10 || amount === 30) return `${side}-${amount}`;
-	return side;
-}
-/** Moves the playhead by `seconds`, negative for back, within what the video can reach. */
-function skipButton(video, seconds) {
-	const back = seconds < 0;
-	const amount = Math.abs(seconds);
-	const [root] = button(back ? "skip-back" : "skip-forward", skipGlyph(back, amount));
-	root.setAttribute("aria-label", `${back ? "Back" : "Forward"} ${amount} seconds`);
-	function click() {
-		const ranges = video.seekable;
-		const end = Number.isFinite(video.duration) ? video.duration : ranges.length > 0 ? ranges.end(ranges.length - 1) : video.currentTime;
-		video.currentTime = Math.min(end, Math.max(0, video.currentTime + seconds));
-	}
-	root.addEventListener("click", click);
-	return {
-		root,
-		dispose() {
-			root.removeEventListener("click", click);
-		}
-	};
-}
-function pipButton(api, flag) {
-	const [root, svg] = button("pip", "picture-in-picture");
-	root.hidden = !api.supported;
-	function render() {
-		const active = api.active();
-		glyph(svg, active ? "picture-in-picture-exit" : "picture-in-picture");
-		root.setAttribute("aria-label", active ? "Leave picture in picture" : "Picture in picture");
-		flag("pip", active);
-	}
-	root.addEventListener("click", api.toggle);
-	const off = api.watch(render);
-	render();
-	return {
-		root,
-		dispose() {
-			root.removeEventListener("click", api.toggle);
-			off();
-		}
-	};
-}
-function fullscreenButton(api, flag) {
-	const [root, svg] = button("fullscreen", "fullscreen");
-	root.hidden = !api.supported;
-	function render() {
-		const active = api.active();
-		glyph(svg, active ? "fullscreen-exit" : "fullscreen");
-		root.setAttribute("aria-label", active ? "Exit fullscreen" : "Enter fullscreen");
-		flag("fullscreen", active);
-	}
-	root.addEventListener("click", api.toggle);
-	const off = api.watch(render);
-	render();
-	return {
-		root,
-		dispose() {
-			root.removeEventListener("click", api.toggle);
-			off();
-		}
-	};
-}
-//#endregion
-export { button, fullscreenButton, muteButton, pipButton, playButton, skipButton };

package/dist/es2015/controls/keys.js

@@ -1,60 +0,0 @@
-//#region src/controls/keys.ts
-function toggle(video) {
-	if (video.paused) video.play().catch(() => void 0);
-	else video.pause();
-}
-/** The end the playhead can reach: the duration, or the seekable end for live. */
-function end(video) {
-	if (Number.isFinite(video.duration)) return video.duration;
-	const ranges = video.seekable;
-	return ranges.length > 0 ? ranges.end(ranges.length - 1) : video.currentTime;
-}
-function keys(options) {
-	const { host, stage, own, video } = options;
-	function onKey(event) {
-		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
-		const onButton = event.composedPath()[0] instanceof HTMLButtonElement;
-		switch (event.key) {
-			case " ":
-				if (onButton) return;
-				toggle(video);
-				break;
-			case "k":
-			case "K":
-				toggle(video);
-				break;
-			case "m":
-			case "M":
-				video.muted = !video.muted;
-				break;
-			case "f":
-			case "F":
-				options.fullscreen.toggle();
-				break;
-			case "ArrowLeft":
-				video.currentTime = Math.max(0, video.currentTime - options.step);
-				break;
-			case "ArrowRight":
-				video.currentTime = Math.min(end(video), video.currentTime + options.step);
-				break;
-			default: return;
-		}
-		event.preventDefault();
-	}
-	function onClick(event) {
-		const path = event.composedPath();
-		if (own.some((node) => path.includes(node))) return;
-		toggle(video);
-	}
-	host.addEventListener("keydown", onKey);
-	stage.addEventListener("click", onClick);
-	return {
-		root: stage,
-		dispose() {
-			host.removeEventListener("keydown", onKey);
-			stage.removeEventListener("click", onClick);
-		}
-	};
-}
-//#endregion
-export { keys };

package/dist/es2015/controls/live.js

@@ -1,60 +0,0 @@
-import { el, state } from "../dom.js";
-//#region src/controls/live.ts
-/**
-* The live button: a dot and the word, the dot red at the edge and grey
-* behind it, the way viewers read it everywhere. Shown once the stream has
-* an availability window, which is what makes it live; disabled at the
-* edge, where there is nowhere to go; a click seeks to the edge. The same
-* test the live panel uses.
-*
-* Without a seek bar, when the window is too narrow to be worth one, there
-* is nowhere to come back from either: the dot stays red and the button
-* stays inert, whatever the playhead does.
-*/
-function liveButton(video) {
-	const root = el("button", "control live-button");
-	root.type = "button";
-	const dot = el("span", "live-dot");
-	root.append(dot, el("span", "live-text", "LIVE"));
-	root.setAttribute("aria-label", "Go to the live edge");
-	root.hidden = true;
-	let live;
-	let bar = true;
-	function tick() {
-		const on = live !== void 0 && live.edge !== null;
-		root.hidden = !on;
-		if (!on) return;
-		const atEdge = !bar || (live === null || live === void 0 ? void 0 : live.atEdge) === true;
-		root.disabled = atEdge;
-		state(root, "control live-button", { "at-edge": atEdge });
-		state(dot, "live-dot", { "at-edge": atEdge });
-		root.setAttribute("aria-label", atEdge ? "At the live edge" : "Go to the live edge");
-	}
-	function click() {
-		live === null || live === void 0 || live.seekToEdge();
-	}
-	root.addEventListener("click", click);
-	video.addEventListener("timeupdate", tick);
-	tick();
-	return {
-		root,
-		attach(found) {
-			live = found;
-			tick();
-		},
-		detach() {
-			live = void 0;
-			tick();
-		},
-		seekable(on) {
-			bar = on;
-			tick();
-		},
-		dispose() {
-			root.removeEventListener("click", click);
-			video.removeEventListener("timeupdate", tick);
-		}
-	};
-}
-//#endregion
-export { liveButton };