@joewinke/jatui 0.2.24 → 0.2.26

package/dist/meet/PreJoinLobby.svelte

@@ -12,6 +12,7 @@
 	 * haven't installed the peer. Media preview is stopped on unmount and before
 	 * join (the room re-acquires tracks).
 	 */
+	import { untrack } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { PreJoinResult } from './types.js';
 
@@ -78,42 +79,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.
@@ -124,7 +176,12 @@
 		void videoDeviceId;
 		void audioDeviceId;
 		void videoEl;
-		acquire();
+		// untrack is load-bearing: acquire() synchronously calls stopStream(),
+		// which READS `stream` — without untrack the effect silently depends on
+		// `stream`, so the `stream = next` assignment re-runs the effect, whose
+		// cleanup stops the just-acquired stream and re-acquires, forever. The
+		// observable symptom was a preview that never survived acquisition.
+		untrack(() => acquire());
 		return () => stopStream();
 	});
 
@@ -169,6 +226,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/dist/meet/PreJoinLobby.svelte.d.ts

@@ -1,16 +1,3 @@
-/**
-     * PreJoinLobby — the device check before joining.
-     *
-     * Camera/mic self-preview, display-name confirm, per-device pickers, and an
-     * optional consent gate (checkbox slot; recording/telehealth contexts). On
-     * "Join" it emits a {@link PreJoinResult} the route uses to exchange the join
-     * token for a LiveKit JWT and connect.
-     *
-     * Uses only browser-native `getUserMedia`/`enumerateDevices` — NO
-     * livekit-client dependency, so the lobby renders in demos and in apps that
-     * haven't installed the peer. Media preview is stopped on unmount and before
-     * join (the room re-acquires tracks).
-     */
 import type { Snippet } from 'svelte';
 import type { PreJoinResult } from './types.js';
 interface Props {

package/package.json

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