@joewinke/jatui 0.2.26 → 0.2.28

package/dist/meet/ControlBar.svelte

@@ -11,7 +11,13 @@
 	 * red "Leave" that stands apart. Presentational: it reflects the local
 	 * participant + room state you pass and calls back on intent.
 	 */
-	import type { MeetParticipant, MeetRoomState, MeetHostActions, MeetLocalControls } from './types.js';
+	import type {
+		MeetParticipant,
+		MeetRoomState,
+		MeetHostActions,
+		MeetLocalControls,
+		MeetDevicePickers
+	} from './types.js';
 
 	interface Props {
 		/** The local participant (drives mic/cam/share pressed state). */
@@ -26,6 +32,20 @@
 		controls?: MeetLocalControls;
 		/** Host-action callbacks. */
 		hostActions?: MeetHostActions;
+		/**
+		 * Live input level of the local microphone, 0–1. When provided (and the
+		 * mic is unmuted) the mic button renders a small 3-bar meter under the
+		 * icon so the user can SEE that their voice is being picked up — the
+		 * camera gives that feedback for free, the mic never did. Omit to hide.
+		 */
+		micLevel?: number;
+		/**
+		 * In-meeting device switching. When provided, a settings gear renders a
+		 * dropdown listing microphones and cameras with the active one checked —
+		 * pick to switch live (mid-meeting mic/cam tweaking). Available to every
+		 * participant, unlike the host menu.
+		 */
+		devices?: MeetDevicePickers;
 		class?: string;
 	}
 
@@ -36,9 +56,20 @@
 		allowScreenShare = true,
 		controls = {},
 		hostActions = {},
+		micLevel,
+		devices,
 		class: className = ''
 	}: Props = $props();
 
+	// Perceptual boost: raw RMS of speech sits low (~0.05–0.3); sqrt spreads
+	// the useful range across the meter. Each bar lights past its threshold.
+	const meterLevel = $derived(Math.sqrt(Math.min(1, Math.max(0, micLevel ?? 0))));
+	const barActive = $derived([
+		meterLevel > 0.15,
+		meterLevel > 0.4,
+		meterLevel > 0.65
+	]);
+
 	const recording = $derived(room.recording ?? false);
 	const locked = $derived(room.locked ?? false);
 </script>
@@ -52,7 +83,7 @@
 	<!-- Mic -->
 	<button
 		type="button"
-		class="btn btn-circle"
+		class="btn btn-circle relative"
 		class:btn-error={local.micMuted}
 		class:btn-ghost={!local.micMuted}
 		aria-pressed={local.micMuted}
@@ -67,6 +98,17 @@
 			<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-14 0m7 7v3m0-3a4 4 0 004-4V5a4 4 0 00-8 0v6a4 4 0 004 4z" />
 			</svg>
+			{#if micLevel !== undefined}
+				<span class="jatui-mic-meter" aria-hidden="true">
+					{#each barActive as active, i (i)}
+						<span
+							class="jatui-mic-meter-bar"
+							class:is-active={active}
+							style="height: {0.2 + i * 0.125}rem"
+						></span>
+					{/each}
+				</span>
+			{/if}
 		{/if}
 	</button>
 
@@ -108,6 +150,63 @@
 		</button>
 	{/if}
 
+	{#if devices}
+		<!-- Device settings: mic/camera source pickers, live-switchable -->
+		<div class="dropdown dropdown-top dropdown-end">
+			<div tabindex="0" role="button" class="btn btn-circle btn-ghost" aria-label="Device settings">
+				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+				</svg>
+			</div>
+			<ul
+				class="dropdown-content menu z-[1] mb-2 max-h-80 w-72 flex-nowrap gap-0.5 overflow-y-auto bg-base-100 p-2 shadow-lg"
+				style="border-radius: var(--jatui-radius-box);"
+			>
+				<li class="menu-title text-xs">Microphone</li>
+				{#each devices.audioInputs as d (d.deviceId)}
+					<li>
+						<button
+							type="button"
+							class="justify-between gap-2"
+							aria-pressed={d.deviceId === devices.activeAudioId}
+							onclick={() => devices?.onSelectAudio?.(d.deviceId)}
+						>
+							<span class="truncate">{d.label}</span>
+							{#if d.deviceId === devices.activeAudioId}
+								<svg class="h-4 w-4 shrink-0 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+								</svg>
+							{/if}
+						</button>
+					</li>
+				{:else}
+					<li class="px-3 py-1 text-xs opacity-60">No microphones found</li>
+				{/each}
+				<li class="menu-title mt-1 text-xs">Camera</li>
+				{#each devices.videoInputs as d (d.deviceId)}
+					<li>
+						<button
+							type="button"
+							class="justify-between gap-2"
+							aria-pressed={d.deviceId === devices.activeVideoId}
+							onclick={() => devices?.onSelectVideo?.(d.deviceId)}
+						>
+							<span class="truncate">{d.label}</span>
+							{#if d.deviceId === devices.activeVideoId}
+								<svg class="h-4 w-4 shrink-0 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+								</svg>
+							{/if}
+						</button>
+					</li>
+				{:else}
+					<li class="px-3 py-1 text-xs opacity-60">No cameras found</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+
 	{#if isHost}
 		<div class="mx-1 h-8 w-px bg-base-content/15"></div>
 
@@ -174,3 +273,27 @@
 		<span class="hidden sm:inline">Leave</span>
 	</button>
 </div>
+
+<style>
+	/* Mic level meter — 3 tiny bars docked bottom-center of the mic button.
+	   Color/motion stay subtle: base-content at rest, success when lit. */
+	.jatui-mic-meter {
+		position: absolute;
+		bottom: 0.3rem;
+		left: 50%;
+		transform: translateX(-50%);
+		display: inline-flex;
+		align-items: flex-end;
+		gap: 2px;
+		pointer-events: none;
+	}
+	.jatui-mic-meter-bar {
+		width: 3px;
+		border-radius: 1px;
+		background: color-mix(in oklch, var(--color-base-content) 25%, transparent);
+		transition: background var(--motion-fast, 150ms) ease;
+	}
+	.jatui-mic-meter-bar.is-active {
+		background: var(--color-success);
+	}
+</style>

package/dist/meet/ControlBar.svelte.d.ts

@@ -10,7 +10,7 @@
      * red "Leave" that stands apart. Presentational: it reflects the local
      * participant + room state you pass and calls back on intent.
      */
-import type { MeetParticipant, MeetRoomState, MeetHostActions, MeetLocalControls } from './types.js';
+import type { MeetParticipant, MeetRoomState, MeetHostActions, MeetLocalControls, MeetDevicePickers } from './types.js';
 interface Props {
     /** The local participant (drives mic/cam/share pressed state). */
     local: MeetParticipant;
@@ -24,6 +24,20 @@ interface Props {
     controls?: MeetLocalControls;
     /** Host-action callbacks. */
     hostActions?: MeetHostActions;
+    /**
+     * Live input level of the local microphone, 0–1. When provided (and the
+     * mic is unmuted) the mic button renders a small 3-bar meter under the
+     * icon so the user can SEE that their voice is being picked up — the
+     * camera gives that feedback for free, the mic never did. Omit to hide.
+     */
+    micLevel?: number;
+    /**
+     * In-meeting device switching. When provided, a settings gear renders a
+     * dropdown listing microphones and cameras with the active one checked —
+     * pick to switch live (mid-meeting mic/cam tweaking). Available to every
+     * participant, unlike the host menu.
+     */
+    devices?: MeetDevicePickers;
     class?: string;
 }
 declare const ControlBar: import("svelte").Component<Props, {}, "">;

package/dist/meet/index.d.ts

@@ -6,4 +6,4 @@ export { default as ParticipantList } from './ParticipantList.svelte';
 export { default as RecordingBadge } from './RecordingBadge.svelte';
 export { loadLiveKit, isLiveKitAvailable, LiveKitNotInstalledError } from './livekit.js';
 export type { LiveKitModule } from './livekit.js';
-export type { MeetRole, MeetConnectionQuality, MeetParticipant, MeetHostActions, MeetLocalControls, PreJoinResult, MeetRoomState, MeetLayout } from './types.js';
+export type { MeetRole, MeetConnectionQuality, MeetParticipant, MeetHostActions, MeetLocalControls, MeetDeviceOption, MeetDevicePickers, PreJoinResult, MeetRoomState, MeetLayout } from './types.js';

package/dist/meet/types.d.ts

@@ -75,6 +75,31 @@ export interface MeetLocalControls {
     /** Leave the meeting (local participant only). */
     onLeave?: () => void;
 }
+/** One selectable input device (a distilled MediaDeviceInfo). */
+export interface MeetDeviceOption {
+    deviceId: string;
+    label: string;
+}
+/**
+ * In-meeting device pickers for ControlBar's settings dropdown. Presentational
+ * contract: the host app enumerates devices and performs the actual switch
+ * (e.g. livekit-client `room.switchActiveDevice`); ControlBar only renders the
+ * menu and reports intent.
+ */
+export interface MeetDevicePickers {
+    /** Available microphones. */
+    audioInputs: MeetDeviceOption[];
+    /** Available cameras. */
+    videoInputs: MeetDeviceOption[];
+    /** deviceId of the microphone currently in use. */
+    activeAudioId?: string;
+    /** deviceId of the camera currently in use. */
+    activeVideoId?: string;
+    /** User picked a microphone. */
+    onSelectAudio?: (deviceId: string) => void;
+    /** User picked a camera. */
+    onSelectVideo?: (deviceId: string) => void;
+}
 /** Result of the pre-join device check, handed to the join handler. */
 export interface PreJoinResult {
     /** Confirmed display name. */

package/package.json

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