mic-selector

1"use client"
2 
3import { useCallback, useEffect, useState } from "react"
4import { Check, ChevronsUpDown, Mic, MicOff } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8import {
9  DropdownMenu,
10  DropdownMenuContent,
11  DropdownMenuItem,
12  DropdownMenuSeparator,
13  DropdownMenuTrigger,
14} from "@/components/ui/dropdown-menu"
15import { LiveWaveform } from "@/components/ui/live-waveform"
16 
17export interface AudioDevice {
18  deviceId: string
19  label: string
20  groupId: string
21}
22 
23export interface MicSelectorProps {
24  value?: string
25  onValueChange?: (deviceId: string) => void
26  muted?: boolean
27  onMutedChange?: (muted: boolean) => void
28  disabled?: boolean
29  className?: string
30}
31 
32export function MicSelector({
33  value,
34  onValueChange,
35  muted,
36  onMutedChange,
37  disabled,
38  className,
39}: MicSelectorProps) {
40  const { devices, loading, error, hasPermission, loadDevices } =
41    useAudioDevices()
42  const [selectedDevice, setSelectedDevice] = useState<string>(value || "")
43  const [internalMuted, setInternalMuted] = useState(false)
44  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
45 
46  // Use controlled muted if provided, otherwise use internal state
47  const isMuted = muted !== undefined ? muted : internalMuted
48 
49  // Update internal state when controlled value changes
50  useEffect(() => {
51    if (value !== undefined) {
52      setSelectedDevice(value)
53    }
54  }, [value])
55 
56  // Select first device by default
57  const defaultDeviceId = devices[0]?.deviceId || ""
58  useEffect(() => {
59    if (!selectedDevice && defaultDeviceId) {
60      const newDevice = defaultDeviceId
61      setSelectedDevice(newDevice)
62      onValueChange?.(newDevice)
63    }
64  }, [defaultDeviceId, selectedDevice, onValueChange])
65 
66  const currentDevice = devices.find((d) => d.deviceId === selectedDevice) ||
67    devices[0] || {
68      label: loading ? "Loading..." : "No microphone",
69      deviceId: "",
70    }
71 
72  const handleDeviceSelect = (deviceId: string, e?: React.MouseEvent) => {
73    e?.preventDefault()
74    setSelectedDevice(deviceId)
75    onValueChange?.(deviceId)
76  }
77 
78  const handleDropdownOpenChange = async (open: boolean) => {
79    setIsDropdownOpen(open)
80    if (open && !hasPermission && !loading) {
81      await loadDevices()
82    }
83  }
84 
85  const toggleMute = () => {
86    const newMuted = !isMuted
87    if (muted === undefined) {
88      setInternalMuted(newMuted)
89    }
90    onMutedChange?.(newMuted)
91  }
92 
93  const isPreviewActive = isDropdownOpen && !isMuted
94 
95// … truncated