@protobase/ui 0.62.0 → 0.62.2

package/dist/calls/call-view.js

@@ -0,0 +1,88 @@
+import { useOptionalAuth } from "../auth/auth-provider.js";
+import { text } from "./messages.js";
+import { CallCheck } from "./call-check.js";
+import { CallMessage } from "./call-message.js";
+import { callPeople } from "./call-people.js";
+import { CallStage } from "./call-stage.js";
+import { useActiveSpeaker } from "./use-audio-levels.js";
+import { useCallSession } from "./use-call-session.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/calls/call-view.tsx
+const deviceNotices = (devices, refusedSending) => [
+	...devices?.blocked.microphone ? [text("noMicrophone")] : [],
+	...devices?.blocked.camera ? [text("noCamera")] : [],
+	...devices?.none ? [text("noDevices")] : [],
+	...refusedSending ? [text("refused")] : []
+];
+/**
+* A call, ready-made, that fills its parent, such as a column beside a conversation's messages: a check of the
+* microphone and camera first, then, after Join, everyone in the call with the one speaking ringed, a screen share
+* large, microphone, camera, screen share and Leave, the quality of each connection, Reconnecting while the link is
+* restored, and plain words for a full call, a blocked device or someone the browser cannot connect to. Made for small
+* peer-to-peer calls, at a desktop's width or a phone's.
+*/
+const CallView = ({ url, leave, nameOf = (member) => member, className }) => {
+	const session = useCallSession(url);
+	const auth = useOptionalAuth();
+	const user = auth?.state.kind === "signed-in" ? auth.state.user : void 0;
+	const self = session.self ?? user?.id ?? "";
+	const [now] = useState(() => Date.now());
+	const { devices, phase } = session;
+	const own = {
+		...devices?.microphone && { microphone: devices.microphone },
+		...devices?.camera && { camera: devices.camera },
+		...session.screen && { screen: session.screen.video },
+		microphoneOn: session.microphoneOn,
+		cameraOn: session.cameraOn
+	};
+	const voices = new Map([...devices?.microphone && session.microphoneOn ? [[self, devices.microphone]] : [], ...session.tracks.filter((track) => track.source === "microphone" && track.track && !track.muted).map((track) => [track.member, track.track])]);
+	const speaker = useActiveSpeaker(phase.kind === "in" ? voices : /* @__PURE__ */ new Map());
+	const notices = deviceNotices(devices, session.refusedSending);
+	if (phase.kind === "left") return /* @__PURE__ */ jsx(CallMessage, {
+		reason: phase.reason,
+		onJoinAgain: () => void session.join()
+	});
+	if (phase.kind === "check") return /* @__PURE__ */ jsx(CallCheck, {
+		name: user?.name ?? text("you"),
+		member: self,
+		...devices?.camera && { camera: devices.camera },
+		microphoneOn: session.microphoneOn,
+		cameraOn: session.cameraOn,
+		microphone: Boolean(devices?.microphone),
+		cameraAvailable: Boolean(devices?.camera),
+		notices,
+		onMicrophone: session.toggleMicrophone,
+		onCamera: session.toggleCamera,
+		onJoin: () => void session.join(),
+		cancel: leave
+	});
+	const people = callPeople({
+		members: session.members,
+		self,
+		tracks: session.tracks,
+		own,
+		nameOf,
+		...speaker && { speaker },
+		connections: session.connections,
+		seen: session.seen,
+		now: Math.max(now, Date.now())
+	});
+	return /* @__PURE__ */ jsx(CallStage, {
+		...className && { className },
+		people,
+		state: phase.kind === "joining" ? "joining" : phase.resuming ? "resuming" : "joined",
+		notices,
+		controls: {
+			microphoneOn: session.microphoneOn && Boolean(devices?.microphone),
+			cameraOn: session.cameraOn && Boolean(devices?.camera),
+			sharing: Boolean(session.screen),
+			onMicrophone: session.toggleMicrophone,
+			onCamera: session.toggleCamera,
+			...session.toggleScreen && { onShare: () => void session.toggleScreen() },
+			leave
+		}
+	});
+};
+//#endregion
+export { CallView };

package/dist/calls/devices.js

@@ -0,0 +1,55 @@
+//#region src/calls/devices.ts
+const blockedNames = /* @__PURE__ */ new Set(["NotAllowedError", "SecurityError"]);
+const missingNames = /* @__PURE__ */ new Set([
+	"NotFoundError",
+	"NotReadableError",
+	"OverconstrainedError"
+]);
+const one = async (media, kind) => {
+	try {
+		return {
+			track: (await media.getUserMedia({ [kind]: true })).getTracks()[0],
+			blocked: false
+		};
+	} catch (error) {
+		if (!(error instanceof DOMException)) throw error;
+		if (blockedNames.has(error.name)) return { blocked: true };
+		if (missingNames.has(error.name)) return { blocked: false };
+		throw error;
+	}
+};
+/**
+* Asks for the microphone and the camera at once, so the browser asks the person once; when that is refused, each on
+* its own, to tell which one is blocked or missing.
+*/
+const openDevices = async (media = navigator.mediaDevices) => {
+	try {
+		const stream = await media.getUserMedia({
+			audio: true,
+			video: true
+		});
+		return {
+			microphone: stream.getAudioTracks()[0],
+			camera: stream.getVideoTracks()[0],
+			blocked: {
+				microphone: false,
+				camera: false
+			},
+			none: false
+		};
+	} catch (error) {
+		if (!(error instanceof DOMException) || !(blockedNames.has(error.name) || missingNames.has(error.name))) throw error;
+	}
+	const [audio, video] = [await one(media, "audio"), await one(media, "video")];
+	return {
+		...audio.track && { microphone: audio.track },
+		...video.track && { camera: video.track },
+		blocked: {
+			microphone: audio.blocked,
+			camera: video.blocked
+		},
+		none: !audio.track && !video.track && !audio.blocked && !video.blocked
+	};
+};
+//#endregion
+export { openDevices };

package/dist/calls/messages.js

@@ -0,0 +1,76 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/calls/messages.ts
+const text = defineMessages({
+	en: {
+		accept: "Accept",
+		decline: "Decline",
+		startCall: "Start call",
+		join: "Join",
+		inProgress: "Call in progress",
+		people: (count) => count === 1 ? "1 person" : `${count} people`,
+		joinCall: "Join call",
+		leave: "Leave",
+		microphone: "Microphone",
+		camera: "Camera",
+		shareScreen: "Share screen",
+		stopSharing: "Stop sharing",
+		muted: "Muted",
+		you: "You",
+		alone: "You are the only one here",
+		connecting: "Joining…",
+		reconnecting: "Reconnecting…",
+		full: "This call is full",
+		removed: "You were removed from this call",
+		ended: "The call has ended",
+		refused: "You cannot join this call",
+		unavailable: "The call cannot be reached now. Try again in a moment.",
+		callAgain: "Join again",
+		noMicrophone: "Your microphone is blocked: allow it in the browser to be heard.",
+		noCamera: "Your camera is blocked: allow it in the browser to be seen.",
+		noDevices: "No camera or microphone was found.",
+		cannotConnect: (name) => `Cannot connect to ${name}`,
+		poorConnection: "Poor connection",
+		goodConnection: "Good connection",
+		sharing: (name) => `${name} is sharing their screen`,
+		youAreSharing: "You are sharing your screen",
+		speaking: "Speaking",
+		preview: "Your camera before you join"
+	},
+	nl: {
+		accept: "Opnemen",
+		decline: "Weigeren",
+		startCall: "Gesprek starten",
+		join: "Deelnemen",
+		inProgress: "Gesprek bezig",
+		people: (count) => count === 1 ? "1 persoon" : `${count} personen`,
+		joinCall: "Deelnemen aan gesprek",
+		leave: "Verlaten",
+		microphone: "Microfoon",
+		camera: "Camera",
+		shareScreen: "Scherm delen",
+		stopSharing: "Stoppen met delen",
+		muted: "Gedempt",
+		you: "Jij",
+		alone: "Je bent de enige hier",
+		connecting: "Deelnemen…",
+		reconnecting: "Opnieuw verbinden…",
+		full: "Dit gesprek is vol",
+		removed: "Je bent uit dit gesprek gehaald",
+		ended: "Het gesprek is afgelopen",
+		refused: "Je kunt niet aan dit gesprek deelnemen",
+		unavailable: "Het gesprek is nu niet bereikbaar. Probeer het zo opnieuw.",
+		callAgain: "Opnieuw deelnemen",
+		noMicrophone: "Je microfoon is geblokkeerd: sta hem toe in de browser om gehoord te worden.",
+		noCamera: "Je camera is geblokkeerd: sta hem toe in de browser om gezien te worden.",
+		noDevices: "Er is geen camera of microfoon gevonden.",
+		cannotConnect: (name) => `Kan geen verbinding maken met ${name}`,
+		poorConnection: "Slechte verbinding",
+		goodConnection: "Goede verbinding",
+		sharing: (name) => `${name} deelt het scherm`,
+		youAreSharing: "Je deelt je scherm",
+		speaking: "Spreekt",
+		preview: "Je camera voordat je deelneemt"
+	}
+});
+//#endregion
+export { text };

package/dist/calls/record-call.d.ts

@@ -0,0 +1,12 @@
+import { CallViewProps } from "./call-view.js";
+//#region src/calls/record-call.d.ts
+export type RecordCallProps = Omit<CallViewProps, 'leave'> & {
+  resource: string;
+  recordKey: string;
+};
+/**
+ * The record's call view while the app's address joins it (`call=join`, as Accept and Join open it), and nothing
+ * otherwise: put it beside the record's own content, such as on a full-area record page. Leave goes back to the record.
+ */
+export declare const RecordCall: ({ resource, recordKey, ...rest }: RecordCallProps) => import("react").JSX.Element | null;
+//#endregion

package/dist/calls/record-call.js

@@ -0,0 +1,18 @@
+import { CallView } from "./call-view.js";
+import { useRecordCallAddress } from "./use-record-call-address.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/calls/record-call.tsx
+/**
+* The record's call view while the app's address joins it (`call=join`, as Accept and Join open it), and nothing
+* otherwise: put it beside the record's own content, such as on a full-area record page. Leave goes back to the record.
+*/
+const RecordCall = ({ resource, recordKey, ...rest }) => {
+	const { joining, leave } = useRecordCallAddress(resource, recordKey);
+	if (!joining) return null;
+	return /* @__PURE__ */ jsx(CallView, {
+		leave,
+		...rest
+	}, `${resource}/${recordKey}`);
+};
+//#endregion
+export { RecordCall };

package/dist/calls/ring-tone.js

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+//#region src/calls/ring-tone.ts
+const toneHz = [440, 480];
+const ringMs = 400;
+const cycleMs = 3e3;
+/**
+* Plays a ring while `on`, through Web Audio. A browser that has not let the page play sound yet, before the person
+* clicked or typed in it, keeps the context suspended and plays nothing: the ring still shows.
+*/
+const useRingTone = (on) => {
+	useEffect(() => {
+		if (!on || typeof AudioContext === "undefined") return;
+		const context = new AudioContext();
+		const ring = () => {
+			const gain = context.createGain();
+			gain.gain.value = .08;
+			gain.connect(context.destination);
+			for (const [index, start] of [0, ringMs * 1.5 / 1e3].entries()) for (const hz of toneHz) {
+				const oscillator = context.createOscillator();
+				oscillator.frequency.value = hz;
+				oscillator.connect(gain);
+				oscillator.start(context.currentTime + start);
+				oscillator.stop(context.currentTime + start + ringMs / 1e3 / (index + 1));
+			}
+		};
+		ring();
+		const timer = setInterval(ring, cycleMs);
+		return () => {
+			clearInterval(timer);
+			context.close();
+		};
+	}, [on]);
+};
+//#endregion
+export { useRingTone };

package/dist/calls/ringing.js

@@ -0,0 +1,16 @@
+//#region src/calls/ringing.ts
+/** The rings as read at `readAt`, each with the time it stops ringing here. */
+const ringsUntil = (rings, readAt) => rings.map((ring) => ({
+	...ring,
+	until: readAt + ring.remaining_ms
+}));
+/** The rings still ringing at `now`, and the next time one stops, to look again then. */
+const ringingAt = (rings, now) => {
+	const ringing = rings.filter((ring) => ring.until > now);
+	return {
+		ringing,
+		next: ringing.length === 0 ? void 0 : Math.min(...ringing.map((ring) => ring.until))
+	};
+};
+//#endregion
+export { ringingAt, ringsUntil };

package/dist/calls/track-media.js

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/calls/track-media.tsx
+const keepPlaying = (element, track) => {
+	element.srcObject = new MediaStream([track]);
+	const play = () => {
+		if (track.readyState !== "live") return;
+		element.play().catch((error) => {
+			if (error instanceof DOMException && (error.name === "AbortError" || error.name === "NotAllowedError")) return;
+			throw error;
+		});
+	};
+	element.addEventListener("pause", play);
+	return () => element.removeEventListener("pause", play);
+};
+/** A video element showing the track, muted, inline, playing as soon as it can and for as long as the track is live. */
+const TrackVideo = ({ track, ...rest }) => {
+	const ref = useCallback((element) => element ? keepPlaying(element, track) : void 0, [track]);
+	return /* @__PURE__ */ jsx("video", {
+		ref,
+		autoPlay: true,
+		playsInline: true,
+		muted: true,
+		...rest
+	});
+};
+/** Plays the track's sound, unseen, for as long as the track is live. */
+const TrackAudio = ({ track }) => {
+	const ref = useCallback((element) => element ? keepPlaying(element, track) : void 0, [track]);
+	return /* @__PURE__ */ jsx("audio", {
+		ref,
+		autoPlay: true
+	});
+};
+//#endregion
+export { TrackAudio, TrackVideo };

package/dist/calls/use-audio-levels.js

@@ -0,0 +1,43 @@
+import { activeSpeaker } from "./call-layout.js";
+import { useEffect, useState } from "react";
+//#region src/calls/use-audio-levels.ts
+const readEveryMs = 200;
+const holdMs = 1e3;
+const levelOf = (analyser, samples) => {
+	analyser.getFloatTimeDomainData(samples);
+	let sum = 0;
+	for (const sample of samples) sum += sample * sample;
+	return Math.min(1, Math.sqrt(sum / samples.length) * 4);
+};
+/** Who of these members is speaking, by the sound of their microphone tracks, read in the browser through Web Audio. */
+const useActiveSpeaker = (tracks) => {
+	const [speaker, setSpeaker] = useState();
+	const ids = [...tracks].map(([member, track]) => `${member}:${track.id}`).join(",");
+	useEffect(() => {
+		if (tracks.size === 0 || typeof AudioContext === "undefined") return;
+		const context = new AudioContext();
+		const analysers = new Map([...tracks].map(([member, track]) => {
+			const analyser = context.createAnalyser();
+			analyser.fftSize = 512;
+			context.createMediaStreamSource(new MediaStream([track])).connect(analyser);
+			return [member, analyser];
+		}));
+		const samples = /* @__PURE__ */ new Float32Array(512);
+		let last;
+		const timer = setInterval(() => {
+			const loudest = activeSpeaker(new Map([...analysers].map(([member, analyser]) => [member, levelOf(analyser, samples)])));
+			if (loudest) last = {
+				member: loudest,
+				at: Date.now()
+			};
+			setSpeaker(last && Date.now() - last.at < holdMs ? last.member : void 0);
+		}, readEveryMs);
+		return () => {
+			clearInterval(timer);
+			context.close();
+		};
+	}, [ids]);
+	return speaker;
+};
+//#endregion
+export { useActiveSpeaker };

package/dist/calls/use-call-session.js

@@ -0,0 +1,157 @@
+import { openDevices } from "./devices.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/calls/use-call-session.ts
+const connectionsEveryMs = 2e3;
+const stop = (tracks) => {
+	for (const track of tracks) track?.stop();
+};
+/**
+* The member's session in the call the app's function at `url` admits them to: their devices from the start, for the
+* check before joining; then the call, which `join` joins after the click, with what they send and receive, and who
+* is in it. Leaving the page leaves the call and stops the devices.
+*/
+const useCallSession = (url) => {
+	const [phase, setPhase] = useState({ kind: "check" });
+	const [devices, setDevices] = useState();
+	const [microphoneOn, setMicrophoneOn] = useState(true);
+	const [cameraOn, setCameraOn] = useState(true);
+	const [tracks, setTracks] = useState([]);
+	const [members, setMembers] = useState([]);
+	const [connections, setConnections] = useState([]);
+	const [screen, setScreen] = useState();
+	const [refusedSending, setRefusedSending] = useState(false);
+	const call = useRef(void 0);
+	const gone = useRef(false);
+	const own = useRef([]);
+	const seen = useRef(/* @__PURE__ */ new Map());
+	const opening = useRef(Promise.resolve(void 0));
+	useEffect(() => {
+		let cancelled = false;
+		gone.current = false;
+		opening.current = openDevices().then((opened) => {
+			if (cancelled) {
+				stop([opened.microphone, opened.camera]);
+				return;
+			}
+			own.current.push(opened.microphone, opened.camera);
+			setDevices(opened);
+			return opened;
+		});
+		return () => {
+			cancelled = true;
+			gone.current = true;
+			call.current?.leave();
+			call.current = void 0;
+			stop(own.current);
+			own.current = [];
+		};
+	}, []);
+	useEffect(() => {
+		for (const { member } of members) if (!seen.current.has(member)) seen.current.set(member, Date.now());
+	}, [members]);
+	useEffect(() => {
+		if (phase.kind !== "in") return;
+		const timer = setInterval(() => void call.current?.connections().then(setConnections), connectionsEveryMs);
+		return () => clearInterval(timer);
+	}, [phase.kind]);
+	const join = useCallback(async () => {
+		setPhase({ kind: "joining" });
+		const { joinCall, PublishRefused } = await import("@protobase/client/calls");
+		const joined = await joinCall({
+			url,
+			onTracks: setTracks,
+			onMembers: setMembers,
+			onState: (state) => {
+				if (state.state === "joined" || state.state === "resuming") setPhase({
+					kind: "in",
+					resuming: state.state === "resuming"
+				});
+				if (state.state === "left") setPhase({
+					kind: "left",
+					reason: state.reason
+				});
+			}
+		}).then((made) => made, () => void 0);
+		if (!joined) return;
+		if (gone.current) return joined.leave();
+		call.current = joined;
+		const opened = await opening.current;
+		const sending = {
+			...opened?.microphone && { microphone: opened.microphone },
+			...opened?.camera && { camera: opened.camera }
+		};
+		await joined.publish(sending).then(() => {
+			if (sending.microphone) joined.mute("microphone", !microphoneOn);
+			if (sending.camera) joined.mute("camera", !cameraOn);
+		}, (error) => {
+			if (!(error instanceof PublishRefused)) throw error;
+			setRefusedSending(true);
+		});
+	}, [
+		url,
+		microphoneOn,
+		cameraOn
+	]);
+	const toggleMicrophone = useCallback(() => {
+		const next = !microphoneOn;
+		setMicrophoneOn(next);
+		if (devices?.microphone) devices.microphone.enabled = next;
+		call.current?.mute("microphone", !next);
+	}, [microphoneOn, devices]);
+	const toggleCamera = useCallback(() => {
+		const next = !cameraOn;
+		setCameraOn(next);
+		if (devices?.camera) devices.camera.enabled = next;
+		call.current?.mute("camera", !next);
+	}, [cameraOn, devices]);
+	const stopSharing = useCallback(async (shared) => {
+		setScreen(void 0);
+		stop([shared.video, shared.audio]);
+		await call.current?.unpublish("screen");
+		if (shared.audio) await call.current?.unpublish("screen-audio");
+	}, []);
+	const toggleScreen = useCallback(async () => {
+		if (screen) return stopSharing(screen);
+		let display;
+		try {
+			display = await navigator.mediaDevices.getDisplayMedia({
+				video: true,
+				audio: true
+			});
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "NotAllowedError") return;
+			throw error;
+		}
+		const shared = {
+			video: display.getVideoTracks()[0],
+			...display.getAudioTracks()[0] && { audio: display.getAudioTracks()[0] }
+		};
+		own.current.push(shared.video, shared.audio);
+		shared.video.addEventListener("ended", () => void stopSharing(shared));
+		await call.current?.publish({
+			screen: shared.video,
+			...shared.audio && { "screen-audio": shared.audio }
+		});
+		setScreen(shared);
+	}, [screen, stopSharing]);
+	const canShare = typeof navigator !== "undefined" && typeof navigator.mediaDevices?.getDisplayMedia === "function";
+	return {
+		phase,
+		devices,
+		microphoneOn,
+		cameraOn,
+		tracks,
+		members,
+		connections,
+		screen,
+		refusedSending,
+		seen: seen.current,
+		self: call.current?.participant,
+		join,
+		toggleMicrophone,
+		toggleCamera,
+		...canShare && { toggleScreen }
+	};
+};
+//#endregion
+export { useCallSession };

package/dist/calls/use-record-call-address.d.ts

@@ -0,0 +1,17 @@
+//#region src/calls/use-record-call-address.d.ts
+/**
+ * A record's call as the app's address holds it: whether the page joins it (`call=join`), the link that joins it, as a
+ * ring's Accept and a call mark's Join open it, and the link back to the record without the call, as Leave opens it.
+ */
+export declare const useRecordCallAddress: (resource: string, recordKey: string) => {
+  joining: boolean;
+  join: {
+    href: string;
+    onFollow: () => void;
+  };
+  leave: {
+    href: string;
+    onFollow: () => void;
+  };
+};
+//#endregion

package/dist/calls/use-record-call-address.js

@@ -0,0 +1,30 @@
+import { useAppAddress } from "../app/use-app-address.js";
+//#region src/calls/use-record-call-address.ts
+/**
+* A record's call as the app's address holds it: whether the page joins it (`call=join`), the link that joins it, as a
+* ring's Accept and a call mark's Join open it, and the link back to the record without the call, as Leave opens it.
+*/
+const useRecordCallAddress = (resource, recordKey) => {
+	const { address, href, open } = useAppAddress();
+	const joining = address?.kind === "record" && address.resource === resource && address.key === recordKey && address.call === "join";
+	const target = (to) => ({
+		href: to,
+		onFollow: () => open(to)
+	});
+	return {
+		joining,
+		join: target(href({
+			kind: "record",
+			resource,
+			key: recordKey,
+			call: "join"
+		})),
+		leave: target(href({
+			kind: "record",
+			resource,
+			key: recordKey
+		}))
+	};
+};
+//#endregion
+export { useRecordCallAddress };