@aperture-browser/session-react 0.0.0-nightly.86.594137d99de2 → 0.0.0-nightly.88.6472b75ebdd9

package/README.md

@@ -7,13 +7,15 @@ npm install @aperture-browser/session-react effect react react-dom
 ```
 
 ```tsx
-import { ApertureSession } from "@aperture-browser/session-react";
+import { useMemo } from "react";
+import { ApertureSession, shareSessionAccess } from "@aperture-browser/session-react";
 import "@aperture-browser/session-react/styles.css";
 
 export function SharedBrowser({ token }: { token: string }) {
+  const access = useMemo(() => shareSessionAccess(token, "https://aperture.example"), [token]);
   return (
     <div style={{ height: 600 }}>
-      <ApertureSession baseUrl="https://aperture.example" token={token} />
+      <ApertureSession access={access} />
     </div>
   );
 }
@@ -22,3 +24,5 @@ export function SharedBrowser({ token }: { token: string }) {
 `@aperture-browser/session-react/headless` has the same session without any UI, for apps that build their own controls.
 
 Documentation: https://aperture-browser-docs.pages.dev/docs/packages/session-react
+
+For consumer-authenticated access, pass a stable `access` object with `{ kind: "relay", baseUrl: "/aperture", sessionId }`. Your backend owns authentication through `@aperture-browser/session-relay`; the browser sends no Aperture credentials. `useSession({ access })` exposes the same connection headlessly.

package/dist/{headless-CJ5KaGbF.js → headless-Dz39dQkW.js}

@@ -1,19 +1,19 @@
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import * as Effect from "effect/Effect";
 import * as Stream from "effect/Stream";
-import { DEFAULT_VIEWPORT, LiveSessionConnection, LiveSessionError, LiveSessionError as LiveSessionError$1, computeRenderMetrics, createViewportPreset, evdevKeycodeByCode, keyboardInputMessage, keyboardModifiers, shouldForwardBrowserShortcut, strictParseOptions, windowsVirtualKeyCodeForCodeOrKey } from "@aperture-browser/live-session";
+import { DEFAULT_VIEWPORT, LiveSessionConnection, LiveSessionError, LiveSessionError as LiveSessionError$1, computeRenderMetrics, createViewportPreset, downloadSessionRecording, evdevKeycodeByCode, getSessionStatus, keyboardInputMessage, keyboardModifiers, shouldForwardBrowserShortcut, strictParseOptions, windowsVirtualKeyCodeForCodeOrKey } from "@aperture-browser/live-session";
 import * as Option from "effect/Option";
 import * as PubSub from "effect/PubSub";
 import * as Schema from "effect/Schema";
 import * as SubscriptionRef from "effect/SubscriptionRef";
 import * as Data from "effect/Data";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Redacted from "effect/Redacted";
-import { SessionsApi, apiClientLayer, baseUrlLayer } from "@aperture-browser/api-client";
 import * as Layer from "effect/Layer";
 import * as ManagedRuntime from "effect/ManagedRuntime";
 import * as FetchHttpClient from "effect/unstable/http/FetchHttpClient";
 import * as HttpClient from "effect/unstable/http/HttpClient";
+import { apiClientLayer, baseUrlLayer } from "@aperture-browser/api-client";
+import * as Redacted from "effect/Redacted";
 //#region src/effect.tsx
 const RuntimeContext = createContext(null);
 /** A hook below needed the app runtime, but no RuntimeProvider is above the component. */
@@ -95,10 +95,10 @@ const pointerButtonCode = {
 	right: 273,
 	middle: 274
 };
-function useLiveSession({ sessionId, displayName = null, credentials, sessionToken, role, enabled, webrtcSupported, iceServers, autoSize }) {
-	const identity = useMemo(() => collaborationIdentity(role, displayName), [displayName, role]);
+function useLiveSession({ access, displayName = null, enabled, webrtcSupported, iceServers, autoSize }) {
+	const identity = useMemo(() => collaborationIdentity(displayName), [displayName]);
+	const [role, setRole] = useState("viewer");
 	const runtime = useRuntime();
-	const baseUrl = useBaseUrl();
 	const frameRef = useMemo(() => runtime.runSync(SubscriptionRef.make(null)), [runtime]);
 	const paintPubSub = useMemo(() => runtime.runSync(PubSub.unbounded()), [runtime]);
 	const frames = useMemo(() => SubscriptionRef.changes(frameRef), [frameRef]);
@@ -141,6 +141,7 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 	const handleMessage = useCallback((message) => {
 		switch (message.type) {
 			case "session.snapshot":
+				setRole(message.role);
 				clientIdRef.current = message.clientId;
 				setClientId(message.clientId);
 				holderClientIdRef.current = message.holderClientId ?? null;
@@ -232,9 +233,10 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 		}
 	}, [publishPaint]);
 	useFork(() => {
-		if (!enabled || !sessionId || !credentials) {
+		if (!enabled || access === null) {
 			connectionRef.current = null;
 			setPhase("idle");
+			setRole("viewer");
 			setTargets([]);
 			setActiveTargetId(null);
 			setMediaStream(null);
@@ -251,12 +253,10 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 			publishPaint({ type: "clear" });
 			return;
 		}
+		setRole("viewer");
 		return Effect.gen(function* () {
 			const connection = yield* LiveSessionConnection.make({
-				baseUrl,
-				sessionId,
-				credentials,
-				sessionToken,
+				access,
 				identity,
 				autoSize,
 				iceServers,
@@ -284,16 +284,13 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 		})));
 	}, [
 		autoSize,
-		baseUrl,
-		credentials,
+		access,
 		enabled,
 		handleMessage,
 		iceServers,
 		identity,
 		publishFrame,
 		publishPaint,
-		sessionId,
-		sessionToken,
 		webrtcSupported
 	]);
 	const sendReliable = useCallback((message) => connectionRef.current?.sendReliable(message) ?? false, []);
@@ -580,9 +577,9 @@ const StoredIdentity = Schema.Struct({
 	avatarHash: Schema.String.check(Schema.isPattern(/^[0-9a-f]{32}$/))
 });
 const decodeStoredIdentity = Schema.decodeUnknownOption(Schema.fromJsonString(StoredIdentity), strictParseOptions);
-function collaborationIdentity(role, accountName) {
+function collaborationIdentity(accountName) {
 	const anonymous = loadAnonymousIdentity();
-	if (role !== "owner" || !accountName?.trim()) return anonymous;
+	if (!accountName?.trim()) return anonymous;
 	return {
 		...anonymous,
 		name: Array.from(accountName.trim()).slice(0, 48).join("")
@@ -1766,7 +1763,7 @@ function focusedElement(node) {
 //#region src/hooks/use-browser-control.ts
 const emptyIceServers$1 = [];
 const AUTO_SIZE_DEFAULT_STORAGE_KEY = "aperture.viewport.auto-size-default";
-function useBrowserControl({ sessionId, credentials, displayName, sessionToken, collaborationRole = "owner", enabled = true, webrtcProducerSupported = false, webrtcIceServers = emptyIceServers$1, onNotice }) {
+function useBrowserControl({ access, displayName, enabled = true, webrtcProducerSupported = false, webrtcIceServers = emptyIceServers$1, onNotice }) {
 	const runtime = useRuntime();
 	const onNoticeRef = useRef(onNotice);
 	onNoticeRef.current = onNotice;
@@ -1775,21 +1772,19 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		message
 	}));
 	const [viewportAutoSizeDefault, setViewportAutoSizeDefaultState] = useState(loadAutoSizeDefault);
-	const [viewportAutoSync, setViewportAutoSyncState] = useState(() => collaborationRole !== "viewer" && viewportAutoSizeDefault);
+	const [viewportAutoSync, setViewportAutoSyncState] = useState(() => viewportAutoSizeDefault);
 	const viewportAutoSyncRef = useRef(viewportAutoSync);
 	viewportAutoSyncRef.current = viewportAutoSync;
 	const autoSizePreference = useCallback(() => viewportAutoSyncRef.current, []);
 	const live = useLiveSession({
-		sessionId,
+		access,
 		displayName,
-		credentials,
-		sessionToken,
-		role: collaborationRole,
-		enabled: Boolean(enabled && sessionId && credentials),
+		enabled: enabled && access !== null,
 		webrtcSupported: webrtcProducerSupported,
 		iceServers: webrtcIceServers,
 		autoSize: autoSizePreference
 	});
+	const collaborationRole = live.collaboration.role;
 	const [targetOrder, setTargetOrder] = useState([]);
 	const targets = useMemo(() => mergeTargetsInCurrentOrder(targetOrder, live.targets), [live.targets, targetOrder]);
 	const liveTargetsRef = useRef(live.targets);
@@ -1800,6 +1795,7 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 	const [browserViewportSize, setBrowserViewportSizeState] = useState(null);
 	const [captured, setCaptured] = useState(false);
 	const [recordingBusy, setRecordingBusy] = useState(false);
+	const canRecord = collaborationRole === "owner" || collaborationRole === "editor";
 	const activeTargetIdRef = useRef(null);
 	const viewportRef = useRef(viewport);
 	const inputDimensionsRef = useRef(DEFAULT_VIEWPORT);
@@ -1817,13 +1813,12 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		setViewportState(createBrowserViewport(live.mediaSize, live.mediaSize.deviceScaleFactor));
 	}, [live.mediaSize]);
 	const sendInput = useCallback((message) => {
-		if (!enabled || !sessionId || !credentials) return false;
+		if (!enabled || access === null) return false;
 		return live.sendBrowserInput(message, inputDimensionsRef.current);
 	}, [
-		credentials,
+		access,
 		enabled,
-		live,
-		sessionId
+		live
 	]);
 	const activateTarget = useCallback((targetId) => {
 		live.selectTarget(targetId);
@@ -1963,27 +1958,26 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 	}), "Recording failed to start"), [live]);
 	const startRecording = useCallback((mode) => {
 		const targetId = activeTargetIdRef.current;
-		if (!targetId || collaborationRole !== "owner" || recordingBusy) return;
+		if (!targetId || !canRecord || recordingBusy) return;
 		setRecordingBusy(true);
 		runStartRecording(mode, targetId);
 	}, [
-		collaborationRole,
+		canRecord,
 		recordingBusy,
 		runStartRecording
 	]);
-	const runStopRecording = useEffectCallback((credentials, sessionId, recordingId) => settleRecording(live.request("recording.stop", { recordingId }).pipe(Effect.andThen(SessionsApi.use((sessions) => sessions.downloadSessionRecording(credentials, sessionId, recordingId, sessionToken === void 0 ? void 0 : Redacted.make(sessionToken)))), Effect.flatMap(({ blob, filename }) => {
+	const runStopRecording = useEffectCallback((access, recordingId) => settleRecording(live.request("recording.stop", { recordingId }).pipe(Effect.andThen(downloadSessionRecording(access, recordingId)), Effect.flatMap(({ blob, filename }) => {
 		const recording = live.recordings.find((candidate) => candidate.recordingId === recordingId);
-		return downloadBlob(blob, filename ?? `${sessionId}-${recording?.targetId ?? "target"}-${recordingId}.webm`);
-	}), Effect.andThen(notify("success", "Recording saved"))), "Recording failed to stop"), [live, sessionToken]);
+		return downloadBlob(blob, filename ?? `${access.sessionId}-${recording?.targetId ?? "target"}-${recordingId}.webm`);
+	}), Effect.andThen(notify("success", "Recording saved"))), "Recording failed to stop"), [live]);
 	const stopRecording = useCallback((recordingId) => {
-		if (!sessionId || !credentials || recordingBusy) return;
+		if (access === null || recordingBusy) return;
 		setRecordingBusy(true);
-		runStopRecording(credentials, sessionId, recordingId);
+		runStopRecording(access, recordingId);
 	}, [
-		credentials,
+		access,
 		recordingBusy,
-		runStopRecording,
-		sessionId
+		runStopRecording
 	]);
 	const runCancelRecording = useEffectCallback((recordingId) => settleRecording(live.request("recording.cancel", { recordingId }).pipe(Effect.andThen(notify("success", "Recording stopped"))), "Recording failed to stop"), [live]);
 	const cancelRecording = useCallback((recordingId) => {
@@ -1993,23 +1987,18 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 	}, [recordingBusy, runCancelRecording]);
 	const runSetRemoteCursor = useEffectCallback((visible) => live.request("presentation.cursor.set", { visible }).pipe(Effect.catch((error) => notify("error", errorMessage(error, "Remote cursor could not be updated")))), [live]);
 	const setRemoteCursorEnabled = useCallback((visible) => {
-		if (sessionId && credentials) runSetRemoteCursor(visible);
-	}, [
-		credentials,
-		runSetRemoteCursor,
-		sessionId
-	]);
+		if (access !== null) runSetRemoteCursor(visible);
+	}, [access, runSetRemoteCursor]);
 	const runSelectPresentation = useEffectCallback((selection) => live.selectPresentation(selection).pipe(Effect.catch((error) => notify("error", errorMessage(error, "Presentation could not be updated")))), [live]);
 	const selectMediaStream = useCallback((selection) => {
-		if (!enabled || !sessionId || !credentials || live.mediaSwitching) return false;
+		if (!enabled || access === null || live.mediaSwitching) return false;
 		runSelectPresentation(selection);
 		return true;
 	}, [
-		credentials,
+		access,
 		enabled,
 		live.mediaSwitching,
-		runSelectPresentation,
-		sessionId
+		runSelectPresentation
 	]);
 	const setWebRTCStreamSettings = useCallback((settings) => selectMediaStream({
 		kind: "webrtc",
@@ -2061,6 +2050,7 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		viewportAutoSizeDefault,
 		captured,
 		recordings: live.recordings,
+		canRecord,
 		recordingBusy,
 		remoteCursorEnabled: live.presentation?.cursorVisible ?? true,
 		collaboration: live.collaboration,
@@ -2130,7 +2120,7 @@ function errorMessage(cause, fallback) {
 }
 //#endregion
 //#region src/runtime.ts
-const makeApertureRuntime = (options = {}) => ManagedRuntime.make(Layer.mergeAll(apiClientLayer.pipe(Layer.provide(options.baseUrl ? baseUrlLayer(options.baseUrl) : Layer.empty), Layer.provide(FetchHttpClient.layer)), Layer.succeed(HttpClient.TracerPropagationEnabled, false)));
+const makeApertureRuntime = (options = {}) => ManagedRuntime.make(Layer.mergeAll(FetchHttpClient.layer, apiClientLayer.pipe(Layer.provide(options.baseUrl ? baseUrlLayer(options.baseUrl) : Layer.empty), Layer.provide(FetchHttpClient.layer)), Layer.succeed(HttpClient.TracerPropagationEnabled, false)));
 //#endregion
 //#region src/provider.tsx
 function ApertureProvider({ baseUrl, children }) {
@@ -2150,55 +2140,75 @@ function ApertureProvider({ baseUrl, children }) {
 	}) : null;
 }
 //#endregion
-//#region src/shared-session.ts
-function parseShareToken(token) {
+//#region src/session.ts
+/** Convert an editor/viewer share link into direct session access. */
+function shareSessionAccess(token, baseUrl) {
 	const sessionId = token.slice(4, 40);
-	const role = token.startsWith("ape_") ? "editor" : token.startsWith("apv_") ? "viewer" : null;
-	if (!role || token[40] !== "_" || !sessionId || !token.slice(41)) return null;
+	if (!(token.startsWith("ape_") || token.startsWith("apv_")) || token[40] !== "_" || token.length <= 41) return null;
 	return {
-		token,
+		kind: "direct",
+		baseUrl,
 		sessionId,
-		role
+		credentials: {
+			kind: "bearer",
+			token: Redacted.make(token),
+			authorityType: null,
+			tenantId: null,
+			selectedTenantId: null
+		}
 	};
 }
 const emptyIceServers = [];
-function useSharedSession({ token, displayName, onNotice }) {
-	const share = useMemo(() => parseShareToken(token), [token]);
-	const credentials = useMemo(() => share && {
-		kind: "bearer",
-		token: Redacted.make(share.token),
-		authorityType: null,
-		tenantId: null,
-		selectedTenantId: null
-	}, [share]);
-	const [state, setState] = useState({ kind: "loading" });
-	useFork(() => share && credentials ? Effect.sync(() => setState({ kind: "loading" })).pipe(Effect.andThen(SessionsApi.use((sessions) => sessions.getBrowserStatus(credentials, share.sessionId))), Effect.match({
-		onFailure: (error) => setState({ kind: error.status === 410 ? "expired" : "unavailable" }),
-		onSuccess: (browser) => setState(browser.sessionId === share.sessionId ? {
-			kind: "ready",
-			browser
-		} : { kind: "unavailable" })
-	})) : void 0, [credentials, share]);
-	const browser = state.kind === "ready" ? state.browser : null;
+function failedStatus(httpStatus) {
+	if (httpStatus === 401 || httpStatus === 403) return "denied";
+	if (httpStatus === 410) return "expired";
+	return "unavailable";
+}
+function useSession({ access, displayName, onNotice }) {
+	const [state, setState] = useState({
+		access: null,
+		status: "loading",
+		browser: null
+	});
+	useFork(() => {
+		if (access === null) return;
+		setState({
+			access,
+			status: "loading",
+			browser: null
+		});
+		return getSessionStatus(access).pipe(Effect.match({
+			onFailure: (error) => setState({
+				access,
+				status: failedStatus(error.status),
+				browser: null
+			}),
+			onSuccess: (browser) => setState(access.kind === "direct" && browser.sessionId !== access.sessionId ? {
+				access,
+				status: "unavailable",
+				browser: null
+			} : {
+				access,
+				status: "ready",
+				browser
+			})
+		}));
+	}, [access]);
+	const browser = state.access === access ? state.browser : null;
 	const control = useBrowserControl({
-		sessionId: share?.sessionId ?? null,
-		credentials: browser ? credentials : null,
+		access: browser === null ? null : access,
 		displayName,
-		sessionToken: share?.token,
-		collaborationRole: share?.role ?? "viewer",
-		enabled: browser !== null,
 		webrtcProducerSupported: browser?.media.mode === "auto" && browser.media.webrtcProducer,
 		webrtcIceServers: browser?.media.iceServers ?? emptyIceServers,
 		onNotice
 	});
 	return {
-		status: share ? state.kind : "invalid",
-		share,
+		status: access === null ? "invalid" : state.access !== access ? "loading" : state.status,
 		browser,
 		control
 	};
 }
 //#endregion
-export { makeApertureRuntime as a, collaborationPaintLifetimeMs as c, RuntimeProviderMissingError as d, useBaseUrl as f, useRuntime as g, useRunApi as h, ApertureProvider as i, useLiveSession as l, useFork as m, parseShareToken as n, useBrowserControl as o, useEffectCallback as p, useSharedSession as r, SessionViewport as s, LiveSessionError$1 as t, RuntimeProvider as u };
+export { makeApertureRuntime as a, collaborationPaintLifetimeMs as c, RuntimeProviderMissingError as d, useBaseUrl as f, useRuntime as g, useRunApi as h, ApertureProvider as i, useLiveSession as l, useFork as m, shareSessionAccess as n, useBrowserControl as o, useEffectCallback as p, useSession as r, SessionViewport as s, LiveSessionError$1 as t, RuntimeProvider as u };
 
-//# sourceMappingURL=headless-CJ5KaGbF.js.map
+//# sourceMappingURL=headless-Dz39dQkW.js.map