@joewinke/jatui 0.6.0 → 0.6.1

package/dist/components/MediaCapture.svelte

@@ -33,6 +33,17 @@
 	 * getDisplayMedia exists, and never throws — a permission denial or
 	 * cancelled screen-share surfaces as inline `errorMessage`, and the
 	 * component returns to idle so the caller can retry.
+	 *
+	 * Two UAT findings shaped the recording UI (mos-ow4q4.37):
+	 *   1. The elapsed clock is driven by the recorder's own `ondataavailable`
+	 *      timeslice, not only by a setInterval. A `screen` capture is normally
+	 *      started against another window, which leaves THIS page hidden — and
+	 *      a hidden page's timers are throttled to roughly one tick a minute,
+	 *      so the interval alone left the timer visibly frozen mid-recording.
+	 *   2. A fixed-position banner announces an active screen capture in the
+	 *      page itself. The browser's sharing indicator is chrome, not content:
+	 *      it is not visible from the shared window and it never says how long
+	 *      THIS recording has run.
 	 */
 	import MediaCaptureIcon from './MediaCaptureIcon.svelte'
 
@@ -51,6 +62,28 @@
 		/** Smaller footprint (icon-only mode buttons) for embedding inside a
 		 * larger composite field like MultimodalCaptureField. */
 		compact?: boolean
+		/** Override the per-mode button label. Hosts that frame recording as
+		 * "add another response" want their own wording ("Voice" vs "Add voice"),
+		 * and the screen mode in particular has been called both "Screen" and
+		 * "Show us" in different products. */
+		modeLabels?: Partial<Record<MediaCaptureKind, string>>
+		/** Prefix each mode button with a `+`, framing the modes as
+		 * add-affordances on a field that accepts SEVERAL responses rather than
+		 * as a one-shot record button. */
+		addAffordance?: boolean
+		/** Render a fixed, page-level "screen sharing is active" banner while a
+		 * `screen` capture runs. The browser's own sharing chrome lives outside
+		 * the page, so without this the page itself gives no sign it is being
+		 * recorded — the single most-reported confusion in UAT. */
+		screenIndicator?: boolean
+		/** Observe the capture state machine (phase / kind / elapsed). Lets a
+		 * host disable competing controls or mirror the recording state without
+		 * reaching into this component's internals. */
+		onStateChange?: (state: {
+			phase: 'idle' | 'recording' | 'processing' | 'error'
+			kind: MediaCaptureKind | null
+			elapsedSeconds: number
+		}) => void
 		class?: string
 	}
 
@@ -62,6 +95,10 @@
 		hint,
 		disabled = false,
 		compact = false,
+		modeLabels,
+		addAffordance = false,
+		screenIndicator = true,
+		onStateChange,
 		class: className = ''
 	}: Props = $props()
 
@@ -71,6 +108,10 @@
 	let errorMessage = $state('')
 	let elapsedSec = $state(0)
 
+	$effect(() => {
+		onStateChange?.({ phase, kind: activeKind, elapsedSeconds: elapsedSec })
+	})
+
 	let recorder: MediaRecorder | null = null
 	let primaryStream: MediaStream | null = null
 	let secondaryStream: MediaStream | null = null
@@ -94,6 +135,11 @@
 	const showAudio = $derived(modes.includes('audio') && hasUserMedia)
 	const showVideo = $derived(modes.includes('video') && hasUserMedia)
 	const showScreen = $derived(modes.includes('screen') && hasDisplayMedia)
+	const offeredModes = $derived(
+		(['audio', 'video', 'screen'] as MediaCaptureKind[]).filter((k) =>
+			k === 'audio' ? showAudio : k === 'video' ? showVideo : showScreen
+		)
+	)
 
 	function pickMime(candidates: string[]): string {
 		for (const c of candidates) {
@@ -106,6 +152,14 @@
 		stream?.getTracks().forEach((t) => t.stop())
 	}
 
+	/** Recompute elapsed from the wall clock rather than incrementing a counter,
+	 * so a tick that never fired (throttled tab) can never make the display
+	 * lag the actual recording. */
+	function tick() {
+		if (!startedAt) return
+		elapsedSec = Math.floor((performance.now() - startedAt) / 1000)
+	}
+
 	function cleanup() {
 		stopAllTracks(primaryStream)
 		stopAllTracks(secondaryStream)
@@ -127,6 +181,10 @@
 			clearInterval(tickTimer)
 			tickTimer = null
 		}
+		if (typeof document !== 'undefined') {
+			document.removeEventListener('visibilitychange', tick)
+		}
+		startedAt = 0
 		if (videoPreviewEl) videoPreviewEl.srcObject = null
 	}
 
@@ -202,6 +260,13 @@
 			const rec = new MediaRecorder(stream, mimeUsed ? { mimeType: mimeUsed } : undefined)
 			rec.ondataavailable = (e) => {
 				if (e.data.size > 0) chunks.push(e.data)
+				// The authoritative tick. `screen` captures are usually started
+				// against ANOTHER window or tab, which leaves this page hidden —
+				// and a hidden page's setInterval is throttled to roughly once a
+				// minute, which is exactly why the UAT screen timer sat frozen at
+				// 0:12. MediaRecorder keeps firing this at the timeslice interval
+				// regardless of page visibility, so the clock stays live.
+				tick()
 			}
 			rec.onstop = () => void finish(kind)
 			rec.start(250)
@@ -210,9 +275,13 @@
 			elapsedSec = 0
 			activeKind = kind
 			phase = 'recording'
-			tickTimer = setInterval(() => {
-				elapsedSec = Math.floor((performance.now() - startedAt) / 1000)
-			}, 500)
+			// Belt: the interval covers the idle gap between timeslices while the
+			// page is visible. Braces: a visibility flip resyncs immediately, so
+			// returning to a backgrounded tab never shows a stale number.
+			tickTimer = setInterval(tick, 500)
+			if (typeof document !== 'undefined') {
+				document.addEventListener('visibilitychange', tick)
+			}
 			autoStopTimer = setTimeout(stop, maxDurationMs)
 		} catch {
 			cleanup()
@@ -253,12 +322,21 @@
 		}
 	}
 
-	function modeIcon(kind: MediaCaptureKind): string {
+	function modeIcon(kind: MediaCaptureKind): 'mic' | 'video' | 'monitor' {
 		return kind === 'audio' ? 'mic' : kind === 'video' ? 'video' : 'monitor'
 	}
 
+	const DEFAULT_MODE_LABELS: Record<MediaCaptureKind, string> = {
+		audio: 'Voice',
+		video: 'Video',
+		// "Screen" says what it captures. "Show us" said what to do with it and
+		// left people guessing (mos-ow4q4.37); hosts that preferred the old
+		// wording can pass it back through `modeLabels`.
+		screen: 'Screen'
+	}
+
 	function modeLabel(kind: MediaCaptureKind): string {
-		return kind === 'audio' ? 'Voice' : kind === 'video' ? 'Video' : 'Show us'
+		return modeLabels?.[kind] ?? DEFAULT_MODE_LABELS[kind]
 	}
 
 	function formatElapsed(sec: number): string {
@@ -304,36 +382,20 @@
 			</div>
 		{:else}
 			<div class="flex flex-wrap gap-2">
-				{#if showAudio}
-					<button
-						type="button"
-						class="btn btn-outline btn-xs rounded-field gap-1"
-						{disabled}
-						onclick={() => start('audio')}
-					>
-						<MediaCaptureIcon name="mic" size={12} /> {modeLabel('audio')}
-					</button>
-				{/if}
-				{#if showVideo}
-					<button
-						type="button"
-						class="btn btn-outline btn-xs rounded-field gap-1"
-						{disabled}
-						onclick={() => start('video')}
-					>
-						<MediaCaptureIcon name="video" size={12} /> {modeLabel('video')}
-					</button>
-				{/if}
-				{#if showScreen}
+				{#each offeredModes as kind (kind)}
 					<button
 						type="button"
 						class="btn btn-outline btn-xs rounded-field gap-1"
 						{disabled}
-						onclick={() => start('screen')}
+						onclick={() => start(kind)}
 					>
-						<MediaCaptureIcon name="monitor" size={12} /> {modeLabel('screen')}
+						{#if addAffordance}
+							<MediaCaptureIcon name="plus" size={12} />
+						{/if}
+						<MediaCaptureIcon name={modeIcon(kind)} size={12} />
+						{modeLabel(kind)}
 					</button>
-				{/if}
+				{/each}
 			</div>
 			{#if phase === 'error' && errorMessage}
 				<p class="text-warning mt-1.5 text-xs" role="status" aria-live="polite">
@@ -342,9 +404,48 @@
 			{/if}
 		{/if}
 	</div>
+
+	<!--
+		In-page proof that the screen is being captured. The browser's own
+		"sharing your screen" bar is browser chrome, not page content — it is
+		absent when the user is looking at the shared window, and it never says
+		how long this particular recording has been running. Fixed-position so it
+		survives scrolling, and it carries its own Stop so the user never has to
+		hunt back up the page for the control.
+	-->
+	{#if screenIndicator && phase === 'recording' && activeKind === 'screen'}
+		<div class="media-capture-screen-banner" role="status" aria-live="polite">
+			<span class="media-capture-dot"></span>
+			<MediaCaptureIcon name="monitor" size={14} />
+			<span class="text-xs font-medium">
+				Recording your screen — {formatElapsed(elapsedSec)}
+			</span>
+			<button type="button" class="btn btn-error btn-xs rounded-field gap-1" onclick={stop}>
+				<MediaCaptureIcon name="square" size={12} /> Stop
+			</button>
+		</div>
+	{/if}
 {/if}
 
 <style>
+	.media-capture-screen-banner {
+		position: fixed;
+		top: 0.75rem;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 9999;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.4rem 0.75rem;
+		border-radius: var(--radius-box, 0.5rem);
+		border: 1px solid color-mix(in oklch, var(--color-error) 45%, transparent);
+		background: var(--color-base-100);
+		color: var(--color-base-content);
+		box-shadow: 0 4px 16px color-mix(in oklch, var(--color-base-content) 18%, transparent);
+		max-width: calc(100vw - 1.5rem);
+	}
+
 	.media-capture-dot {
 		display: inline-block;
 		width: 0.5rem;
@@ -365,7 +466,25 @@
 		}
 	}
 	@media (prefers-reduced-motion: reduce) {
-		.media-capture-dot {
+		.media-capture-screen-banner {
+		position: fixed;
+		top: 0.75rem;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 9999;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.4rem 0.75rem;
+		border-radius: var(--radius-box, 0.5rem);
+		border: 1px solid color-mix(in oklch, var(--color-error) 45%, transparent);
+		background: var(--color-base-100);
+		color: var(--color-base-content);
+		box-shadow: 0 4px 16px color-mix(in oklch, var(--color-base-content) 18%, transparent);
+		max-width: calc(100vw - 1.5rem);
+	}
+
+	.media-capture-dot {
 			animation: none;
 		}
 	}

package/dist/components/MediaCapture.svelte.d.ts

@@ -20,6 +20,28 @@ interface Props {
     /** Smaller footprint (icon-only mode buttons) for embedding inside a
      * larger composite field like MultimodalCaptureField. */
     compact?: boolean;
+    /** Override the per-mode button label. Hosts that frame recording as
+     * "add another response" want their own wording ("Voice" vs "Add voice"),
+     * and the screen mode in particular has been called both "Screen" and
+     * "Show us" in different products. */
+    modeLabels?: Partial<Record<MediaCaptureKind, string>>;
+    /** Prefix each mode button with a `+`, framing the modes as
+     * add-affordances on a field that accepts SEVERAL responses rather than
+     * as a one-shot record button. */
+    addAffordance?: boolean;
+    /** Render a fixed, page-level "screen sharing is active" banner while a
+     * `screen` capture runs. The browser's own sharing chrome lives outside
+     * the page, so without this the page itself gives no sign it is being
+     * recorded — the single most-reported confusion in UAT. */
+    screenIndicator?: boolean;
+    /** Observe the capture state machine (phase / kind / elapsed). Lets a
+     * host disable competing controls or mirror the recording state without
+     * reaching into this component's internals. */
+    onStateChange?: (state: {
+        phase: 'idle' | 'recording' | 'processing' | 'error';
+        kind: MediaCaptureKind | null;
+        elapsedSeconds: number;
+    }) => void;
     class?: string;
 }
 declare const MediaCapture: import("svelte").Component<Props, {}, "">;

package/dist/components/MediaCaptureIcon.svelte

@@ -10,7 +10,17 @@
 		size = 14,
 		class: className = ''
 	}: {
-		name: 'mic' | 'video' | 'monitor' | 'square' | 'loader' | 'x' | 'file' | 'trash'
+		name:
+			| 'mic'
+			| 'video'
+			| 'monitor'
+			| 'square'
+			| 'loader'
+			| 'x'
+			| 'file'
+			| 'trash'
+			| 'plus'
+			| 'type'
 		size?: number
 		class?: string
 	} = $props()
@@ -131,4 +141,35 @@
 		<path d="M3 6h18" />
 		<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
 	</svg>
+{:else if name === 'plus'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<path d="M5 12h14" />
+		<path d="M12 5v14" />
+	</svg>
+{:else if name === 'type'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={className}
+	>
+		<path d="M4 7V4h16v3" />
+		<path d="M9 20h6" />
+		<path d="M12 4v16" />
+	</svg>
 {/if}

package/dist/components/MediaCaptureIcon.svelte.d.ts

@@ -1,5 +1,5 @@
 type $$ComponentProps = {
-    name: 'mic' | 'video' | 'monitor' | 'square' | 'loader' | 'x' | 'file' | 'trash';
+    name: 'mic' | 'video' | 'monitor' | 'square' | 'loader' | 'x' | 'file' | 'trash' | 'plus' | 'type';
     size?: number;
     class?: string;
 };

package/package.json

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