Mic Selector

1<script lang="ts" module>
2	export type MicSelectorProps = {
3		/**
4		 * Selected microphone `deviceId`. Leave unset for uncontrolled mode —
5		 * the first available device is auto-selected.
6		 */
7		value?: string;
8		/** Called when the user picks a different microphone from the dropdown. */
9		onValueChange?: (deviceId: string) => void;
10		/**
11		 * Mute state. Leave unset for uncontrolled mode, where the component
12		 * tracks mute internally.
13		 */
14		muted?: boolean;
15		/** Called when the user toggles the mute button. */
16		onMutedChange?: (muted: boolean) => void;
17		/** Disables the trigger button. */
18		disabled?: boolean;
19		class?: string;
20	};
21</script>
22 
23<script lang="ts">
24	import Check from "@lucide/svelte/icons/check";
25	import ChevronsUpDown from "@lucide/svelte/icons/chevrons-up-down";
26	import Mic from "@lucide/svelte/icons/mic";
27	import MicOff from "@lucide/svelte/icons/mic-off";
28	import { Button } from "$UI$/button/index.js";
29	import {
30		DropdownMenu,
31		DropdownMenuContent,
32		DropdownMenuItem,
33		DropdownMenuSeparator,
34		DropdownMenuTrigger,
35	} from "$UI$/dropdown-menu/index.js";
36	import { LiveWaveform } from "$UI$/live-waveform/index.js";
37	import { cn } from "$UTILS$.js";
38	import { useAudioDevices } from "./use-audio-devices.svelte.js";
39 
40	let {
41		value,
42		onValueChange,
43		muted,
44		onMutedChange,
45		disabled,
46		class: className,
47	}: MicSelectorProps = $props();
48 
49	const audio = useAudioDevices();
50 
51	let selectedDevice = $state("");
52	let internalMuted = $state(false);
53	let isDropdownOpen = $state(false);
54 
55	const isMuted = $derived(muted !== undefined ? muted : internalMuted);
56	const defaultDeviceId = $derived(audio.devices[0]?.deviceId ?? "");
57	const currentDevice = $derived(
58		audio.devices.find((d) => d.deviceId === selectedDevice) ??
59			audio.devices[0] ?? {
60				label: audio.loading ? "Loading..." : "No microphone",
61				deviceId: "",
62				groupId: "",
63			}
64	);
65	const isPreviewActive = $derived(isDropdownOpen && !isMuted);
66 
67	$effect(() => {
68		if (value !== undefined) selectedDevice = value;
69	});
70 
71	$effect(() => {
72		if (!selectedDevice && defaultDeviceId) {
73			selectedDevice = defaultDeviceId;
74			onValueChange?.(defaultDeviceId);
75		}
76	});
77 
78	function handleDeviceSelect(deviceId: string) {
79		selectedDevice = deviceId;
80		onValueChange?.(deviceId);
81	}
82 
83	async function handleDropdownOpenChange(open: boolean) {
84		isDropdownOpen = open;
85		if (open && !audio.hasPermission && !audio.loading) {
86			await audio.loadDevices();
87		}
88	}
89 
90	function toggleMute() {
91// … truncated