@seams/voiceid 0.0.0-stage → 0.24.0

package/dist/esm/browser/ribbon.js

@@ -0,0 +1,489 @@
+//#region src/browser/ribbon.ts
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+const WIDTH = 308;
+const MID = 32;
+const CENTRE = WIDTH / 2;
+const TAU = Math.PI * 2;
+const RING_RADIUS = 21.5;
+const RING_ARC = .56;
+const TURN_MS = 1800;
+const ARC_CYCLE_MS = 1500;
+const REDUCED_TURN_MS = 3200;
+const REDUCED_ARC_CYCLE_MS = 2600;
+const IDLE_AMPLITUDE = .085;
+const IDLE_PERIOD_MS = 2600;
+const CAPTURE_MS = 560;
+const MIDDLE_FADE_MS = 180;
+const BEND_WIDTH = Math.sqrt(12) * RING_RADIUS;
+const BEND_START = CENTRE - BEND_WIDTH;
+const BEND = tabulateBend();
+const RING_ENTRY = BEND_START + BEND.length;
+const HALF_ARC = RING_ARC * TAU * RING_RADIUS / 2;
+const JOIN_MS = 360;
+const JOIN_LEAD_SHARE = .75;
+const SPLIT_FLATTEN_MS = 200;
+const SPLIT_OPEN_MS = 200;
+const SEGMENT_GAP = 8;
+const PULSE_MS = 900;
+const PULSE_STAGGER_MS = 150;
+const PULSE_FLOOR = .35;
+const LINE_REST_OPACITY = .55;
+const SUCCESS_MS = 1140;
+const SEAL_RADIUS = 22.5;
+const CHECK_PATH = "M161 26.8 151.4 36.3 147.1 32";
+const easeMove = cubicBezier(.65, 0, .35, 1);
+const easeArc = cubicBezier(.4, 0, .2, 1);
+const easeSeal = cubicBezier(.34, 1.56, .64, 1);
+const easeOut = cubicBezier(.2, 0, 0, 1);
+/** Visual feedback from recorder activity. Never opens or retains an audio stream. */
+var VoiceRibbon = class {
+	element;
+	lines = [];
+	ripple;
+	track;
+	middle;
+	top;
+	bottom;
+	seal;
+	check;
+	motion = matchMedia("(prefers-reduced-motion: reduce)");
+	phase = "idle";
+	stage = { kind: "line" };
+	settleSuccess = null;
+	successBegun = null;
+	frame = 0;
+	previousTime = 0;
+	position = 0;
+	target = 0;
+	level = 0;
+	stopped = false;
+	constructor(document, checking = "ring") {
+		this.checking = checking;
+		this.element = document.createElementNS(SVG_NAMESPACE, "svg");
+		this.element.classList.add("seams-voiceid-ribbon");
+		this.element.setAttribute("viewBox", `0 0 ${WIDTH} 64`);
+		this.element.setAttribute("aria-hidden", "true");
+		this.ripple = this.append(document, "circle", "1.5");
+		this.track = this.append(document, "circle", "2");
+		this.middle = this.append(document, "path", "1");
+		this.top = this.append(document, "path", "2");
+		this.bottom = this.append(document, "path", "2");
+		this.seal = this.append(document, "circle", "0");
+		this.seal.setAttribute("fill", "currentColor");
+		this.seal.setAttribute("stroke", "none");
+		this.check = this.append(document, "path", "2.6");
+		this.check.classList.add("seams-voiceid-ribbon-check");
+		this.check.setAttribute("d", CHECK_PATH);
+		this.check.setAttribute("stroke-linejoin", "round");
+		this.check.setAttribute("pathLength", "1");
+		this.check.setAttribute("stroke-dasharray", "1");
+		for (const ring of [
+			this.ripple,
+			this.track,
+			this.seal
+		]) {
+			ring.setAttribute("cx", String(CENTRE));
+			ring.setAttribute("cy", String(MID));
+		}
+		this.track.setAttribute("r", String(RING_RADIUS));
+		if (checking === "segments") {
+			this.element.dataset.seamsProgressLine = "";
+			for (const [index, segment] of [
+				this.top,
+				this.middle,
+				this.bottom
+			].entries()) segment.dataset.seamsProgressSegment = String(index);
+		}
+		for (let layer = 3; layer >= 0; layer -= 1) this.lines.push(this.append(document, "path", layer === 0 ? "1" : "0.65"));
+		this.paint(performance.now());
+	}
+	readLevel = () => this.level;
+	setPhase(phase) {
+		if (phase === "processing" && this.stage.kind === "line") {
+			const amplitude = Math.max(this.level, this.idleAmplitude(performance.now()));
+			this.stage = {
+				kind: this.checking === "segments" ? "segments" : "capture",
+				startedAt: performance.now(),
+				amplitude
+			};
+		} else if (phase !== "processing") {
+			this.stage = { kind: "line" };
+			this.settle();
+		}
+		this.phase = phase;
+		this.target = 0;
+		this.element.dataset.phase = phase;
+		this.wake();
+	}
+	/**
+	* Closes the ring into the success seal; resolves when the check is drawn.
+	* `begin` runs once the formed ring starts to close, after any capture in flight.
+	*/
+	succeed(begin) {
+		if (this.stopped || this.stage.kind === "sealed") return Promise.resolve();
+		if (this.stage.kind === "line") this.setPhase("processing");
+		const settled = new Promise(this.awaitSuccess);
+		this.successBegun = begin;
+		if (this.stage.kind === "spin") this.beginSuccess(performance.now());
+		this.wake();
+		return settled;
+	}
+	add(event) {
+		if (this.phase !== "listening" || this.stopped) return;
+		const signal = Math.max(0, event.rms - .003);
+		this.target = Math.pow(signal / (signal + .055), .65) * (event.speech ? 1 : .15);
+		this.element.dataset.speech = String(event.speech);
+		this.wake();
+	}
+	dispose() {
+		this.stopped = true;
+		cancelAnimationFrame(this.frame);
+		this.frame = 0;
+		this.level = 0;
+		this.target = 0;
+		this.settle();
+	}
+	awaitSuccess = (resolve) => {
+		this.settle();
+		this.settleSuccess = resolve;
+	};
+	settle() {
+		const settle = this.settleSuccess;
+		this.settleSuccess = null;
+		this.successBegun = null;
+		settle?.();
+	}
+	append(document, tag, strokeWidth) {
+		const element = document.createElementNS(SVG_NAMESPACE, tag);
+		element.setAttribute("fill", "none");
+		element.setAttribute("stroke", "currentColor");
+		element.setAttribute("stroke-width", strokeWidth);
+		element.setAttribute("stroke-linecap", "round");
+		element.setAttribute("vector-effect", "non-scaling-stroke");
+		element.setAttribute("opacity", "0");
+		this.element.append(element);
+		return element;
+	}
+	wake() {
+		if (!this.stopped && this.frame === 0) {
+			this.previousTime = performance.now();
+			this.frame = requestAnimationFrame(this.draw);
+		}
+	}
+	draw = (time) => {
+		this.frame = 0;
+		if (this.stopped) return;
+		const dt = Math.min(50, Math.max(0, time - this.previousTime));
+		this.previousTime = time;
+		this.level += (this.target - this.level) * (1 - Math.exp(-dt / (this.target > this.level ? 55 : 200)));
+		if (!this.motion.matches) this.position += dt * (.0012 + this.level * .003);
+		this.paint(time);
+		if (!(!this.element.isConnected || this.stage.kind === "sealed" || this.stage.kind === "line" && this.phase === "idle" && this.level <= .001)) this.frame = requestAnimationFrame(this.draw);
+	};
+	idleAmplitude(time) {
+		if (this.phase !== "listening" || this.motion.matches) return 0;
+		return IDLE_AMPLITUDE * (.72 + .28 * Math.sin(time / IDLE_PERIOD_MS * TAU));
+	}
+	paint(time) {
+		for (const part of [
+			this.ripple,
+			this.track,
+			this.middle,
+			this.top,
+			this.bottom,
+			this.seal,
+			this.check
+		]) part.setAttribute("opacity", "0");
+		for (const line of this.lines) line.setAttribute("opacity", "0");
+		switch (this.stage.kind) {
+			case "line":
+				this.paintLine(Math.max(this.level, this.idleAmplitude(time)));
+				return;
+			case "capture":
+				this.paintCapture(time, this.stage);
+				return;
+			case "segments":
+				this.paintSegments(time, this.stage);
+				return;
+			case "spin":
+				this.paintArc(this.spinnerArc(time, this.stage), 1);
+				return;
+			case "success":
+				this.paintSuccess(time, this.stage);
+				return;
+			case "sealed":
+				this.paintSeal({
+					start: 0,
+					sweep: TAU
+				}, 1, 1);
+				return;
+		}
+	}
+	paintLine(amplitude) {
+		for (let index = 0; index < this.lines.length; index += 1) {
+			const layer = 3 - index;
+			this.lines[index].setAttribute("d", this.linePath(layer, amplitude, 0, WIDTH, 1));
+			this.lines[index].setAttribute("opacity", String(layer === 0 ? LINE_REST_OPACITY + amplitude * .4 : .1 + amplitude * .1));
+		}
+	}
+	paintSegments(time, stage) {
+		const elapsed = time - stage.startedAt;
+		if (!this.motion.matches && elapsed < SPLIT_FLATTEN_MS) {
+			this.paintLine(stage.amplitude * (1 - easeOut(elapsed / SPLIT_FLATTEN_MS)));
+			return;
+		}
+		const split = elapsed - SPLIT_FLATTEN_MS;
+		const gap = SEGMENT_GAP * (this.motion.matches ? 1 : easeOut(clamp01(split / SPLIT_OPEN_MS)));
+		const width = (WIDTH - 2 * gap) / 3;
+		for (const [index, segment] of [
+			this.top,
+			this.middle,
+			this.bottom
+		].entries()) {
+			const start = index * (width + gap);
+			segment.setAttribute("d", `M${start.toFixed(2)} ${MID}H${(start + width).toFixed(2)}`);
+			segment.setAttribute("stroke-width", "1");
+			segment.setAttribute("opacity", this.segmentOpacity(split, index));
+		}
+	}
+	/** Each segment brightens one beat after the one before it, from the resting line's opacity. */
+	segmentOpacity(split, index) {
+		if (this.motion.matches) return "0.8";
+		const beat = .5 + .5 * Math.cos(TAU * (split - index * PULSE_STAGGER_MS) / PULSE_MS);
+		return lerp(LINE_REST_OPACITY, PULSE_FLOOR + (1 - PULSE_FLOOR) * beat, easeOut(clamp01(split / SPLIT_OPEN_MS))).toFixed(3);
+	}
+	paintCapture(time, stage) {
+		const elapsed = this.motion.matches ? CAPTURE_MS + JOIN_MS : time - stage.startedAt;
+		if (elapsed >= CAPTURE_MS) {
+			this.paintJoin(time, Math.min(elapsed - CAPTURE_MS, JOIN_MS));
+			return;
+		}
+		const amplitude = stage.amplitude;
+		const progress = elapsed / CAPTURE_MS;
+		const waveScale = 1 - easeOut(clamp01(elapsed / 150));
+		const settled = easeMove(clamp01(progress / .6));
+		const exitSpeed = turnSpeed(false) * RING_RADIUS * CAPTURE_MS;
+		const tail = hermite(progress, RING_ENTRY, exitSpeed);
+		const head = BEND_START + hermite(progress, RING_ENTRY + HALF_ARC - BEND_START, exitSpeed);
+		const lineOpacity = LINE_REST_OPACITY + amplitude * .4;
+		for (const [half, turned] of [[this.top, false], [this.bottom, true]]) {
+			half.setAttribute("d", this.halfPath(tail, head, turned, amplitude, waveScale));
+			half.setAttribute("stroke-width", lerp(1, 2, settled).toFixed(2));
+			half.setAttribute("opacity", lerp(lineOpacity, 1, settled).toFixed(3));
+		}
+		this.middle.setAttribute("d", this.linePath(0, amplitude, BEND_START, WIDTH - BEND_START, waveScale));
+		this.middle.setAttribute("opacity", (lineOpacity * (1 - easeOut(clamp01(elapsed / MIDDLE_FADE_MS)))).toFixed(3));
+		for (let index = 0; index < 3; index += 1) {
+			const layer = 3 - index;
+			this.lines[index].setAttribute("d", this.linePath(layer, amplitude, 0, WIDTH, waveScale));
+			this.lines[index].setAttribute("opacity", ((.1 + amplitude * .1) * (1 - clamp01(elapsed / 200))).toFixed(3));
+		}
+		this.track.setAttribute("opacity", (.1 * clamp01((progress - .4) / .6)).toFixed(3));
+	}
+	paintJoin(time, elapsed) {
+		const joined = (1 - Math.cos(Math.PI * elapsed / JOIN_MS)) / 2;
+		const base = -Math.PI / 2 + turnSpeed(false) * elapsed;
+		const sweep = HALF_ARC / RING_RADIUS;
+		const gap = Math.PI - sweep;
+		const lead = this.motion.matches ? -Math.PI / 2 : base + JOIN_LEAD_SHARE * gap * joined;
+		if (this.motion.matches || elapsed >= JOIN_MS) {
+			this.stage = {
+				kind: "spin",
+				startedAt: time,
+				base: lead - TAU * .14
+			};
+			if (this.settleSuccess) this.beginSuccess(time);
+			this.paint(time);
+			return;
+		}
+		this.track.setAttribute("opacity", "0.1");
+		for (const [half, start] of [[this.top, lead], [this.bottom, base + Math.PI - (1 - JOIN_LEAD_SHARE) * gap * joined]]) {
+			half.setAttribute("d", arcPath({
+				start,
+				sweep
+			}));
+			half.setAttribute("stroke-width", "2");
+			half.setAttribute("opacity", "1");
+		}
+	}
+	/** The auth menu ring's arc: it grows and shrinks on its own clock while the ring turns. */
+	spinnerArc(time, stage) {
+		const elapsed = time - stage.startedAt;
+		const cycle = this.motion.matches ? REDUCED_ARC_CYCLE_MS : ARC_CYCLE_MS;
+		const phase = (elapsed + cycle / 2) % cycle / cycle;
+		const growing = phase < .5;
+		const eased = easeArc(growing ? phase / .5 : (phase - .5) / .5);
+		const dash = growing ? lerp(1, 56, eased) : lerp(56, 1, eased);
+		const offset = growing ? lerp(0, -14, eased) : lerp(-14, -99, eased);
+		return {
+			start: stage.base + turnSpeed(this.motion.matches) * elapsed - TAU * offset / 100,
+			sweep: TAU * dash / 100
+		};
+	}
+	beginSuccess(time) {
+		if (this.stage.kind !== "spin") return;
+		this.stage = {
+			kind: "success",
+			startedAt: time,
+			from: this.spinnerArc(time, this.stage)
+		};
+		const begun = this.successBegun;
+		this.successBegun = null;
+		begun?.();
+	}
+	paintSuccess(time, stage) {
+		const elapsed = time - stage.startedAt;
+		if (elapsed >= SUCCESS_MS) {
+			this.stage = { kind: "sealed" };
+			this.settle();
+			this.paint(time);
+			return;
+		}
+		const turned = clamp01(elapsed / 650);
+		const spin = this.motion.matches ? 0 : turnSpeed(false) * 650 * (turned - turned * turned / 2);
+		const closed = easeMove(clamp01((elapsed - 150) / 500));
+		this.paintSeal({
+			start: stage.from.start + spin,
+			sweep: lerp(stage.from.sweep, TAU, closed)
+		}, easeSeal(clamp01((elapsed - 600) / 420)), easeMove(clamp01((elapsed - 820) / 320)));
+		const ripple = clamp01((elapsed - 700) / 700);
+		if (!this.motion.matches && ripple > 0 && ripple < 1) {
+			const spread = easeOut(ripple);
+			this.ripple.setAttribute("r", lerp(SEAL_RADIUS, 34, spread).toFixed(2));
+			this.ripple.setAttribute("opacity", ((1 - spread) * .45).toFixed(3));
+		}
+	}
+	paintSeal(arc, seal, check) {
+		this.paintArc(arc, 1);
+		this.seal.setAttribute("r", (SEAL_RADIUS * Math.max(0, seal)).toFixed(2));
+		this.seal.setAttribute("opacity", seal > 0 ? "1" : "0");
+		this.check.setAttribute("stroke-dashoffset", (1 - check).toFixed(3));
+		this.check.setAttribute("opacity", check > 0 ? "1" : "0");
+	}
+	paintArc(arc, trackOpacity) {
+		this.track.setAttribute("opacity", String(.1 * trackOpacity));
+		this.top.setAttribute("d", arcPath(arc));
+		this.top.setAttribute("stroke-width", "2");
+		this.top.setAttribute("opacity", "1");
+	}
+	displacement(layer, amplitude, x) {
+		const u = x / WIDTH;
+		const taper = Math.pow(Math.sin(Math.PI * u), 1.7);
+		if (this.motion.matches) return amplitude * 5 * taper;
+		const wave = Math.sin(u * Math.PI * 4 - this.position + layer * .5) * .7 + Math.sin(u * Math.PI * 7 + this.position * .7 + layer) * .3;
+		return amplitude * (26 - layer * 4) * taper * wave;
+	}
+	linePath(layer, amplitude, from, to, waveScale) {
+		let path = "";
+		const steps = Math.max(2, Math.ceil((to - from) / 2));
+		for (let step = 0; step <= steps; step += 1) {
+			const x = from + (to - from) * step / steps;
+			const y = MID + this.displacement(layer, amplitude, x) * waveScale;
+			path += `${step === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)} `;
+		}
+		return path;
+	}
+	/** The stroke between two distances on a half's capture track. */
+	halfPath(from, to, turned, amplitude, waveScale) {
+		let path = "";
+		const steps = Math.max(2, Math.ceil((to - from) / 1.5));
+		for (let step = 0; step <= steps; step += 1) {
+			const point = trackPoint(from + (to - from) * step / steps);
+			const x = turned ? WIDTH - point.x : point.x;
+			let y = turned ? 2 * MID - point.y : point.y;
+			if (point.onLine) y += this.displacement(0, amplitude, x) * waveScale;
+			path += `${step === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)} `;
+		}
+		return path;
+	}
+};
+function turnSpeed(reduced) {
+	return TAU / (reduced ? REDUCED_TURN_MS : TURN_MS);
+}
+/** A point at a distance along the left half's track: line, bend, then the ring clockwise from the top. */
+function trackPoint(distance) {
+	if (distance <= BEND_START) return {
+		x: distance,
+		y: MID,
+		onLine: true
+	};
+	if (distance < RING_ENTRY) {
+		const along = distance - BEND_START;
+		let low = 0;
+		let high = BEND.lengths.length - 1;
+		while (high - low > 1) {
+			const middle = low + high >> 1;
+			if (BEND.lengths[middle] < along) low = middle;
+			else high = middle;
+		}
+		const fraction = (along - BEND.lengths[low]) / (BEND.lengths[high] - BEND.lengths[low] || 1);
+		return {
+			x: lerp(BEND.points[low][0], BEND.points[high][0], fraction),
+			y: lerp(BEND.points[low][1], BEND.points[high][1], fraction),
+			onLine: false
+		};
+	}
+	const angle = -Math.PI / 2 + (distance - RING_ENTRY) / RING_RADIUS;
+	return {
+		x: CENTRE + RING_RADIUS * Math.cos(angle),
+		y: MID + RING_RADIUS * Math.sin(angle),
+		onLine: false
+	};
+}
+function tabulateBend() {
+	const points = [[BEND_START, MID]];
+	const lengths = [0];
+	let length = 0;
+	for (let step = 1; step <= 240; step += 1) {
+		const u = step / 240;
+		const point = [BEND_START + BEND_WIDTH * u, MID - RING_RADIUS * (4 * u ** 3 - 3 * u ** 4)];
+		const previous = points[points.length - 1];
+		length += Math.hypot(point[0] - previous[0], point[1] - previous[1]);
+		points.push(point);
+		lengths.push(length);
+	}
+	return {
+		points,
+		lengths,
+		length
+	};
+}
+function arcPath(arc) {
+	const steps = Math.max(2, Math.ceil(80 * arc.sweep / TAU));
+	let path = "";
+	for (let step = 0; step <= steps; step += 1) {
+		const angle = arc.start + arc.sweep * step / steps;
+		const x = CENTRE + RING_RADIUS * Math.cos(angle);
+		const y = MID + RING_RADIUS * Math.sin(angle);
+		path += `${step === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)} `;
+	}
+	return path;
+}
+/** Distance covered from rest to an exit speed (cubic Hermite in normalised time). */
+function hermite(progress, distance, exitSpeed) {
+	const square = progress * progress;
+	return distance * (3 * square - 2 * square * progress) + exitSpeed * (square * progress - square);
+}
+function cubicBezier(x1, y1, x2, y2) {
+	const at = (t, p1, p2) => ((1 - 3 * p2 + 3 * p1) * t + (3 * p2 - 6 * p1)) * t * t + 3 * p1 * t;
+	const slope = (t, p1, p2) => 3 * (1 - 3 * p2 + 3 * p1) * t * t + 2 * (3 * p2 - 6 * p1) * t + 3 * p1;
+	return (x) => {
+		if (x <= 0) return 0;
+		if (x >= 1) return 1;
+		let t = x;
+		for (let iteration = 0; iteration < 6; iteration += 1) {
+			const gradient = slope(t, x1, x2);
+			if (gradient === 0) break;
+			t -= (at(t, x1, x2) - x) / gradient;
+		}
+		return at(clamp01(t), y1, y2);
+	};
+}
+function clamp01(value) {
+	return value < 0 ? 0 : value > 1 ? 1 : value;
+}
+function lerp(from, to, amount) {
+	return from + (to - from) * amount;
+}
+//#endregion
+export { VoiceRibbon };