@joewinke/jatui 0.2.23 → 0.2.25

package/dist/actions/floating.js

@@ -75,6 +75,17 @@ export function floating(node, options) {
     function applyPosition() {
         if (!opts.anchor)
             return;
+        // Anchor the element synchronously BEFORE the async computePosition
+        // refines it. computePosition resolves on a microtask, and until then a
+        // position:fixed element with auto left/top renders at its static flow
+        // position — observed in prod as a context menu stuck at the container's
+        // top-left instead of the cursor. The raw anchor rect is the correct
+        // coarse position (exact for virtual/cursor anchors); flip/shift then
+        // refine it when the promise lands.
+        const rect = opts.anchor.getBoundingClientRect();
+        node.style.position = 'fixed';
+        node.style.left = `${rect.left}px`;
+        node.style.top = `${rect.bottom + (opts.offset ?? 0)}px`;
         const middlewares = [];
         if (opts.offset != null)
             middlewares.push(fuOffset(opts.offset));
@@ -87,7 +98,6 @@ export function floating(node, options) {
             strategy: 'fixed',
             middleware: middlewares,
         }).then(({ x, y }) => {
-            node.style.position = 'fixed';
             node.style.left = `${x}px`;
             node.style.top = `${y}px`;
         });

package/dist/meet/PreJoinLobby.svelte

@@ -78,42 +78,93 @@
 		if (videoEl) videoEl.srcObject = null;
 	}
 
+	// Serialize acquisitions: toggles/device switches re-run acquire() while a
+	// previous getUserMedia may still be pending, and a stale resolution used to
+	// stop the live stream or attach a dead one (black preview). Latest-wins:
+	// stale acquisitions stop their own tracks and change nothing.
+	let acquireSeq = 0;
+
+	function videoConstraint(): MediaStreamConstraints['video'] {
+		if (!cameraEnabled) return false;
+		return videoDeviceId ? { deviceId: { exact: videoDeviceId } } : true;
+	}
+	function audioConstraint(): MediaStreamConstraints['audio'] {
+		if (!micEnabled) return false;
+		return audioDeviceId ? { deviceId: { exact: audioDeviceId } } : true;
+	}
+
 	async function acquire() {
 		if (typeof navigator === 'undefined' || !navigator.mediaDevices?.getUserMedia) {
 			permissionError = 'This browser does not support camera/microphone access.';
 			return;
 		}
+		const seq = ++acquireSeq;
 		stopStream();
 		permissionError = null;
 		if (!cameraEnabled && !micEnabled) return;
+
+		// One combined call first (single permission prompt). If it fails with
+		// both kinds requested, fall back to acquiring each kind separately so
+		// one bad device (camera held by another app, unplugged mic) doesn't
+		// take the other down with it — that failure mode left the lobby with a
+		// dead preview tile even though the mic was fine.
+		let next: MediaStream | null = null;
+		let failedKinds: string[] = [];
+		let blocked = false;
 		try {
-			const next = await navigator.mediaDevices.getUserMedia({
-				video: cameraEnabled
-					? videoDeviceId
-						? { deviceId: { exact: videoDeviceId } }
-						: true
-					: false,
-				audio: micEnabled
-					? audioDeviceId
-						? { deviceId: { exact: audioDeviceId } }
-						: true
-					: false
+			next = await navigator.mediaDevices.getUserMedia({
+				video: videoConstraint(),
+				audio: audioConstraint()
 			});
-			stream = next;
-			if (videoEl && cameraEnabled) {
-				videoEl.srcObject = next;
-				void videoEl.play().catch(() => {});
-			}
-			// Enumerate labelled devices now that permission is granted.
-			const devices = await navigator.mediaDevices.enumerateDevices();
-			videoDevices = devices.filter((d) => d.kind === 'videoinput');
-			audioDevices = devices.filter((d) => d.kind === 'audioinput');
 		} catch (err) {
+			if (err instanceof DOMException && err.name === 'NotAllowedError') blocked = true;
+			else if (cameraEnabled && micEnabled) {
+				for (const kind of ['audio', 'video'] as const) {
+					try {
+						const partial = await navigator.mediaDevices.getUserMedia(
+							kind === 'video'
+								? { video: videoConstraint(), audio: false }
+								: { video: false, audio: audioConstraint() }
+						);
+						if (next) partial.getTracks().forEach((t) => next!.addTrack(t));
+						else next = partial;
+					} catch {
+						failedKinds.push(kind === 'video' ? 'camera' : 'microphone');
+					}
+				}
+			} else {
+				failedKinds.push(cameraEnabled ? 'camera' : 'microphone');
+			}
+		}
+
+		if (seq !== acquireSeq) {
+			// A newer acquisition superseded this one while we awaited.
+			next?.getTracks().forEach((t) => t.stop());
+			return;
+		}
+
+		if (blocked) {
 			permissionError =
-				err instanceof DOMException && err.name === 'NotAllowedError'
-					? 'Camera/microphone access was blocked. Enable it in your browser to preview.'
-					: 'Could not access your camera or microphone.';
+				'Camera/microphone access was blocked. Enable it in your browser to preview.';
+			return;
 		}
+		if (failedKinds.length) {
+			permissionError = `Could not access your ${failedKinds.join(' or ')}${
+				failedKinds.includes('camera') ? ' — it may be in use by another app' : ''
+			}.`;
+		}
+		if (!next) return;
+
+		stream = next;
+		if (videoEl && cameraEnabled && next.getVideoTracks().length) {
+			videoEl.srcObject = next;
+			void videoEl.play().catch(() => {});
+		}
+		// Enumerate labelled devices now that permission is granted.
+		const devices = await navigator.mediaDevices.enumerateDevices();
+		if (seq !== acquireSeq) return;
+		videoDevices = devices.filter((d) => d.kind === 'videoinput');
+		audioDevices = devices.filter((d) => d.kind === 'audioinput');
 	}
 
 	// (Re)acquire whenever the enabled toggles or selected devices change.
@@ -169,6 +220,14 @@
 					</svg>
 					<span class="text-sm">Camera is off</span>
 				</div>
+			{:else if !stream && !permissionError}
+				<!-- Camera requested but no stream yet: the browser permission prompt is
+				     (or is about to be) up. Without this state the tile is a blank black
+				     box while the user decides — observed on iOS Safari. -->
+				<div class="absolute inset-0 flex flex-col items-center justify-center gap-3 px-6 text-center text-base-content/60">
+					<span class="loading loading-ring loading-lg" aria-hidden="true"></span>
+					<span class="text-sm">Allow camera &amp; microphone access to see your preview</span>
+				</div>
 			{/if}
 
 			<!-- Preview device toggles -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.2.23",
+  "version": "0.2.25",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",