@hitch42/applet 0.1.1-beta.1 → 0.1.1-beta.11

package/dist/telephony.js

@@ -0,0 +1,726 @@
+import { useEffect, useSyncExternalStore } from "react";
+//#region src/telephony/api.ts
+var TelephonyApiError = class extends Error {
+	code;
+	status;
+	constructor(message, code, status) {
+		super(message);
+		this.code = code;
+		this.status = status;
+		this.name = "TelephonyApiError";
+	}
+};
+const createTelephonyApi = (baseUrl = location.origin) => {
+	const request = async (path, init) => {
+		const headers = new Headers(init?.headers);
+		if (init?.body) headers.set("content-type", "application/json");
+		const response = await fetch(`${baseUrl.replace(/\/$/, "")}/api/v1/telephony/${path}`, {
+			credentials: "include",
+			...init,
+			headers
+		});
+		if (!response.ok) {
+			const body = await response.json().catch(() => null);
+			const error = body && typeof body === "object" ? body : {};
+			const code = "code" in error && typeof error.code === "string" ? error.code : "request_failed";
+			throw new TelephonyApiError("message" in error && typeof error.message === "string" ? error.message : response.statusText, code, response.status);
+		}
+		return response.json();
+	};
+	return {
+		token: (deviceKey, acceptsCalls) => request("voice/token", {
+			method: "POST",
+			body: JSON.stringify({
+				deviceKey,
+				acceptsCalls
+			})
+		}),
+		startCall: (numberId, to) => request("calls", {
+			method: "POST",
+			body: JSON.stringify({
+				numberId,
+				to
+			})
+		}),
+		getCall: (callId) => request(`calls/${encodeURIComponent(callId)}`),
+		uploadUrl: (callId) => request(`calls/${encodeURIComponent(callId)}/recording`, {
+			method: "POST",
+			body: "{}"
+		})
+	};
+};
+//#endregion
+//#region src/telephony/recorder.ts
+const DB_NAME = "hitch-telephony";
+const STORE = "recordings";
+const openDatabase = () => new Promise((resolve, reject) => {
+	const request = indexedDB.open(DB_NAME, 1);
+	request.onupgradeneeded = () => request.result.createObjectStore(STORE, { keyPath: "key" });
+	request.onsuccess = () => resolve(request.result);
+	request.onerror = () => reject(request.error);
+});
+const withStore = async (mode, action) => {
+	const db = await openDatabase();
+	try {
+		return await new Promise((resolve, reject) => {
+			const transaction = db.transaction(STORE, mode);
+			const request = action(transaction.objectStore(STORE));
+			request.onsuccess = () => resolve(request.result);
+			request.onerror = () => reject(request.error);
+			transaction.onerror = () => reject(transaction.error);
+		});
+	} finally {
+		db.close();
+	}
+};
+const allItems = () => withStore("readonly", (store) => store.getAll());
+const putItem = (item) => withStore("readwrite", (store) => store.put(item));
+const deleteItem = (key) => withStore("readwrite", (store) => store.delete(key));
+const uploadRecording = async (callId, api) => {
+	const items = (await allItems()).filter((item) => item.callId === callId);
+	const chunks = items.filter((item) => item.blob).sort((a, b) => a.index - b.index);
+	const forget = () => Promise.all(items.map((item) => deleteItem(item.key)));
+	if (chunks.length === 0) {
+		await forget();
+		return;
+	}
+	const upload = await api.uploadUrl(callId).catch(async (error) => {
+		if (error instanceof TelephonyApiError && error.code === "recording_exists") return null;
+		throw error;
+	});
+	if (!upload) {
+		await forget();
+		return;
+	}
+	const { uploadUrl } = upload;
+	const response = await fetch(uploadUrl, {
+		method: "PUT",
+		headers: { "content-type": "audio/webm" },
+		body: new Blob(chunks.flatMap((item) => item.blob ? [item.blob] : []), { type: "audio/webm" })
+	});
+	if (!response.ok) throw new Error(`Recording upload failed: ${response.status}`);
+	await forget();
+};
+const uploadPendingRecordings = async (api) => {
+	await (await allItems()).filter((item) => item.index === -1).sort((a, b) => a.createdAt - b.createdAt).reduce(async (previous, item) => {
+		await previous;
+		try {
+			await uploadRecording(item.callId, api);
+		} catch (error) {
+			console.error("Recording upload failed", error);
+		}
+	}, Promise.resolve());
+};
+const startRecording = async (callId, call, api, onError) => {
+	const context = new AudioContext();
+	try {
+		await context.resume();
+		const merger = context.createChannelMerger(2);
+		context.createMediaStreamSource(call.localStream).connect(merger, 0, 0);
+		context.createMediaStreamSource(call.remoteStream).connect(merger, 0, 1);
+		const destination = context.createMediaStreamDestination();
+		destination.channelCount = 2;
+		merger.connect(destination);
+		const recorder = new MediaRecorder(destination.stream, {
+			mimeType: "audio/webm;codecs=opus",
+			audioBitsPerSecond: 32e3
+		});
+		await putItem({
+			key: `${callId}:pending`,
+			callId,
+			index: -1,
+			createdAt: Date.now()
+		});
+		let index = 0;
+		let writes = Promise.resolve();
+		recorder.ondataavailable = (event) => {
+			if (event.data.size === 0) return;
+			const item = {
+				key: `${callId}:${index}`,
+				callId,
+				index,
+				createdAt: Date.now(),
+				blob: event.data
+			};
+			index += 1;
+			writes = writes.then(() => putItem(item)).then(() => void 0);
+			writes.catch(onError);
+		};
+		recorder.onerror = onError;
+		recorder.start(5e3);
+		return async () => {
+			await new Promise((resolve) => {
+				recorder.onstop = () => resolve();
+				recorder.stop();
+			});
+			await writes;
+			await context.close();
+			await uploadRecording(callId, api);
+		};
+	} catch (error) {
+		await context.close();
+		throw error;
+	}
+};
+//#endregion
+//#region src/telephony/phone.ts
+const DEVICE_KEY = "hitch:telephony:device";
+let singleton;
+var Phone = class {
+	state = {
+		owner: false,
+		status: "off",
+		error: null,
+		incoming: null,
+		active: null
+	};
+	listeners = /* @__PURE__ */ new Set();
+	api;
+	client = null;
+	currentCall = null;
+	incomingCall = null;
+	acceptsCalls;
+	connectPromise = null;
+	releaseLock = null;
+	lockAbortController = null;
+	channel = null;
+	ownsPhone = false;
+	connectResolve = null;
+	pendingCommands = /* @__PURE__ */ new Map();
+	pollTimer = null;
+	stopRecording = null;
+	recordingPromise = null;
+	audio = null;
+	firstLogin = true;
+	callStarting = false;
+	reconnectOnPageShow = false;
+	connectionRequested = false;
+	constructor(options = {}) {
+		this.api = createTelephonyApi(options.baseUrl);
+		this.acceptsCalls = options.acceptsCalls ?? false;
+	}
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	getSnapshot = () => this.state;
+	update(patch) {
+		const wasActive = this.state.active !== null;
+		this.state = {
+			...this.state,
+			...patch
+		};
+		this.listeners.forEach((listener) => listener());
+		if (this.ownsPhone) {
+			this.channel?.postMessage({
+				type: "state",
+				state: this.state
+			});
+			if (wasActive !== (this.state.active !== null) && window.parent !== window) window.parent.postMessage({
+				type: "hitch:call-active",
+				active: !wasActive
+			}, "*");
+		}
+	}
+	get active() {
+		if (!this.state.active) return null;
+		if (!this.ownsPhone) return {
+			hangup: () => this.sendCommand("hangup"),
+			mute: () => void this.sendCommand("mute").catch(console.error),
+			unmute: () => void this.sendCommand("unmute").catch(console.error),
+			hold: () => this.sendCommand("hold"),
+			unhold: () => this.sendCommand("unhold"),
+			dtmf: (digit) => void this.sendCommand("dtmf", digit).catch(console.error)
+		};
+		if (!this.currentCall) return null;
+		const call = this.currentCall;
+		return {
+			hangup: () => call.hangup(),
+			mute: () => {
+				call.muteAudio();
+				this.update({ active: {
+					...this.state.active,
+					muted: true
+				} });
+			},
+			unmute: () => {
+				call.unmuteAudio();
+				this.update({ active: {
+					...this.state.active,
+					muted: false
+				} });
+			},
+			hold: () => call.hold(),
+			unhold: () => call.unhold(),
+			dtmf: (digit) => call.dtmf(digit)
+		};
+	}
+	connect = () => {
+		this.connectionRequested = true;
+		this.connectPromise ??= this.connectInternal().finally(() => {
+			this.connectPromise = null;
+		});
+		return this.connectPromise;
+	};
+	async connectInternal() {
+		if (this.state.status === "ready") return;
+		window.addEventListener("pagehide", this.pageHide);
+		window.addEventListener("pageshow", this.pageShow);
+		this.channel ??= new BroadcastChannel("hitch:telephony");
+		this.channel.onmessage = this.onChannelMessage;
+		this.update({
+			status: "connecting",
+			error: null
+		});
+		if ("locks" in navigator) {
+			this.lockAbortController = new AbortController();
+			await new Promise((resolve) => {
+				this.connectResolve = resolve;
+				this.channel?.postMessage({ type: "state-request" });
+				navigator.locks.request("hitch:telephony", {
+					mode: "exclusive",
+					signal: this.lockAbortController.signal
+				}, async () => {
+					const released = new Promise((release) => {
+						this.releaseLock = release;
+					});
+					this.ownsPhone = true;
+					this.update({
+						owner: true,
+						status: "connecting",
+						error: null,
+						incoming: null,
+						active: null
+					});
+					await this.connectOwned();
+					this.connectResolve?.();
+					this.connectResolve = null;
+					await released;
+				}).catch((error) => {
+					if (error instanceof DOMException && error.name === "AbortError") return;
+					console.error("Phone lock failed", error);
+					this.update({
+						status: "error",
+						error: String(error)
+					});
+					this.connectResolve?.();
+					this.connectResolve = null;
+				});
+			});
+			return;
+		}
+		this.ownsPhone = true;
+		this.update({ owner: true });
+		await this.connectOwned();
+	}
+	async connectOwned() {
+		try {
+			const deviceKey = localStorage.getItem(DEVICE_KEY) ?? crypto.randomUUID();
+			localStorage.setItem(DEVICE_KEY, deviceKey);
+			uploadPendingRecordings(this.api).catch((error) => console.error("Recording recovery failed", error));
+			for (const delay of [
+				0,
+				2e3,
+				4e3,
+				8e3
+			]) {
+				if (delay) await new Promise((resolve) => setTimeout(resolve, delay));
+				const { token } = await this.api.token(deviceKey, this.acceptsCalls);
+				const { TelnyxRTC: Client } = await import("@telnyx/webrtc");
+				const client = new Client({
+					login_token: token,
+					keepConnectionAliveOnSocketClose: true
+				});
+				this.client = client;
+				client.on("telnyx.notification", ({ type, call }) => {
+					if (type !== "callUpdate" || !call) return;
+					if (call === this.currentCall) {
+						this.onCallUpdate(call);
+						return;
+					}
+					if (call.direction !== "inbound") return;
+					if ([
+						"hangup",
+						"destroy",
+						"purge"
+					].includes(call.state)) {
+						if (call === this.incomingCall) {
+							this.incomingCall = null;
+							this.update({ incoming: null });
+						}
+						return;
+					}
+					if (!this.acceptsCalls || this.currentCall || this.callStarting || this.incomingCall && this.incomingCall !== call) {
+						call.hangup().catch((error) => console.error("Call decline failed", error));
+						return;
+					}
+					this.incomingCall = call;
+					if (call.state === "ringing") this.update({ incoming: {
+						id: call.id,
+						from: call.options.remoteCallerNumber ?? ""
+					} });
+				});
+				client.on("telnyx.warning", (warning) => {
+					if (Number(warning.warning.code) !== 34001) return;
+					this.api.token(deviceKey, this.acceptsCalls).then(({ token: nextToken }) => client.login({ creds: { login_token: nextToken } })).catch((error) => {
+						console.error("Phone token renewal failed", error);
+						this.update({ error: String(error) });
+					});
+				});
+				try {
+					await new Promise((resolve, reject) => {
+						client.on("telnyx.ready", () => resolve());
+						client.on("telnyx.error", (error) => reject(error));
+						client.connect().catch(reject);
+					});
+					this.firstLogin = false;
+					this.update({ status: "ready" });
+					return;
+				} catch (error) {
+					await client.disconnect().catch((disconnectError) => console.error("Phone disconnect failed", disconnectError));
+					this.client = null;
+					if (!this.firstLogin || delay === 8e3) throw error;
+				}
+			}
+		} catch (error) {
+			this.update({
+				owner: false,
+				status: "error",
+				error: error instanceof Error ? error.message : String(error)
+			});
+			this.ownsPhone = false;
+			this.releaseLock?.();
+			this.releaseLock = null;
+		}
+	}
+	disconnect = () => {
+		this.connectionRequested = false;
+		this.lockAbortController?.abort();
+		this.lockAbortController = null;
+		this.connectResolve?.();
+		this.connectResolve = null;
+		if (this.pollTimer) clearTimeout(this.pollTimer);
+		this.pollTimer = null;
+		window.removeEventListener("pagehide", this.pageHide);
+		window.removeEventListener("pageshow", this.pageShow);
+		this.reconnectOnPageShow = false;
+		window.removeEventListener("beforeunload", this.beforeUnload);
+		this.client?.disconnect().catch((error) => console.error("Phone disconnect failed", error));
+		this.client = null;
+		this.pendingCommands.forEach(({ reject, timer }) => {
+			clearTimeout(timer);
+			reject(/* @__PURE__ */ new Error("The phone did not respond."));
+		});
+		this.pendingCommands.clear();
+		this.releaseLock?.();
+		this.releaseLock = null;
+		this.currentCall = null;
+		this.incomingCall = null;
+		this.update({
+			owner: false,
+			status: "off",
+			incoming: null,
+			active: null
+		});
+		this.ownsPhone = false;
+		this.channel?.close();
+		this.channel = null;
+	};
+	pageHide = () => {
+		const reconnect = this.connectionRequested;
+		this.disconnect();
+		this.reconnectOnPageShow = reconnect;
+		if (reconnect) window.addEventListener("pageshow", this.pageShow);
+	};
+	pageShow = (event) => {
+		if (!event.persisted || !this.reconnectOnPageShow) return;
+		this.reconnectOnPageShow = false;
+		this.connect();
+	};
+	beforeUnload = (event) => {
+		event.preventDefault();
+		event.returnValue = "";
+	};
+	call = async ({ numberId, to }) => {
+		if (this.callStarting || this.state.active || this.incomingCall || this.state.incoming) throw new Error("A call is already in progress.");
+		if (this.state.status !== "ready") throw new Error("The phone is not ready.");
+		if (!this.ownsPhone) return this.sendCommand("call", {
+			numberId,
+			to
+		});
+		if (!this.client) throw new Error("The phone is not ready.");
+		this.callStarting = true;
+		try {
+			const { callId, pass, callerNumber, record } = await this.api.startCall(numberId, to);
+			this.audio ??= document.createElement("audio");
+			this.audio.autoplay = true;
+			this.audio.hidden = true;
+			if (!this.audio.isConnected) document.body.append(this.audio);
+			const call = this.client.newCall({
+				destinationNumber: to,
+				callerNumber,
+				customHeaders: [{
+					name: "X-Hitch-Pass",
+					value: pass
+				}],
+				remoteElement: this.audio
+			});
+			this.currentCall = call;
+			this.update({
+				error: null,
+				active: {
+					direction: "outbound",
+					callId,
+					to,
+					from: callerNumber,
+					state: "connecting",
+					muted: false,
+					startedAt: Date.now(),
+					recording: record
+				}
+			});
+			window.addEventListener("beforeunload", this.beforeUnload);
+			this.pollTimer = setTimeout(() => void this.pollCall(callId), 15e3);
+		} finally {
+			this.callStarting = false;
+		}
+	};
+	answer = async () => {
+		if (!this.state.incoming) throw new Error("There is no incoming call.");
+		if (!this.ownsPhone) return this.sendCommand("answer", this.state.incoming.id);
+		const call = this.incomingCall;
+		if (!call) throw new Error("There is no incoming call.");
+		if (!this.client) throw new Error("The phone is not ready.");
+		this.audio ??= document.createElement("audio");
+		this.audio.autoplay = true;
+		this.audio.hidden = true;
+		if (!this.audio.isConnected) document.body.append(this.audio);
+		this.client.remoteElement = this.audio;
+		call.options.remoteElement = this.audio;
+		this.currentCall = call;
+		this.incomingCall = null;
+		this.update({
+			incoming: null,
+			error: null,
+			active: {
+				direction: "inbound",
+				from: this.state.incoming.from,
+				state: "connecting",
+				muted: false,
+				startedAt: Date.now(),
+				recording: false
+			}
+		});
+		window.addEventListener("beforeunload", this.beforeUnload);
+		try {
+			await call.answer();
+		} catch (error) {
+			if (this.currentCall === call) {
+				this.currentCall = null;
+				this.incomingCall = call;
+				this.update({
+					active: null,
+					incoming: {
+						id: call.id,
+						from: call.options.remoteCallerNumber ?? ""
+					}
+				});
+				window.removeEventListener("beforeunload", this.beforeUnload);
+			}
+			throw error;
+		}
+	};
+	decline = async () => {
+		if (!this.state.incoming) throw new Error("There is no incoming call.");
+		if (!this.ownsPhone) return this.sendCommand("decline", this.state.incoming.id);
+		const call = this.incomingCall;
+		if (!call) throw new Error("There is no incoming call.");
+		await call.hangup();
+		if (this.incomingCall === call) {
+			this.incomingCall = null;
+			this.update({ incoming: null });
+		}
+	};
+	sendCommand(action, value) {
+		const id = crypto.randomUUID();
+		return new Promise((resolve, reject) => {
+			const timer = setTimeout(() => {
+				this.pendingCommands.delete(id);
+				reject(/* @__PURE__ */ new Error("The phone did not respond."));
+			}, 15e3);
+			this.pendingCommands.set(id, {
+				resolve,
+				reject,
+				timer
+			});
+			this.channel?.postMessage({
+				type: "command",
+				id,
+				action,
+				value
+			});
+		});
+	}
+	onChannelMessage = (event) => {
+		const data = event.data;
+		if (typeof data !== "object" || data === null || !("type" in data)) return;
+		if (data.type === "state-request" && this.ownsPhone) this.channel?.postMessage({
+			type: "state",
+			state: this.state
+		});
+		else if (data.type === "state" && !this.ownsPhone && "state" in data) {
+			const state = data.state;
+			if (typeof state !== "object" || state === null || !("status" in state)) return;
+			this.state = {
+				...state,
+				owner: false
+			};
+			this.listeners.forEach((listener) => listener());
+			this.connectResolve?.();
+			this.connectResolve = null;
+		} else if (data.type === "reply" && "id" in data && typeof data.id === "string") {
+			const pending = this.pendingCommands.get(data.id);
+			if (!pending) return;
+			clearTimeout(pending.timer);
+			this.pendingCommands.delete(data.id);
+			if ("error" in data && typeof data.error === "string") pending.reject(new Error(data.error));
+			else pending.resolve();
+		} else if (data.type === "command" && this.ownsPhone && "id" in data && typeof data.id === "string" && "action" in data) this.runCommand(data).then(() => this.channel?.postMessage({
+			type: "reply",
+			id: data.id
+		}), (error) => this.channel?.postMessage({
+			type: "reply",
+			id: data.id,
+			error: error instanceof Error ? error.message : String(error)
+		}));
+	};
+	async runCommand(data) {
+		if (data.action === "answer" || data.action === "decline") {
+			if (!this.incomingCall || data.value !== this.incomingCall.id) throw new Error("That call is no longer ringing.");
+			return data.action === "answer" ? this.answer() : this.decline();
+		}
+		if (data.action === "call") {
+			const value = data.value;
+			if (!value || typeof value !== "object" || !("numberId" in value) || !("to" in value) || typeof value.numberId !== "string" || typeof value.to !== "string") throw new Error("Invalid call command.");
+			await this.call({
+				numberId: value.numberId,
+				to: value.to
+			});
+			return;
+		}
+		const active = this.active;
+		if (!active) throw new Error("The call is not active.");
+		switch (data.action) {
+			case "hangup":
+				await active.hangup();
+				return;
+			case "mute":
+				active.mute();
+				return;
+			case "unmute":
+				active.unmute();
+				return;
+			case "hold":
+				await active.hold();
+				return;
+			case "unhold":
+				await active.unhold();
+				return;
+			case "dtmf":
+				if (typeof data.value !== "string") throw new Error("Invalid digit.");
+				active.dtmf(data.value);
+				return;
+			default: throw new Error("Invalid phone command.");
+		}
+	}
+	async pollCall(callId) {
+		if (this.state.active?.direction !== "outbound" || this.state.active.callId !== callId || this.state.active.state === "active") return;
+		try {
+			const { status } = await this.api.getCall(callId);
+			if ([
+				"starting",
+				"failed",
+				"ended"
+			].includes(status)) {
+				await this.currentCall?.hangup();
+				this.update({ error: "The call could not be connected." });
+				return;
+			}
+		} catch (error) {
+			console.error("Call status check failed", error);
+		}
+		const active = this.getSnapshot().active;
+		if (active?.direction === "outbound" && active.callId === callId) this.pollTimer = setTimeout(() => void this.pollCall(callId), 1e4);
+	}
+	onCallUpdate(call) {
+		const active = this.state.active;
+		if (!active) return;
+		const state = call.state;
+		if ([
+			"hangup",
+			"destroy",
+			"purge"
+		].includes(state)) {
+			if (this.pollTimer) clearTimeout(this.pollTimer);
+			this.pollTimer = null;
+			window.removeEventListener("beforeunload", this.beforeUnload);
+			this.update({ active: {
+				...active,
+				state: "ended"
+			} });
+			const stop = this.stopRecording;
+			const pending = this.recordingPromise;
+			this.stopRecording = null;
+			this.recordingPromise = null;
+			if (stop) stop().catch((error) => console.error("Recording upload failed", error));
+			else if (pending) pending.then((finish) => finish()).catch((error) => console.error("Recording upload failed", error));
+			this.currentCall = null;
+			this.update({ active: null });
+			return;
+		}
+		const mapped = state === "active" ? "active" : state === "held" ? "held" : state === "ringing" ? "ringing" : "connecting";
+		if (mapped === "active" && active.direction === "outbound" && active.recording && !this.stopRecording && !this.recordingPromise) {
+			this.recordingPromise = startRecording(active.callId, call, this.api, (error) => {
+				console.error("Call recording failed", error);
+				if (this.state.active?.direction === "outbound" && this.state.active.callId === active.callId) this.update({ active: {
+					...this.state.active,
+					recording: false
+				} });
+			}).then((stop) => {
+				if (this.state.active?.direction === "outbound" && this.state.active.callId === active.callId) this.stopRecording = stop;
+				return stop;
+			});
+			this.recordingPromise.catch((error) => {
+				console.error("Call recording failed", error);
+				if (this.state.active) this.update({ active: {
+					...this.state.active,
+					recording: false
+				} });
+			});
+		}
+		if (mapped === "active" && this.pollTimer) clearTimeout(this.pollTimer);
+		this.update({ active: {
+			...active,
+			state: mapped
+		} });
+	}
+};
+const createPhone = (options = {}) => singleton ??= new Phone(options);
+//#endregion
+//#region src/telephony/use-phone.ts
+const usePhone = () => {
+	const phone = createPhone();
+	const state = useSyncExternalStore(phone.subscribe, phone.getSnapshot);
+	useEffect(() => {
+		phone.connect();
+	}, [phone]);
+	return {
+		state,
+		call: phone.call,
+		active: phone.active
+	};
+};
+//#endregion
+export { createPhone, usePhone };