@mattebox/player 0.1.0 → 0.3.0

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 };

package/dist/es2015/controls/menus.js

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

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

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