@seams/voice-capture 0.0.0-stage → 0.66.0

package/dist/esm/card/phraseCard.js

@@ -0,0 +1,459 @@
+//#region src/card/phraseCard.ts
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+const WIDTH = 308;
+const MID = 32;
+const SEGMENTS = 6;
+const GAP = 8;
+const FADE_OUT_MS = 150;
+const FADE_IN_MS = 300;
+const FADE_IN_DELAY_MS = 60;
+const ROW_STAGGER_MS = 40;
+const RIBBON_MOVE_MS = 180;
+const FLATTEN_MS = 200;
+const OPEN_MS = 200;
+const TRACK_MS = 240;
+const FILL_STAGGER_MS = 70;
+const BLOCKER_HOLD_MS = 240;
+const DETAIL_ROTATE_MS = 1300;
+const DETAIL_OUT_MS = 90;
+const DETAIL_IN_MS = 160;
+const GAP_CLOSE_MS = 240;
+const RING_MS = 440;
+const SEAL_MS = 320;
+const CHECK_MS = 260;
+const RING_RADIUS = 21.5;
+const SEAL_RADIUS = 22.5;
+const CHECK_PATH = "M161 26.8 151.4 36.3 147.1 32";
+const EASE_IN_OUT = "cubic-bezier(0.2, 0, 0, 1)";
+const EASE_MOVE = "cubic-bezier(0.2, 0.7, 0.2, 1)";
+const EASE_RING = "cubic-bezier(0.65, 0, 0.35, 1)";
+const EASE_SEAL = "cubic-bezier(0.34, 1.56, 0.64, 1)";
+const PASSKEY_PATHS = [
+	"M18.9 7a8 8 0 0 1 1.1 5v1a6 6 0 0 0 .8 3",
+	"M8 11a4 4 0 0 1 8 0v1a10 10 0 0 0 2 6",
+	"M12 11v2a14 14 0 0 0 2.5 8",
+	"M8 15a18 18 0 0 0 1.8 6",
+	"M4.9 19a22 22 0 0 1-.9-7v-1a8 8 0 0 1 12-6.95"
+];
+/** Draws the states of the phrase card. The surface owns the recording and the choices. */
+var PhraseCard = class {
+	line;
+	segments = [];
+	bar;
+	ring;
+	seal;
+	check;
+	motion = matchMedia("(prefers-reduced-motion: reduce)");
+	rows;
+	states = [];
+	rendering = Promise.resolve();
+	morph = null;
+	rotation = 0;
+	version = 0;
+	disposed = false;
+	constructor(prompt, copy, handedOver = null) {
+		this.prompt = prompt;
+		this.copy = copy;
+		const document = prompt.element.ownerDocument;
+		this.line = document.createElementNS(SVG_NAMESPACE, "svg");
+		this.line.classList.add("seams-voiceid-status-line");
+		this.line.setAttribute("viewBox", `0 0 ${WIDTH} 64`);
+		this.line.setAttribute("aria-hidden", "true");
+		for (let index = 0; index < SEGMENTS; index += 1) {
+			const segment = document.createElementNS(SVG_NAMESPACE, "rect");
+			segment.setAttribute("rx", "1.5");
+			this.line.append(segment);
+			this.segments.push(segment);
+		}
+		this.bar = document.createElementNS(SVG_NAMESPACE, "path");
+		this.bar.classList.add("seams-voiceid-status-bar");
+		this.bar.setAttribute("d", `M1.5 ${MID}H${WIDTH - 1.5}`);
+		this.ring = document.createElementNS(SVG_NAMESPACE, "circle");
+		this.ring.classList.add("seams-voiceid-status-ring");
+		this.ring.setAttribute("r", String(RING_RADIUS));
+		this.seal = document.createElementNS(SVG_NAMESPACE, "circle");
+		this.seal.classList.add("seams-voiceid-status-seal");
+		this.seal.setAttribute("r", String(SEAL_RADIUS));
+		for (const circle of [this.ring, this.seal]) {
+			circle.setAttribute("cx", String(WIDTH / 2));
+			circle.setAttribute("cy", String(MID));
+		}
+		this.check = document.createElementNS(SVG_NAMESPACE, "path");
+		this.check.classList.add("seams-voiceid-status-check");
+		this.check.setAttribute("d", CHECK_PATH);
+		this.check.setAttribute("pathLength", "1");
+		this.line.append(this.bar, this.ring, this.seal, this.check);
+		prompt.ribbon.after(this.line);
+		this.rows = handedOver ? {
+			...this.promptRows(),
+			label: handedOver.label,
+			caption: `handed-over:${handedOver.message}`,
+			action: ""
+		} : this.promptRows();
+		this.layoutSegments(0, 3);
+	}
+	/** The sentence with Record, after a check or a result. The wave comes back. */
+	showPrompt() {
+		const version = this.begin();
+		return this.queue(async () => {
+			if (this.stale(version)) return;
+			const element = this.prompt.element;
+			element.removeAttribute("aria-busy");
+			await this.transition(this.promptRows(), version, () => {
+				delete element.dataset.phraseView;
+				delete element.dataset.phraseLine;
+				this.writeCaption(this.copy.message, []);
+				this.writeAction({ label: this.copy.action });
+				this.resetLine();
+				this.prompt.ready(this.copy.message);
+			});
+			if (!this.stale(version)) this.prompt.record.focus();
+		});
+	}
+	/** The end of speech: the wave flattens and opens into segments, the first one filled. */
+	beginCheck() {
+		if (this.disposed || this.morph) return;
+		this.prompt.flattenLine();
+		this.morph = this.openSegments();
+	}
+	show(view) {
+		const version = this.begin();
+		return this.queue(async () => {
+			if (this.stale(version)) return;
+			const element = this.prompt.element;
+			this.prompt.flattenLine();
+			this.morph ??= this.openSegments();
+			if (view.kind === "check") {
+				element.setAttribute("aria-busy", "true");
+				const detail = view.details[0] ?? "";
+				const rows = {
+					label: view.label,
+					head: this.copy.sentence,
+					headline: false,
+					dim: true,
+					caption: `check:${view.caption}:${detail}`,
+					action: ""
+				};
+				await this.transition(rows, version, () => {
+					element.dataset.phraseView = "check";
+					this.writeCaption(view.caption, [detail]);
+				});
+				await this.morph;
+				if (this.stale(version)) return;
+				await this.setSegments(view.segments);
+				if (!this.stale(version)) this.rotateDetails(view.details, version);
+				return;
+			}
+			element.removeAttribute("aria-busy");
+			await this.morph;
+			if (this.stale(version)) return;
+			if (view.line === "seal") await this.sealLine(version);
+			else await this.setSegments(view.line);
+			if (this.stale(version)) return;
+			this.prompt.quietLine();
+			const rows = {
+				label: view.label,
+				head: view.headline,
+				headline: true,
+				dim: false,
+				caption: `result:${JSON.stringify([
+					view.caption,
+					view.detail,
+					view.link ?? null
+				])}`,
+				action: `result:${view.action.icon ?? ""}:${view.action.label}`
+			};
+			await this.transition(rows, version, () => {
+				element.dataset.phraseView = "result";
+				this.writeCaption(this.markedText(view.caption), this.detailNodes(view));
+				this.writeAction(view.action);
+				this.prompt.record.hidden = false;
+			});
+			if (this.stale(version)) return;
+			this.prompt.record.disabled = view.action.busy === true;
+			if (!view.action.busy) this.prompt.record.focus();
+		});
+	}
+	/** The line stays in the card, which fades out as a whole when its surface closes. */
+	dispose() {
+		this.disposed = true;
+		this.version += 1;
+		window.clearInterval(this.rotation);
+	}
+	/** A newer state supersedes any state still on its way in. */
+	begin() {
+		window.clearInterval(this.rotation);
+		this.version += 1;
+		return this.version;
+	}
+	stale(version) {
+		return this.disposed || version !== this.version;
+	}
+	queue(step) {
+		this.rendering = this.rendering.then(step, step);
+		return this.rendering;
+	}
+	promptRows() {
+		return {
+			label: this.copy.label,
+			head: this.copy.sentence,
+			headline: false,
+			dim: false,
+			caption: `prompt:${this.copy.message}`,
+			action: `prompt:${this.copy.action}`
+		};
+	}
+	/**
+	* Rows whose content changes fade out together; `apply` then writes the new state, the card
+	* takes its new height, the ribbon row glides to its new place, and the new rows fade in one
+	* after another.
+	*/
+	async transition(next, version, apply) {
+		const prompt = this.prompt;
+		const changed = [
+			["label", prompt.title],
+			["head", prompt.phrase],
+			["caption", prompt.status],
+			["action", prompt.actionRow]
+		].filter(([key]) => this.rows[key] !== next[key] || key === "head" && this.rows.headline !== next.headline).map(([, element]) => element);
+		prompt.phrase.classList.toggle("seams-voiceid-phrase-dim", next.dim);
+		if (changed.length > 0 && !this.motion.matches) await Promise.all(changed.map((element) => fade(element, FADE_OUT_MS)));
+		if (this.stale(version)) return;
+		const ribbonTop = prompt.ribbon.getBoundingClientRect().top;
+		const heightBefore = prompt.element.getBoundingClientRect().height;
+		prompt.title.textContent = next.label;
+		prompt.phrase.textContent = next.head;
+		prompt.phrase.classList.toggle("seams-voiceid-success-headline", next.headline);
+		apply();
+		this.rows = next;
+		prompt.fillFrame(heightBefore);
+		const moved = ribbonTop - prompt.ribbon.getBoundingClientRect().top;
+		if (Math.abs(moved) > .5 && !this.motion.matches) for (const element of [prompt.ribbon, this.line]) element.animate([{ transform: `translateY(${moved}px)` }, { transform: "none" }], {
+			duration: RIBBON_MOVE_MS,
+			easing: EASE_MOVE
+		});
+		for (const [index, element] of changed.entries()) fadeIn(element, this.motion.matches, FADE_IN_DELAY_MS + index * ROW_STAGGER_MS);
+	}
+	markedText(text) {
+		if (typeof text === "string") return [text];
+		const document = this.prompt.element.ownerDocument;
+		return text.map((part) => {
+			if (typeof part === "string") return part;
+			const mark = document.createElement("mark");
+			mark.className = "seams-voiceid-heard-mark";
+			mark.textContent = part.mark;
+			return mark;
+		});
+	}
+	detailNodes(view) {
+		if (!view.link) return [view.detail];
+		const link = this.prompt.element.ownerDocument.createElement("a");
+		link.href = view.link.href;
+		link.target = "_blank";
+		link.rel = "noopener noreferrer";
+		link.textContent = view.link.text;
+		return [
+			view.detail,
+			" ",
+			link
+		];
+	}
+	/** One line for the prompt; a caption and a detail line for the check and the result. */
+	writeCaption(first, second) {
+		const status = this.prompt.status;
+		if (typeof first === "string" && second.length === 0) {
+			status.classList.remove("seams-voiceid-two-lines");
+			status.textContent = first;
+			return;
+		}
+		const document = status.ownerDocument;
+		const one = document.createElement("span");
+		one.className = "seams-voiceid-caption";
+		one.append(...typeof first === "string" ? [first] : first);
+		const two = document.createElement("span");
+		two.className = "seams-voiceid-caption-detail";
+		two.append(...second);
+		status.replaceChildren(one, two);
+		status.classList.add("seams-voiceid-two-lines");
+	}
+	writeAction(action) {
+		const button = this.prompt.record;
+		button.replaceChildren();
+		if (action.icon === "passkey") button.append(passkeyIcon(button.ownerDocument));
+		button.append(action.label);
+	}
+	/** Changes the second caption line every 1.3 s and stays on the last line. */
+	rotateDetails(details, version) {
+		if (details.length < 2) return;
+		let index = 0;
+		this.rotation = window.setInterval(() => {
+			index += 1;
+			if (index >= details.length - 1 || this.stale(version)) window.clearInterval(this.rotation);
+			if (index < details.length && !this.stale(version)) this.swapDetail(details[index], version);
+		}, DETAIL_ROTATE_MS);
+	}
+	async swapDetail(text, version) {
+		const detail = this.prompt.status.querySelector(".seams-voiceid-caption-detail");
+		if (!detail) return;
+		if (!this.motion.matches) await fade(detail, DETAIL_OUT_MS);
+		if (this.stale(version)) return;
+		detail.textContent = text;
+		detail.getAnimations().forEach((animation) => animation.cancel());
+		detail.animate([{
+			opacity: 0,
+			transform: this.motion.matches ? "none" : "translateY(2px)"
+		}, {
+			opacity: 1,
+			transform: "none"
+		}], {
+			duration: DETAIL_IN_MS,
+			easing: EASE_IN_OUT,
+			fill: "both"
+		});
+	}
+	/** The flat line opens into six segments; the first stays filled, the rest turn to track. */
+	async openSegments() {
+		await wait(this.motion.matches ? 0 : FLATTEN_MS);
+		if (this.disposed) return;
+		this.states = Array.from({ length: SEGMENTS }, () => "done");
+		this.paintStates();
+		this.prompt.element.dataset.phraseLine = "status";
+		await this.tween(this.motion.matches ? 0 : OPEN_MS, (progress) => this.layoutSegments(GAP * progress, 1 + 2 * progress));
+		if (this.disposed) return;
+		this.states = this.states.map((_, index) => index === 0 ? "done" : "idle");
+		this.paintStates();
+		await wait(this.motion.matches ? 0 : TRACK_MS);
+	}
+	/**
+	* Segments that finish fill one after another, 70 ms apart, and stop at a failed or held
+	* segment, which then shows its colour. Resolves when the result may follow.
+	*/
+	async setSegments(next) {
+		const filling = next.map((state, index) => state === "done" && this.states[index] === "run" ? index : -1).filter((index) => index >= 0);
+		const target = [...next];
+		this.states = target.map((state, index) => filling.includes(index) ? "run" : state === "fail" || state === "wait" || state === "skip" ? this.states[index] ?? "idle" : state);
+		this.paintStates();
+		for (const index of filling) {
+			await wait(this.motion.matches ? 0 : FILL_STAGGER_MS);
+			if (this.disposed) return;
+			this.states[index] = "done";
+			this.paintStates();
+		}
+		const blocked = target.some((state) => state === "fail" || state === "wait");
+		this.states = target;
+		this.paintStates();
+		if (blocked) await wait(this.motion.matches ? 0 : BLOCKER_HOLD_MS);
+	}
+	/** The segments fill, the gaps close, the line shrinks as the ring draws, then seal and check. */
+	async sealLine(version) {
+		await this.setSegments(Array.from({ length: SEGMENTS }, () => "done"));
+		if (this.stale(version)) return;
+		const reduced = this.motion.matches;
+		await this.tween(reduced ? 0 : GAP_CLOSE_MS, (progress) => this.layoutSegments(GAP * (1 - progress), 3));
+		if (this.stale(version)) return;
+		this.line.dataset.seal = "";
+		const circumference = 2 * Math.PI * RING_RADIUS;
+		this.ring.style.strokeDasharray = String(circumference);
+		const timing = (duration, easing) => ({
+			duration: reduced ? 0 : duration,
+			easing,
+			fill: "forwards"
+		});
+		this.bar.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], timing(RING_MS, EASE_RING));
+		await this.ring.animate([{ strokeDashoffset: circumference }, { strokeDashoffset: 0 }], timing(RING_MS, EASE_RING)).finished;
+		if (this.stale(version)) return;
+		this.seal.animate([{ transform: "scale(0)" }, { transform: "scale(1)" }], timing(SEAL_MS, EASE_SEAL));
+		await wait(reduced ? 0 : SEAL_MS - 100);
+		if (this.stale(version)) return;
+		await this.check.animate([{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }], timing(CHECK_MS, EASE_IN_OUT)).finished;
+	}
+	resetLine() {
+		this.morph = null;
+		this.states = [];
+		delete this.line.dataset.seal;
+		for (const part of [
+			this.bar,
+			this.ring,
+			this.seal,
+			this.check
+		]) part.getAnimations().forEach((animation) => animation.cancel());
+		this.layoutSegments(0, 3);
+		this.paintStates();
+	}
+	paintStates() {
+		for (const [index, segment] of this.segments.entries()) {
+			const state = this.states[index];
+			if (state) segment.dataset.state = state;
+			else delete segment.dataset.state;
+		}
+	}
+	layoutSegments(gap, height) {
+		const width = (WIDTH - (SEGMENTS - 1) * gap) / SEGMENTS;
+		for (const [index, segment] of this.segments.entries()) {
+			segment.setAttribute("x", (index * (width + gap)).toFixed(2));
+			segment.setAttribute("width", width.toFixed(2));
+			segment.setAttribute("y", (MID - height / 2).toFixed(2));
+			segment.setAttribute("height", height.toFixed(2));
+		}
+	}
+	tween(duration, frame) {
+		if (duration <= 0) {
+			frame(1);
+			return Promise.resolve();
+		}
+		return new Promise((resolve) => {
+			const start = performance.now();
+			const step = (time) => {
+				if (this.disposed) return resolve();
+				const progress = Math.min(1, (time - start) / duration);
+				frame(1 - Math.pow(1 - progress, 3));
+				if (progress < 1) requestAnimationFrame(step);
+				else resolve();
+			};
+			requestAnimationFrame(step);
+		});
+	}
+};
+function passkeyIcon(document) {
+	const icon = document.createElementNS(SVG_NAMESPACE, "svg");
+	icon.setAttribute("viewBox", "0 0 24 24");
+	icon.setAttribute("width", "18");
+	icon.setAttribute("height", "18");
+	icon.setAttribute("aria-hidden", "true");
+	icon.classList.add("seams-voiceid-action-icon");
+	for (const d of PASSKEY_PATHS) {
+		const path = document.createElementNS(SVG_NAMESPACE, "path");
+		path.setAttribute("d", d);
+		icon.append(path);
+	}
+	return icon;
+}
+/** Fades out from where the element is, so a row that is still arriving never flashes. */
+function fade(element, duration) {
+	const from = Number(getComputedStyle(element).opacity);
+	return element.animate([{ opacity: from }, { opacity: 0 }], {
+		duration: duration * from,
+		easing: "ease-in",
+		fill: "forwards"
+	}).finished;
+}
+function fadeIn(element, reduced, delay) {
+	element.getAnimations().forEach((animation) => animation.cancel());
+	element.animate([{
+		opacity: 0,
+		transform: reduced ? "none" : "translateY(4px)"
+	}, {
+		opacity: 1,
+		transform: "none"
+	}], {
+		delay: reduced ? 0 : delay,
+		duration: reduced ? 150 : FADE_IN_MS,
+		easing: EASE_IN_OUT,
+		fill: "both"
+	});
+}
+function wait(ms) {
+	return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+//#endregion
+export { PhraseCard };