@protobase/ui 0.62.5 → 0.63.0

package/dist/calls/guest-call-page.js

@@ -0,0 +1,82 @@
+import { Button } from "../primitives/button.js";
+import { Input } from "../primitives/input.js";
+import { text } from "./messages.js";
+import { guestCallLink } from "./guest-call-link.js";
+import { guestAdmission } from "./guest-admission.js";
+import { CallView } from "./call-view.js";
+import { useCallback, useState } from "react";
+import { guestCallsPath } from "@protobase/schema/internal";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/calls/guest-call-page.tsx
+/**
+* The page a guest link opens, for someone with no account: their name, then the call view's check of their microphone
+* and camera, Ask to join, the wait in the lobby until someone in the call lets them in, and the call. They reach
+* nothing else of the app: the page asks only the lobby and the guest call socket.
+*/
+const GuestCallPage = ({ link, systemPath, base }) => {
+	const [draft, setDraft] = useState("");
+	const [name, setName] = useState();
+	const [left, setLeft] = useState(false);
+	const admission = useCallback(async (signal) => {
+		const { guestLobby } = await import("@protobase/client/calls");
+		return guestAdmission(guestLobby({ systemPath }), link, name, signal);
+	}, [
+		systemPath,
+		link,
+		name
+	]);
+	const submit = (event) => {
+		event.preventDefault();
+		if (draft.trim()) setName(draft.trim());
+	};
+	const here = guestCallLink(base, link);
+	if (left) return /* @__PURE__ */ jsx("p", {
+		role: "status",
+		className: "flex min-h-[100dvh] items-center justify-center bg-background p-4 text-sm text-foreground",
+		children: text("youLeft")
+	});
+	if (name === void 0) return /* @__PURE__ */ jsx("main", {
+		className: "flex min-h-[100dvh] items-center justify-center bg-background p-4",
+		children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: submit,
+			className: "flex w-full max-w-sm flex-col gap-3",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-foreground",
+					children: text("guestIntro")
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1 text-sm text-foreground",
+					children: [text("yourName"), /* @__PURE__ */ jsx(Input, {
+						autoFocus: true,
+						autoComplete: "name",
+						maxLength: 60,
+						value: draft,
+						onChange: (event) => setDraft(event.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					variant: "primary",
+					disabled: !draft.trim(),
+					children: text("continue")
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx("main", {
+		className: "h-[100dvh]",
+		children: /* @__PURE__ */ jsx(CallView, {
+			url: guestCallsPath(systemPath, "socket"),
+			admission,
+			name,
+			nameOf: () => text("someone"),
+			leave: {
+				href: here,
+				onFollow: () => setLeft(true)
+			}
+		})
+	});
+};
+//#endregion
+export { GuestCallPage };

package/dist/calls/messages.js

@@ -21,7 +21,7 @@ const text = defineMessages({
 		reconnecting: "Reconnecting…",
 		full: "This call is full",
 		removed: "You were removed from this call",
-		ended: "The call has ended",
+		ended: "The call ended",
 		refused: "You cannot join this call",
 		unavailable: "The call cannot be reached now. Try again in a moment.",
 		callAgain: "Join again",
@@ -34,7 +34,40 @@ const text = defineMessages({
 		sharing: (name) => `${name} is sharing their screen`,
 		youAreSharing: "You are sharing your screen",
 		speaking: "Speaking",
-		preview: "Your camera before you join"
+		preview: "Your camera before you join",
+		guestName: (name) => `${name} (guest)`,
+		denied: "Nobody in the call let you in",
+		waiting: "Waiting for someone in the call to let you in…",
+		askToJoin: "Ask to join",
+		someone: "Someone in the call",
+		guests: "Guests",
+		waitingGuest: (name) => `${name} is waiting to join`,
+		admit: "Let in",
+		deny: "Turn away",
+		remove: "Remove",
+		revoke: "Revoke",
+		newLink: "Create guest link",
+		copyLink: "Copy link",
+		copied: "Copied",
+		guestLinks: "Guest links",
+		noLinks: "No guest link yet. Anyone with a link waits here until someone in the call lets them in.",
+		inLobby: "Waiting to join",
+		guestsInCall: "Guests in the call",
+		guestsMaySend: "Guests may send",
+		sendAll: "Everything",
+		sendCamera: "Camera and mic",
+		sendMicrophone: "Mic only",
+		linkUntil: (until) => `Until ${until}`,
+		linkUntilEnd: "Until the call ends",
+		linkLasts: "The link works",
+		forAnHour: "For an hour",
+		addressesVisible: "In a call between browsers, a guest and the people in the call can see each other’s network addresses.",
+		guestRefused: "This could not be done: the guest or link is gone, the call is full, or guest links are off.",
+		close: "Close",
+		yourName: "Your name",
+		guestIntro: "You are invited to a call. Give your name, check your microphone and camera, and someone in the call lets you in.",
+		continue: "Continue",
+		youLeft: "You left the call"
 	},
 	nl: {
 		accept: "Opnemen",
@@ -69,7 +102,40 @@ const text = defineMessages({
 		sharing: (name) => `${name} deelt het scherm`,
 		youAreSharing: "Je deelt je scherm",
 		speaking: "Spreekt",
-		preview: "Je camera voordat je deelneemt"
+		preview: "Je camera voordat je deelneemt",
+		guestName: (name) => `${name} (gast)`,
+		denied: "Niemand in het gesprek heeft je binnengelaten",
+		waiting: "Wachten tot iemand in het gesprek je binnenlaat…",
+		askToJoin: "Vragen om deel te nemen",
+		someone: "Iemand in het gesprek",
+		guests: "Gasten",
+		waitingGuest: (name) => `${name} wacht om deel te nemen`,
+		admit: "Binnenlaten",
+		deny: "Weigeren",
+		remove: "Verwijderen",
+		revoke: "Intrekken",
+		newLink: "Gastlink maken",
+		copyLink: "Link kopiëren",
+		copied: "Gekopieerd",
+		guestLinks: "Gastlinks",
+		noLinks: "Nog geen gastlink. Wie een link heeft, wacht hier tot iemand in het gesprek hem binnenlaat.",
+		inLobby: "Wacht om deel te nemen",
+		guestsInCall: "Gasten in het gesprek",
+		guestsMaySend: "Gasten mogen sturen",
+		sendAll: "Alles",
+		sendCamera: "Camera en microfoon",
+		sendMicrophone: "Alleen geluid",
+		linkUntil: (until) => `Tot ${until}`,
+		linkUntilEnd: "Tot het gesprek afloopt",
+		linkLasts: "De link werkt",
+		forAnHour: "Een uur lang",
+		addressesVisible: "In een gesprek tussen browsers zien een gast en de mensen in het gesprek elkaars netwerkadressen.",
+		guestRefused: "Dit lukte niet: de gast of link is weg, het gesprek is vol, of gastlinks staan uit.",
+		close: "Sluiten",
+		yourName: "Je naam",
+		guestIntro: "Je bent uitgenodigd voor een gesprek. Geef je naam, controleer je microfoon en camera, en iemand in het gesprek laat je binnen.",
+		continue: "Verder",
+		youLeft: "Je hebt het gesprek verlaten"
 	}
 });
 //#endregion

package/dist/calls/use-call-session.d.ts

@@ -0,0 +1,7 @@
+import "@protobase/client/calls";
+//#region src/calls/use-call-session.d.ts
+export type CallSessionOptions = {
+  /** For a guest: their wait in the lobby, which resolves with their token once let in, or rejects with `NotLetIn`. */
+  admission?: (signal: AbortSignal) => Promise<string>;
+};
+//#endregion

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

@@ -1,4 +1,5 @@
 import { openDevices } from "./devices.js";
+import { NotLetIn } from "./guest-admission.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/calls/use-call-session.ts
 const connectionsEveryMs = 2e3;
@@ -8,10 +9,12 @@ const stop = (tracks) => {
 /**
 * 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.
+* is in it. A guest waits in the lobby first. Leaving the page leaves the call and stops the devices.
 */
-const useCallSession = (url) => {
+const useCallSession = (url, { admission } = {}) => {
 	const [phase, setPhase] = useState({ kind: "check" });
+	const [lobby, setLobby] = useState();
+	const waiting = useRef(new AbortController());
 	const [devices, setDevices] = useState();
 	const [microphoneOn, setMicrophoneOn] = useState(true);
 	const [cameraOn, setCameraOn] = useState(true);
@@ -40,6 +43,7 @@ const useCallSession = (url) => {
 		return () => {
 			cancelled = true;
 			gone.current = true;
+			waiting.current.abort();
 			call.current?.leave();
 			call.current = void 0;
 			stop(own.current);
@@ -54,11 +58,28 @@ const useCallSession = (url) => {
 		const timer = setInterval(() => void call.current?.connections().then(setConnections), connectionsEveryMs);
 		return () => clearInterval(timer);
 	}, [phase.kind]);
+	const admitted = async () => {
+		if (!admission) return {};
+		setPhase({ kind: "waiting" });
+		waiting.current = new AbortController();
+		const guest = await admission(waiting.current.signal).then((token) => token, (error) => {
+			if (!(error instanceof NotLetIn)) throw error;
+			setPhase({
+				kind: "left",
+				reason: error.reason
+			});
+		});
+		return guest === void 0 ? void 0 : { guest };
+	};
 	const join = useCallback(async () => {
+		const guest = await admitted();
+		if (!guest || gone.current) return;
 		setPhase({ kind: "joining" });
 		const { joinCall, PublishRefused } = await import("@protobase/client/calls");
 		const joined = await joinCall({
 			url,
+			...guest,
+			onLobby: setLobby,
 			onTracks: setTracks,
 			onMembers: setMembers,
 			onState: (state) => {
@@ -89,6 +110,7 @@ const useCallSession = (url) => {
 		});
 	}, [
 		url,
+		admission,
 		microphoneOn,
 		cameraOn
 	]);
@@ -147,6 +169,9 @@ const useCallSession = (url) => {
 		refusedSending,
 		seen: seen.current,
 		self: call.current?.participant,
+		/** The lobby, once the server tells a member who may invite of it. */
+		lobby,
+		guests: call.current?.guests,
 		join,
 		toggleMicrophone,
 		toggleCamera,

package/dist/calls/use-guest-request.js

@@ -0,0 +1,24 @@
+import { useCallback, useState } from "react";
+//#region src/calls/use-guest-request.ts
+/**
+* Runs a member's guest request, and says when the server refused it, as `GuestRefused`; any other failure is thrown
+* on, where the page's error handling sees it.
+*/
+const useGuestRequest = () => {
+	const [refused, setRefused] = useState(false);
+	return {
+		run: useCallback((request) => {
+			setRefused(false);
+			(async () => {
+				const { GuestRefused } = await import("@protobase/client/calls");
+				await request().catch((error) => {
+					if (!(error instanceof GuestRefused)) throw error;
+					setRefused(true);
+				});
+			})();
+		}, []),
+		refused
+	};
+};
+//#endregion
+export { useGuestRequest };

package/dist/data/api-provider.d.ts

@@ -83,6 +83,10 @@ export declare const useClient: () => {
     list: () => Promise<import("@protobase/client").CallRing[]>;
     decline: (call: string) => Promise<void>;
   };
+  callGuests: {
+    allowed: () => Promise<boolean>;
+    setAllowed: (allowed: boolean) => Promise<void>;
+  };
 };
 /**
  * The client of the API that serves `resource`: a source's for a resource the app draws from one, the app's own
@@ -168,6 +172,10 @@ export declare const useResourceClient: (resource: string) => {
     list: () => Promise<import("@protobase/client").CallRing[]>;
     decline: (call: string) => Promise<void>;
   };
+  callGuests: {
+    allowed: () => Promise<boolean>;
+    setAllowed: (allowed: boolean) => Promise<void>;
+  };
 };
 export type ApiProviderProps = {
   /** Defaults to `/api/v1` on the current origin. */

package/dist/index.js

@@ -35,6 +35,7 @@ import { usePlugin } from "./plugins/plugin-context.js";
 import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
+import { CallView } from "./calls/call-view.js";
 import { chatDayLabel, sameChatDay } from "./chat/chat-day.js";
 import { ChatDivider } from "./chat/chat-divider.js";
 import { ChatMessage } from "./chat/chat-message.js";
@@ -63,7 +64,6 @@ import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
 import { useSignedInUser } from "./auth/use-signed-in-user.js";
-import { CallView } from "./calls/call-view.js";
 import { useRecordCallAddress } from "./calls/use-record-call-address.js";
 import { RecordCall } from "./calls/record-call.js";
 import { useRecordCalls } from "./calls/use-record-calls.js";

package/dist/organizations/messages.js

@@ -60,6 +60,9 @@ const text = defineMessages({
 		details: "Details",
 		detailsEditable: "The name people see, and the slug that names it in links.",
 		detailsReadOnly: "Owners and admins can change these.",
+		guestLinks: "Guest links to calls",
+		guestLinksDescription: "Someone in a call can share a link that lets a person from outside wait in its lobby and join that one call once let in. Turning guest links off revokes every link and takes every guest out at once. Owners and admins can change this.",
+		guestLinksAllowed: "Allow guest links",
 		handOver: "Hand over",
 		handOverDescription: "Make another member the owner. You stay as an admin.",
 		newOwner: "New owner",
@@ -149,6 +152,9 @@ const text = defineMessages({
 		details: "Gegevens",
 		detailsEditable: "De naam die mensen zien, en de slug die haar in links noemt.",
 		detailsReadOnly: "Eigenaren en beheerders kunnen dit wijzigen.",
+		guestLinks: "Gastlinks voor gesprekken",
+		guestLinksDescription: "Iemand in een gesprek kan een link delen waarmee iemand van buiten in de wachtruimte wacht en, eenmaal binnengelaten, aan dat ene gesprek deelneemt. Gastlinks uitzetten trekt elke link in en haalt elke gast meteen uit het gesprek. Eigenaren en beheerders kunnen dit wijzigen.",
+		guestLinksAllowed: "Gastlinks toestaan",
 		handOver: "Overdragen",
 		handOverDescription: "Maak een ander lid eigenaar. Jij blijft beheerder.",
 		newOwner: "Nieuwe eigenaar",

package/dist/organizations/organization-page.js

@@ -1,7 +1,10 @@
 import { useAuth } from "../auth/auth-provider.js";
+import { useClient } from "../data/api-provider.js";
+import { useMeta } from "../data/use-meta.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
 import { Input } from "../primitives/input.js";
+import { Switch } from "../primitives/switch.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { AccountSection, SectionError } from "../account/account-section.js";
 import { useAction } from "./use-action.js";
@@ -146,6 +149,30 @@ const Delete = ({ organization, basePath }) => {
 		]
 	});
 };
+const GuestLinks = ({ editable }) => {
+	const client = useClient();
+	const [allowed, setAllowed] = useState();
+	const { busy, error, run } = useAction();
+	useEffect(() => {
+		client.callGuests.allowed().then(setAllowed);
+	}, [client]);
+	if (allowed === void 0) return null;
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: text("guestLinks"),
+		description: text("guestLinksDescription"),
+		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsxs("label", {
+			className: "flex items-center gap-2 text-sm text-foreground",
+			children: [/* @__PURE__ */ jsx(Switch, {
+				checked: allowed,
+				label: text("guestLinksAllowed"),
+				...editable && !busy && { onChange: (next) => void run(async () => {
+					await client.callGuests.setAllowed(next);
+					setAllowed(next);
+				}) }
+			}), text("guestLinksAllowed")]
+		})]
+	});
+};
 const Leave = ({ organization, basePath, owner }) => {
 	const { session } = useAuth();
 	const { busy, error, run } = useAction();
@@ -162,8 +189,12 @@ const Leave = ({ organization, basePath, owner }) => {
 		})]
 	});
 };
-/** The organization one works in: its details, and handing it over, leaving and deleting it, as one's role allows. */
+/**
+* The organization one works in: its details, whether its calls take guests, and handing it over, leaving and deleting
+* it, as one's role allows.
+*/
 const OrganizationPage = ({ current, basePath, onChanged }) => {
+	const calls = useMeta().data?.calls === true;
 	const organization = current?.organization;
 	if (!organization) return /* @__PURE__ */ jsx("div", {
 		className: "mx-auto w-full max-w-3xl px-4 py-6 md:px-6",
@@ -185,6 +216,7 @@ const OrganizationPage = ({ current, basePath, onChanged }) => {
 				editable: managesOrganization(current),
 				onSaved: onChanged
 			}, `${organization.name}/${organization.slug}`),
+			calls && current.role && /* @__PURE__ */ jsx(GuestLinks, { editable: managesOrganization(current) }),
 			owner && current.memberId && /* @__PURE__ */ jsx(HandOver, {
 				organization,
 				memberId: current.memberId

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.62.5";
+var version = "0.63.0";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };