@prosopo/procaptcha-audio 0.0.0-stage → 0.2.1

package/dist/cjs/components/audioPlayer.cjs

@@ -0,0 +1,275 @@
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+//#region src/components/audioPlayer.ts
+var CONTAINER_WIDTH = 320;
+var SHAKE_MS = 500;
+var SHAKE_KEYFRAMES = `
+@keyframes prosopo-audio-shake {
+	0%, 100% { transform: translateX(0); }
+	10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
+	20%, 40%, 60%, 80% { transform: translateX(4px); }
+}
+`;
+var VISUALLY_HIDDEN = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap"
+};
+/**
+* The audio challenge. Accessibility is its purpose, so:
+* - every control is a native `<button>` or `<input>`, not a role on a div;
+* - the `<audio>` element is hidden and driven by our buttons, because several
+*   browsers' native controls offer the clip as a download;
+* - status changes go to a polite live region, since a screen-reader user
+*   cannot see the shake that marks a wrong answer;
+* - nothing autoplays: browsers block audio without a gesture, and a blocked
+*   play() looks like a broken widget.
+*/
+var mountAudioPlayer = (initialProps) => {
+	const teardown = new _prosopo_procaptcha_common.Teardown();
+	let props = initialProps;
+	let answer = "";
+	let playing = false;
+	let visible = false;
+	let shaking = false;
+	let shakeTimer;
+	let replays = 0;
+	let hasPlayed = false;
+	let events = [];
+	let startedAt = Date.now();
+	const t = (key, options) => props.translator.t(key, options);
+	const record = (kind) => {
+		events.push({
+			kind,
+			t: Date.now() - startedAt
+		});
+	};
+	const style = (0, _prosopo_procaptcha_common.createElement)("style", { text: SHAKE_KEYFRAMES });
+	const instruction = (0, _prosopo_procaptcha_common.createElement)("p", { style: {
+		margin: 0,
+		fontSize: "14px"
+	} });
+	const audio = (0, _prosopo_procaptcha_common.createElement)("audio", {
+		attributes: { preload: "auto" },
+		style: { display: "none" }
+	});
+	const playButton = (0, _prosopo_procaptcha_common.createElement)("button", { attributes: { type: "button" } });
+	const playRow = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			display: "flex",
+			gap: "8px"
+		},
+		children: [playButton]
+	});
+	const input = (0, _prosopo_procaptcha_common.createElement)("input", { attributes: {
+		type: "text",
+		inputmode: "numeric",
+		autocomplete: "off",
+		autocorrect: "off",
+		autocapitalize: "off",
+		spellcheck: "false"
+	} });
+	const submitButton = (0, _prosopo_procaptcha_common.createElement)("button", { attributes: { type: "button" } });
+	const announcer = (0, _prosopo_procaptcha_common.createElement)("div", {
+		attributes: {
+			"aria-live": "polite",
+			"aria-atomic": "true"
+		},
+		style: VISUALLY_HIDDEN
+	});
+	if ("production" !== process.env.NODE_ENV) {
+		(0, _prosopo_procaptcha_common.applyAttributes)(audio, { "data-cy": "prosopo-audio-clip" });
+		(0, _prosopo_procaptcha_common.applyAttributes)(playButton, { "data-cy": "prosopo-audio-play" });
+		(0, _prosopo_procaptcha_common.applyAttributes)(input, { "data-cy": "prosopo-audio-answer" });
+		(0, _prosopo_procaptcha_common.applyAttributes)(submitButton, { "data-cy": "prosopo-audio-submit" });
+	}
+	const panel = (0, _prosopo_procaptcha_common.createElement)("div", {
+		style: {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			gap: "14px",
+			width: `${CONTAINER_WIDTH}px`,
+			boxSizing: "border-box",
+			padding: "20px",
+			borderRadius: "20px",
+			transition: "opacity 0.3s ease, transform 0.3s ease"
+		},
+		children: [
+			instruction,
+			audio,
+			playRow,
+			input,
+			submitButton,
+			announcer
+		]
+	});
+	const surfaceProps = () => ({
+		show: true,
+		placement: props.placement,
+		anchor: props.anchor,
+		onDismiss: props.onDismiss,
+		scrim: visible ? "dim" : "none",
+		dialogLabel: t("WIDGET.AUDIO_CHALLENGE_LABEL")
+	});
+	const surface = (0, _prosopo_procaptcha_common.mountChallengeSurface)(surfaceProps());
+	surface.content.append(style, panel);
+	const announce = (message) => {
+		announcer.textContent = message;
+	};
+	const playLabel = () => {
+		if (playing) return t("WIDGET.AUDIO_PLAYING");
+		return hasPlayed || answer.length > 0 ? t("WIDGET.AUDIO_REPLAY") : t("WIDGET.AUDIO_PLAY");
+	};
+	const render = () => {
+		const { theme, showRetry, submitting, characterCount } = props;
+		const accent = showRetry ? theme.palette.error.main : theme.palette.primary.main;
+		const blocked = submitting || 0 === answer.length;
+		const buttonStyle = {
+			fontFamily: theme.font.fontFamily,
+			fontSize: "14px",
+			padding: "10px 16px",
+			borderRadius: "8px",
+			border: `1px solid ${accent}`,
+			backgroundColor: "transparent",
+			color: accent,
+			cursor: "pointer"
+		};
+		(0, _prosopo_procaptcha_common.applyStyles)(panel, {
+			backgroundColor: theme.palette.surface,
+			color: theme.palette.onSurface,
+			fontFamily: theme.font.fontFamily,
+			opacity: visible ? 1 : 0,
+			transform: visible ? "scale(1)" : "scale(0.9)",
+			animation: shaking ? `prosopo-audio-shake ${SHAKE_MS}ms ease` : "none"
+		});
+		instruction.textContent = showRetry ? t("WIDGET.AUDIO_INCORRECT") : t("WIDGET.AUDIO_INSTRUCTIONS", { count: characterCount });
+		(0, _prosopo_procaptcha_common.applyStyles)(instruction, { color: showRetry ? theme.palette.error.main : theme.palette.onSurface });
+		if (audio.getAttribute("src") !== props.clip) audio.setAttribute("src", props.clip);
+		playButton.textContent = playLabel();
+		(0, _prosopo_procaptcha_common.applyStyles)(playButton, {
+			...buttonStyle,
+			flex: 1
+		});
+		input.maxLength = characterCount * 2;
+		input.disabled = submitting;
+		if (input.value !== answer) input.value = answer;
+		(0, _prosopo_procaptcha_common.applyAttributes)(input, { "aria-label": t("WIDGET.AUDIO_INPUT_LABEL", { count: characterCount }) });
+		(0, _prosopo_procaptcha_common.applyStyles)(input, {
+			fontFamily: theme.font.fontFamily,
+			fontSize: "18px",
+			letterSpacing: "0.3em",
+			textAlign: "center",
+			padding: "10px",
+			borderRadius: "8px",
+			border: `1px solid ${accent}`,
+			backgroundColor: "transparent",
+			color: theme.palette.onSurface
+		});
+		submitButton.textContent = submitting ? t("WIDGET.AUDIO_CHECKING") : t("WIDGET.AUDIO_SUBMIT");
+		submitButton.disabled = blocked;
+		(0, _prosopo_procaptcha_common.applyStyles)(submitButton, {
+			...buttonStyle,
+			backgroundColor: theme.palette.primary.main,
+			borderColor: theme.palette.primary.main,
+			color: theme.palette.primary.contrastText,
+			opacity: blocked ? .5 : 1,
+			cursor: blocked ? "not-allowed" : "pointer"
+		});
+		surface.update(surfaceProps());
+	};
+	const play = () => {
+		const isReplay = hasPlayed;
+		audio.currentTime = 0;
+		record(isReplay ? "replay" : "play");
+		if (isReplay) replays += 1;
+		hasPlayed = true;
+		const clipAtPlay = props.clip;
+		audio.play().then(() => {
+			if (clipAtPlay !== props.clip) return;
+			playing = true;
+			announce(t("WIDGET.AUDIO_PLAYING"));
+			render();
+		}, () => {
+			playing = false;
+			announce(t("WIDGET.AUDIO_PLAYBACK_FAILED"));
+			render();
+		});
+		render();
+	};
+	const submit = () => {
+		if (props.submitting || 0 === answer.length) return;
+		props.onComplete(answer, replays, [...events]);
+	};
+	teardown.addEventListener(playButton, "click", play);
+	teardown.addEventListener(submitButton, "click", submit);
+	teardown.addEventListener(input, "input", () => {
+		record("key");
+		answer = input.value;
+		render();
+	});
+	teardown.addEventListener(input, "keydown", (event) => {
+		if (!(event instanceof KeyboardEvent) || "Enter" !== event.key) return;
+		event.preventDefault();
+		submit();
+	});
+	teardown.addEventListener(audio, "ended", () => {
+		playing = false;
+		announce(t("WIDGET.AUDIO_FINISHED"));
+		render();
+	});
+	teardown.addEventListener(audio, "pause", () => {
+		playing = false;
+		render();
+	});
+	const resetForNewClip = () => {
+		audio.pause();
+		audio.currentTime = 0;
+		answer = "";
+		playing = false;
+		replays = 0;
+		hasPlayed = false;
+		events = [];
+		startedAt = Date.now();
+	};
+	const startShake = () => {
+		shaking = true;
+		announce(t("WIDGET.AUDIO_INCORRECT"));
+		if (void 0 !== shakeTimer) clearTimeout(shakeTimer);
+		shakeTimer = setTimeout(() => {
+			shakeTimer = void 0;
+			shaking = false;
+			render();
+		}, SHAKE_MS);
+	};
+	teardown.add(() => {
+		if (void 0 !== shakeTimer) clearTimeout(shakeTimer);
+	});
+	if (props.showRetry) startShake();
+	render();
+	input.focus();
+	const frameRequest = requestAnimationFrame(() => {
+		visible = true;
+		render();
+	});
+	teardown.add(() => cancelAnimationFrame(frameRequest));
+	return {
+		update: (nextProps) => {
+			const previous = props;
+			props = nextProps;
+			if (nextProps.clip !== previous.clip) resetForNewClip();
+			if (nextProps.showRetry && !previous.showRetry) startShake();
+			render();
+		},
+		destroy: () => {
+			teardown.run();
+			audio.pause();
+			surface.destroy();
+		}
+	};
+};
+//#endregion
+exports.mountAudioPlayer = mountAudioPlayer;

package/dist/cjs/components/procaptchaAudio.cjs

@@ -0,0 +1,7 @@
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+//#region src/components/procaptchaAudio.ts
+var loadProcaptchaAudio = async () => (await Promise.resolve().then(() => require("./procaptchaWidget.cjs"))).mountProcaptchaAudioWidget;
+var mountProcaptchaAudio = (0, _prosopo_procaptcha_common.lazyMount)(loadProcaptchaAudio);
+//#endregion
+exports.loadProcaptchaAudio = loadProcaptchaAudio;
+exports.mountProcaptchaAudio = mountProcaptchaAudio;

package/dist/cjs/components/procaptchaWidget.cjs

@@ -0,0 +1,195 @@
+const require_Manager = require("../services/Manager.cjs");
+const require_audioPlayer = require("./audioPlayer.cjs");
+let _prosopo_locale = require("@prosopo/locale");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_types = require("@prosopo/types");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
+//#region src/components/procaptchaWidget.ts
+var mountProcaptchaAudioWidget = (container, props) => {
+	const teardown = new _prosopo_procaptcha_common.Teardown();
+	const config = props.config;
+	const i18n = props.i18n;
+	const frictionlessState = props.frictionlessState;
+	const callbacks = props.callbacks || {};
+	const translator = (0, _prosopo_locale.createTranslator)(i18n);
+	const isInvisible = _prosopo_types.ModeEnum.invisible === config.mode;
+	const theme = "light" === config.theme ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme;
+	const store = (0, _prosopo_procaptcha_common.createProcaptchaState)();
+	let loading = false;
+	let audioPhase = "checkbox";
+	let challengeData = null;
+	let showRetry = true === props.startShowRetry;
+	let lastError = store.state.error;
+	let lastCoords = null;
+	let sessionInvalidatedFired = false;
+	let honeypot;
+	let checkbox;
+	let player;
+	const onReload = props.onReload;
+	const updateState = (0, _prosopo_procaptcha_common.buildUpdateState)(store.state, store.update);
+	const manager = require_Manager.Manager(config, store.state, updateState, callbacks, frictionlessState, () => honeypot?.getValue(), onReload ? (x, y) => onReload(x, y, { showRetry: true }) : void 0);
+	const root = (0, _prosopo_procaptcha_common.createElement)("div");
+	container.appendChild(root);
+	if (frictionlessState?.hp) honeypot = (0, _prosopo_procaptcha_common.mountHoneypot)(root, { encodedQuestion: frictionlessState.hp });
+	const reportError = (error) => {
+		callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
+	};
+	const returnToCheckbox = () => {
+		audioPhase = "checkbox";
+		challengeData = null;
+		showRetry = false;
+	};
+	const showChallenge = (challenge) => {
+		if (challenge) {
+			challengeData = challenge;
+			audioPhase = "answering";
+		}
+	};
+	const handleAudioComplete = async (answer, replays, audioEvents) => {
+		audioPhase = "submitting";
+		scheduler.schedule();
+		let verified = false;
+		try {
+			verified = await manager.submitSolution(answer, replays, audioEvents);
+		} catch (error) {
+			reportError(error);
+		}
+		if (verified) {
+			returnToCheckbox();
+			loading = false;
+			scheduler.schedule();
+			return;
+		}
+		showRetry = true;
+		if (onReload) {
+			scheduler.schedule();
+			return;
+		}
+		audioPhase = "answering";
+		scheduler.schedule();
+		try {
+			const newChallenge = await manager.start();
+			if (newChallenge) challengeData = newChallenge;
+			else returnToCheckbox();
+		} catch {
+			returnToCheckbox();
+		}
+		loading = false;
+		scheduler.schedule();
+	};
+	const handleDismiss = () => {
+		returnToCheckbox();
+		loading = false;
+		scheduler.schedule();
+	};
+	const playerProps = (challenge) => ({
+		clip: challenge.clip,
+		characterCount: challenge.characterCount,
+		onComplete: (answer, replays, events) => {
+			handleAudioComplete(answer, replays, events);
+		},
+		showRetry,
+		submitting: "submitting" === audioPhase,
+		theme,
+		translator,
+		placement: config.placement,
+		anchor: props.container,
+		onDismiss: handleDismiss
+	});
+	const runErrorEffect = () => {
+		if (store.state.error === lastError) return;
+		lastError = store.state.error;
+		if (!store.state.error) return;
+		loading = false;
+		returnToCheckbox();
+		if ("CAPTCHA.NO_SESSION_FOUND" !== store.state.error.key) return;
+		if (props.onSessionInvalidated && !sessionInvalidatedFired || void 0 !== frictionlessState) {
+			loading = true;
+			store.update({ error: void 0 });
+		}
+		if (props.onSessionInvalidated && !sessionInvalidatedFired) {
+			sessionInvalidatedFired = true;
+			props.onSessionInvalidated(lastCoords?.x, lastCoords?.y);
+			return;
+		}
+		if (frictionlessState) {
+			const timer = setTimeout(() => {
+				frictionlessState.restart();
+			}, 100);
+			teardown.add(() => clearTimeout(timer));
+		}
+	};
+	const render = () => {
+		runErrorEffect();
+		if (("answering" === audioPhase || "submitting" === audioPhase) && null !== challengeData) if (void 0 === player) player = require_audioPlayer.mountAudioPlayer(playerProps(challengeData));
+		else player.update(playerProps(challengeData));
+		else {
+			player?.destroy();
+			player = void 0;
+		}
+		checkbox?.update(checkboxProps());
+	};
+	const scheduler = (0, _prosopo_procaptcha_common.createRenderScheduler)(render);
+	const beginChallenge = async (coords) => {
+		if (loading) return;
+		loading = true;
+		showRetry = false;
+		scheduler.schedule();
+		if (coords) lastCoords = coords;
+		try {
+			showChallenge(await manager.start(coords?.x, coords?.y));
+		} catch (error) {
+			reportError(error);
+		} finally {
+			loading = false;
+			scheduler.schedule();
+		}
+	};
+	const checkboxProps = () => ({
+		checked: store.state.isHuman,
+		theme,
+		labelText: translator.isReady() ? translator.t("WIDGET.I_AM_HUMAN") : "",
+		error: store.state.error ? (0, _prosopo_locale.localiseErrorMessage)(translator.i18n, store.state.error) : void 0,
+		loadingText: translator.t("WIDGET.CHECKING", { defaultValue: "Checking that you are human" }),
+		loading: loading || "submitting" === audioPhase,
+		onChange: (event) => beginChallenge((0, _prosopo_procaptcha_common.trustedClickCoords)(event))
+	});
+	if (!isInvisible) checkbox = (0, _prosopo_procaptcha_common.mountCheckbox)(root, checkboxProps());
+	teardown.add(scheduler.cancel);
+	teardown.add(store.subscribe(scheduler.schedule));
+	teardown.add(translator.subscribe(scheduler.schedule));
+	const handleExecute = () => {
+		beginChallenge();
+	};
+	if (props.container) teardown.addEventListener(props.container, _prosopo_procaptcha_common.PROCAPTCHA_EXECUTE_EVENT, handleExecute);
+	if (isInvisible) teardown.addEventListener(document, _prosopo_procaptcha_common.PROCAPTCHA_EXECUTE_EVENT, handleExecute);
+	if (config.language) if (i18n) {
+		if (i18n.language !== config.language) i18n.changeLanguage(config.language);
+	} else (0, _prosopo_locale.loadI18next)(false, config.language);
+	if (props.autoStart) {
+		loading = true;
+		const coords = props.startCoords;
+		lastCoords = coords ?? null;
+		scheduler.schedule();
+		manager.start(coords?.x ?? 0, coords?.y ?? 0).then((challenge) => {
+			showChallenge(challenge);
+			loading = false;
+			scheduler.schedule();
+		}, () => {
+			loading = false;
+			scheduler.schedule();
+		});
+	}
+	render();
+	return { destroy: () => {
+		manager.dispose();
+		teardown.run();
+		player?.destroy();
+		checkbox?.destroy();
+		honeypot?.destroy();
+		root.parentNode?.removeChild(root);
+	} };
+};
+//#endregion
+exports.default = mountProcaptchaAudioWidget;
+exports.mountProcaptchaAudioWidget = mountProcaptchaAudioWidget;

package/dist/cjs/index.cjs

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_audioPlayer = require("./components/audioPlayer.cjs");
+const require_procaptchaWidget = require("./components/procaptchaWidget.cjs");
+const require_procaptchaAudio = require("./components/procaptchaAudio.cjs");
+exports.loadProcaptchaAudio = require_procaptchaAudio.loadProcaptchaAudio;
+exports.mountAudioPlayer = require_audioPlayer.mountAudioPlayer;
+exports.mountProcaptchaAudio = require_procaptchaAudio.mountProcaptchaAudio;
+exports.mountProcaptchaAudioWidget = require_procaptchaWidget.default;