@aperture-browser/session-react 0.0.0-nightly.82.2e4f6368108f → 0.0.0-nightly.84.0c72bc0d2eaf

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

@@ -8,6 +8,7 @@ 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";
@@ -94,7 +95,7 @@ const pointerButtonCode = {
 	right: 273,
 	middle: 274
 };
-function useLiveSession({ sessionId, displayName = null, credentials, sessionToken, role, enabled, webrtcSupported, iceServers }) {
+function useLiveSession({ sessionId, displayName = null, credentials, sessionToken, role, enabled, webrtcSupported, iceServers, autoSize }) {
 	const identity = useMemo(() => collaborationIdentity(role, displayName), [displayName, role]);
 	const runtime = useRuntime();
 	const baseUrl = useBaseUrl();
@@ -127,6 +128,7 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 	const [presentationSwitching, setPresentationSwitching] = useState(false);
 	const [presentation, setPresentation] = useState(null);
 	const [recordings, setRecordings] = useState([]);
+	const [viewportOwnership, setViewportOwnership] = useState(null);
 	const [clientId, setClientId] = useState("");
 	const [holderClientId, setHolderClientId] = useState(null);
 	const [leaseMode, setLeaseMode] = useState(null);
@@ -152,6 +154,10 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 				setMediaSize(resolveMediaSize(message.targets, message.activeTargetId));
 				setRecordings(message.recordings);
 				setPresentation(message.presentation ?? null);
+				setViewportOwnership(message.autoSize === void 0 ? null : {
+					ownerClientId: message.viewportOwnerClientId ?? null,
+					autoSize: message.autoSize
+				});
 				setLastError(null);
 				return;
 			case "targets.state":
@@ -179,6 +185,12 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 				releasePendingRef.current = false;
 				setLastError((current) => current?.code === "input_busy" || current?.code === "input_not_owned" ? null : current);
 				return;
+			case "viewport.state":
+				setViewportOwnership({
+					ownerClientId: message.viewportOwnerClientId ?? null,
+					autoSize: message.autoSize
+				});
+				return;
 			case "presence.cursor":
 				if (message.clientId !== followingClientIdRef.current) return;
 				setCursors((current) => new Map(current).set(message.clientId, message));
@@ -234,6 +246,7 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 			setParticipants([]);
 			setCursors(/* @__PURE__ */ new Map());
 			setRecordings([]);
+			setViewportOwnership(null);
 			publishFrame(null);
 			publishPaint({ type: "clear" });
 			return;
@@ -245,6 +258,7 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 				credentials,
 				sessionToken,
 				identity,
+				autoSize,
 				iceServers,
 				webrtcSupported,
 				callbacks: {
@@ -269,6 +283,7 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 			publishPaint({ type: "clear" });
 		})));
 	}, [
+		autoSize,
 		baseUrl,
 		credentials,
 		enabled,
@@ -525,6 +540,7 @@ function useLiveSession({ sessionId, displayName = null, credentials, sessionTok
 		presentation,
 		mediaSwitching: targetSwitching || presentationSwitching,
 		recordings,
+		viewportOwnership,
 		sendBrowserInput,
 		selectTarget,
 		requestSelectTarget,
@@ -1749,6 +1765,7 @@ function focusedElement(node) {
 //#endregion
 //#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 }) {
 	const runtime = useRuntime();
 	const onNoticeRef = useRef(onNotice);
@@ -1757,6 +1774,11 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		level,
 		message
 	}));
+	const [viewportAutoSizeDefault, setViewportAutoSizeDefaultState] = useState(loadAutoSizeDefault);
+	const [viewportAutoSync, setViewportAutoSyncState] = useState(() => collaborationRole !== "viewer" && viewportAutoSizeDefault);
+	const viewportAutoSyncRef = useRef(viewportAutoSync);
+	viewportAutoSyncRef.current = viewportAutoSync;
+	const autoSizePreference = useCallback(() => viewportAutoSyncRef.current, []);
 	const live = useLiveSession({
 		sessionId,
 		displayName,
@@ -1765,7 +1787,8 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		role: collaborationRole,
 		enabled: Boolean(enabled && sessionId && credentials),
 		webrtcSupported: webrtcProducerSupported,
-		iceServers: webrtcIceServers
+		iceServers: webrtcIceServers,
+		autoSize: autoSizePreference
 	});
 	const [targetOrder, setTargetOrder] = useState([]);
 	const targets = useMemo(() => mergeTargetsInCurrentOrder(targetOrder, live.targets), [live.targets, targetOrder]);
@@ -1775,18 +1798,15 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 	phaseRef.current = live.phase;
 	const [viewport, setViewportState] = useState(DEFAULT_VIEWPORT);
 	const [browserViewportSize, setBrowserViewportSizeState] = useState(null);
-	const [viewportAutoSync, setViewportAutoSyncState] = useState(false);
 	const [captured, setCaptured] = useState(false);
 	const [recordingBusy, setRecordingBusy] = useState(false);
 	const activeTargetIdRef = useRef(null);
 	const viewportRef = useRef(viewport);
 	const inputDimensionsRef = useRef(DEFAULT_VIEWPORT);
 	const browserViewportSizeRef = useRef(null);
-	const viewportAutoSyncRef = useRef(false);
 	activeTargetIdRef.current = live.activeTargetId;
 	viewportRef.current = viewport;
 	browserViewportSizeRef.current = browserViewportSize;
-	viewportAutoSyncRef.current = viewportAutoSync;
 	useEffect(() => {
 		if (live.phase !== "connected") setCaptured(false);
 	}, [live.phase]);
@@ -1859,21 +1879,54 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		const targetId = activeTargetIdRef.current;
 		if (targetId) live.command("page.history-forward", { targetId });
 	}, [live]);
-	const commitViewport = useCallback((preset) => {
+	const viewportOwnership = live.viewportOwnership;
+	const viewportOwnershipRef = useRef(viewportOwnership);
+	viewportOwnershipRef.current = viewportOwnership;
+	const viewportAutoSizeActive = viewportAutoSync && (viewportOwnership === null || viewportOwnership.ownerClientId === live.collaboration.clientId);
+	const viewportAutoSizeActiveRef = useRef(viewportAutoSizeActive);
+	viewportAutoSizeActiveRef.current = viewportAutoSizeActive;
+	useEffect(() => {
+		if (viewportOwnership !== null) {
+			viewportAutoSyncRef.current = viewportOwnership.autoSize;
+			setViewportAutoSyncState(viewportOwnership.autoSize);
+		}
+	}, [viewportOwnership]);
+	const runAutoSizeViewport = useEffectCallback((payload) => live.request("viewport.set", payload).pipe(Effect.ignore), [live.request]);
+	const commitViewport = useCallback((preset, autoSize) => {
 		setViewportState(preset);
 		const targetId = activeTargetIdRef.current;
-		if (targetId) live.command("viewport.set", {
+		if (targetId === null) return;
+		const payload = {
 			targetId,
 			width: preset.width,
 			height: preset.height,
 			deviceScaleFactor: preset.deviceScaleFactor
+		};
+		if (autoSize && viewportOwnershipRef.current !== null) runAutoSizeViewport({
+			...payload,
+			autoSize: true
 		});
-	}, [live]);
+		else live.command("viewport.set", payload);
+	}, [live.command, runAutoSizeViewport]);
+	const setViewportAutoSync = useCallback((nextEnabled) => {
+		if (viewportAutoSyncRef.current === nextEnabled) return;
+		viewportAutoSyncRef.current = nextEnabled;
+		setViewportAutoSyncState(nextEnabled);
+		if (viewportOwnershipRef.current !== null) live.command("viewport.auto-size.set", { enabled: nextEnabled });
+	}, [live.command]);
+	useEffect(() => {
+		const size = browserViewportSizeRef.current;
+		if (viewportAutoSizeActive && live.phase === "connected" && live.activeTargetId !== null && size !== null) commitViewport(createBrowserViewport(size, viewportRef.current.deviceScaleFactor), true);
+	}, [
+		commitViewport,
+		live.activeTargetId,
+		live.phase,
+		viewportAutoSizeActive
+	]);
 	const setViewport = useCallback((preset) => {
-		viewportAutoSyncRef.current = false;
-		setViewportAutoSyncState(false);
-		commitViewport(preset);
-	}, [commitViewport]);
+		setViewportAutoSync(false);
+		commitViewport(preset, false);
+	}, [commitViewport, setViewportAutoSync]);
 	const setBrowserViewportSize = useCallback((size) => {
 		const next = {
 			width: Math.round(size.width),
@@ -1884,21 +1937,25 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		if (current?.width === next.width && current.height === next.height) return;
 		browserViewportSizeRef.current = next;
 		setBrowserViewportSizeState(next);
-		if (viewportAutoSyncRef.current) commitViewport(createBrowserViewport(next, viewportRef.current.deviceScaleFactor));
-	}, [commitViewport]);
-	const setViewportAutoSync = useCallback((nextEnabled) => {
-		viewportAutoSyncRef.current = nextEnabled;
-		setViewportAutoSyncState(nextEnabled);
-		const size = browserViewportSizeRef.current;
-		if (nextEnabled && size) commitViewport(createBrowserViewport(size, viewportRef.current.deviceScaleFactor));
+		if (viewportAutoSizeActiveRef.current) commitViewport(createBrowserViewport(next, viewportRef.current.deviceScaleFactor), true);
 	}, [commitViewport]);
 	const setViewportToBrowserSize = useCallback(() => {
 		const size = browserViewportSizeRef.current;
 		if (!size) return;
-		viewportAutoSyncRef.current = false;
-		setViewportAutoSyncState(false);
-		commitViewport(createBrowserViewport(size, viewportRef.current.deviceScaleFactor));
-	}, [commitViewport]);
+		setViewportAutoSync(false);
+		commitViewport(createBrowserViewport(size, viewportRef.current.deviceScaleFactor), false);
+	}, [commitViewport, setViewportAutoSync]);
+	const takeOverViewport = useCallback(() => {
+		viewportAutoSyncRef.current = true;
+		setViewportAutoSyncState(true);
+		live.command("viewport.owner.claim");
+	}, [live.command]);
+	const setViewportAutoSizeDefault = useCallback((nextEnabled) => {
+		setViewportAutoSizeDefaultState(nextEnabled);
+		try {
+			window.localStorage.setItem(AUTO_SIZE_DEFAULT_STORAGE_KEY, String(nextEnabled));
+		} catch {}
+	}, []);
 	const settleRecording = (effect, failure) => effect.pipe(Effect.catch((error) => notify("error", errorMessage(error, failure))), Effect.ensuring(Effect.sync(() => setRecordingBusy(false))));
 	const runStartRecording = useEffectCallback((mode, targetId) => settleRecording(live.request("recording.start", {
 		mode,
@@ -1914,7 +1971,7 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		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))), Effect.flatMap(({ blob, filename }) => {
+	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 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]);
@@ -1999,6 +2056,9 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		viewport,
 		browserViewportSize,
 		viewportAutoSync,
+		viewportAutoSizeActive,
+		viewportOwnership,
+		viewportAutoSizeDefault,
 		captured,
 		recordings: live.recordings,
 		recordingBusy,
@@ -2013,6 +2073,8 @@ function useBrowserControl({ sessionId, credentials, displayName, sessionToken,
 		setBrowserViewportSize,
 		setViewportAutoSync,
 		setViewportToBrowserSize,
+		setViewportAutoSizeDefault,
+		takeOverViewport,
 		setWebRTCStreamSettings,
 		selectMediaStream,
 		sendInput,
@@ -2047,6 +2109,13 @@ function mergeTargetsInCurrentOrder(order, nextTargets) {
 	for (const nextTarget of nextTargets) if (!seen.has(nextTarget.id)) ordered.push(nextTarget);
 	return ordered;
 }
+function loadAutoSizeDefault() {
+	try {
+		return window.localStorage.getItem(AUTO_SIZE_DEFAULT_STORAGE_KEY) === "true";
+	} catch {
+		return false;
+	}
+}
 function createBrowserViewport(size, deviceScaleFactor) {
 	return createViewportPreset(size.width, size.height, deviceScaleFactor);
 }
@@ -2097,7 +2166,7 @@ function useSharedSession({ token, displayName, onNotice }) {
 	const share = useMemo(() => parseShareToken(token), [token]);
 	const credentials = useMemo(() => share && {
 		kind: "bearer",
-		token: share.token,
+		token: Redacted.make(share.token),
 		authorityType: null,
 		tenantId: null,
 		selectedTenantId: null
@@ -2132,4 +2201,4 @@ function useSharedSession({ token, displayName, onNotice }) {
 //#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 };
 
-//# sourceMappingURL=headless-CKFacFX3.js.map
+//# sourceMappingURL=headless-CJ5KaGbF.js.map